目录

2638264600 的个人博客

记录精彩的程序人生

学习vue的小账本

   
    0 0 三学一心

https://www.kancloud.cn/cyyspring/webpack/2486630

1.vue

前端历程：
早期HTML为静态文件
CGI使得页面可以动态渲染（单线程），随之PHP、JSP、ASP服务端语言出现
Ajax使得局部刷新成为可能，1999到2005google发布Gmail，使得ajax长足发展
2009年的node.js使得前端也可以搭建后台
2018年三月，十厂共建“快应用”标准和平台

HTML：Hyper Text Markup Language
XML :Extensible Markup Language
CGI :Common GateWay Interface
Ajax :Asynchronous JavaScript And XML
RESTful :Representational State Transfer
SPA :Single Page Application
1-6

7-11

开发vue项目

1.安装node
打开node.js的官网下载地址：http://nodejs.cn/download/
安装完之后，新建俩文件夹，再执行命令：
npm config set prefix "D:\tools_program\nodejs\node_global"
npm config set cache "D:\tools_program\nodejs\node_cache"
这样下载的就不用在c盘的C:\Users\用户名\AppData\Roaming\npm路径中了。

2.环境变量，在path中添加：
D:\Program Files\nodejs\node_global
D:\Program Files\nodejs\node_modules

3.配置cnpm
经过测试，cnpm安装的组件可能存在问题，在此不建议使用cnpm！！！
由于网络原因，国内访问npm的速度很慢，可以通过设置国内淘宝镜像来访问npm。打开cmd，执行以下指令。
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v
cnpm config set prefix "D:\Program Files\nodejs\node_global"
cnpm config set cache "D:\Program Files\nodejs\node_cache"
#利用cnpm搭建express环境
cnpm install express -g

4.安装全局 vue-cli 脚手架，用于帮助搭建 vue 框架的模板项目
npm uninstall vue-cli -g
npm install -g @vue/cli
npm install -g @vue/cli-init
vue -V

5.使用webpack打包工具，启动vue项目
创建一个工作空间用于保存项目，比如D:\workspace\vs_workspace，通过 cd 指令进入该目录，输入下面指令，创建 hellovue 项目；
vue init webpack hellovue
#一路回车，除了vue-router选择yes，其余一律no(下面是开启了Eslint插件功能，如果不需要则在 eslint 选项选择no)。
#按照提示，执行后续cmd指令：
bash
cd hellovue
npm install
npm run lint -- --fix
npm run dev

6.npm run dev

7.另一个多版本安装：

#设置环境变量
NODE_HOME=c:\node
NODE_PATH=c:\node\node_modules
#在命令行运行命令，设置node的全局环境
npm config set prefix "c:\node"
npm config set cache "c:\node\node_cache"
npm config set registry https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org

运行问题

运行cnpm i -s报错如下。

问题：cnpm : 无法加载文件 C:\Program Files\nodejs\node_global\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1

解决：

1、关闭VSCode

2、右键 —— 以管理员身份运行

3、执行get-ExecutionPolicy，显示Restricted，表示状态禁止

4、执行set-ExecutionPolicy RemoteSigned

5、执行get-ExecutionPolicy，显示RemoteSigned，表示状态解禁，可运行

6、重新运行cnpm i -s

node多版本管理

nvm v / / 显示nvm版本

nvm ls / / 显示所有安装的node.js的版本

nvm list available / / 显示可以安装的所有node.js的版本

nvm install / / 安装指定版本号的node.js 如：nvm install 12.22.0

nvm install stable / / 安装最新稳定版本

nvm uninstall / / 卸载指定版本号的node.js 当安装失败时或需要卸载时使用

nvm use / / 切换到使用指定版本号的node.js 如： nvm use 12.22.0

nvm off / / 禁言node.js版本管理（不卸载任何东西）

nvm on / / 启用node.js版本管理
————————————————
版权声明：本文为CSDN博主「草字」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42740797/article/details/128006432

前端工程化工具--nodejs、npm使用技巧

Eric

Eric

与世无争的前端下饭coder

​关注

写在前面

  • nodejs ^[1]^ 是基于js开发的服务端编程语言，使用js编写程序，遵循大多数ECMAScript规范 ^[2]^ ，因此在前端工程化中具有天然优势
  • npm 是什么？nodejs的包管理器^[3]^
  • 前端工程化 ：模块化、组件化、规范化、自动化
  • 本文重点：node版本管理技巧和npm使用技巧
  • 写作时间 2020/9/29

技巧一 使用 nvm 动态理 nodejs 版本

  1. nodejs安装方法：
  • 方法一：直接安装：官网下载、安装（略）
  • 方法二：安装node版本管理工具nvm，使用nvm命令安装和切换node（推荐，本文着重介绍）
  1. 安装nvm：
  • 下载nvm ，github链接^[4]^
  • 安装 nvm，注意安装目录最好不要出现中文和空格

第一步 接受安装许可

第二步 选择安装目录

第三步 选择node版本存放目录

第四步 安装就完事儿了

第五步 配置环境变量

第六步 添加nvm和nvm安装的node到系统变量

第七步 验证nvm是否安装成功

nvm 的使用

  • 配置 nvm 从 taobao 源下载 node 和 npm（防止 npm 下载失败问题，网络好和有梯子的同学请跳过此步骤）：编辑 nvm 安装目录下的settings.txt文件
root: D:\usr\local\nvm
path: D:\usr\local\node
node_mirror: [https://**npm.taobao.org/mirrors/**node/](https://link.zhihu.com/?target=https%3A//npm.taobao.org/mirrors/node/)
npm_mirror: [https://**npm.taobao.org/mirrors/**npm/](https://link.zhihu.com/?target=https%3A//npm.taobao.org/mirrors/npm/)
  • **P.S. **root 和 path 分别为 nvm 安装目录和 nodejs 环境变量指定目录，后面切换 node 版本会做软链接到 path 目录
  • 查看是否安装成功，打开命令行，执行 nvm -h 或 nvm --help
  1. nvm 常用命令
  • 查看可安装的 node 版本：nvm list available
  • 查看已安装 node 版本：nvm list
  • 安装指定版本（例如：12.14.0 版本）：nvm install 12.14.0
  • 切换 node 版本：nvm use 12.14.0
  • 卸载不需要的 node 版本：nvm uninstall 12.14.0
  • 查看切换后的node和npm版本：node -v npm -v
  1. 常见问题
  • ERROR open \settings.txt: The system cannot find the file specified.
  1. 检查环境变量，在系统变量中添加NVM_HOME: nvm安装目录，NVM_SYMLINK: node映射目录，分别对应nvm安装目录下的setting.txt中的root和path
  2. 在path中添加：%NVM_HOME%和%NVM_SYMLINK%
  3. 重启dos或bash命令行，输入nvm list和node -v测试是否OK
  • ...

技巧二 使用 nrm 动态管理 npm 源

  1. nrm 是什么？
  • 动态切换npm源的一个工具
  • 问题场景：由于http://npm.org是国外站点，国内下载工程化项目依赖速度比较慢，所以国内一些大厂为我们提供了镜像服务，例如taobao：https://registry.npm.taobao.org
  • 使用taobao的npm源，npm config set registry https://registry.npm.taobao.org验证设置是否生效npm config get registry
  • 使用cnpm ：npm install -g cnpm --registry=https://registry.npm.taobao.org 安装依赖 cnpm install xxx
  • 以上方法设置后，有的包taobao源上没有或未及时同步，还得走npm源，这又得要重新设置一次，麻烦的很
  • nrm就是为了解决以上问题诞生的
  1. 安装nrm：npm install nrm -g
  2. nrm 常用命令
  • 查看命令：nrm -h或 nrm --help
  • 查看可用 npm 源：nrm ls
  • 切换 npm 源：nrm use taobao

技巧三 国内安装node-sass失败的解决方案

  1. 找到.npmrc文件（位置：C:\Users<当前用户名>），添加内容：sass_binary_site=https://npm.taobao.org/mirrors/node-sass
  2. 在bash命令行上使用vim修改：vi ~/.npmrc，追加 sass_binary_site=https://npm.taobao.org/mirrors/node-sass后使用:wq保存即可
  3. 其他第三方包添加方案原理同上
    • chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver
    • electron_mirror=https://npm.taobao.org/mirrors/electron
    • phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs

不分命令

npm config set prefix "D:\tools_program\nodejs-v18\node_global"
npm config set cache "D:\tools_program\nodejs-v18\node_cache"

cnpm install express -g

cnpm config set prefix "D:\tools_program\nodejs-v18\node_global"
cnpm config set cache "D:\tools_program\nodejs-v18\node_cache"

标题：学习vue的小账本
作者：三学一心
地址：http://bk.isseeker.com/articles/2019/05/14/1557825007585.html