Vue安装及环境配置

一、安装node.js

官网：Download | Node.js

历史版本：Previous Releases | Node.js

或者

下载完毕后，可以安装node，建议不要安装在系统盘（如C：）。

二、设置nodejs prefix（全局）和cache（缓存）路径

1、建议安装的路径不要有中文

2、新建node_global和node_cache两个文件夹

可以在nodejs安装路径下，新建

3、设置缓存文件夹

npm config set cache "E:
ode
ode_cache"

4、设置全局模块存放路径

npm config set prefix "E:
ode
ode_global"

设置成功后，之后用命令npm install XXX -g安装以后模块就在E: ode ode_global里

还可以输入npm list -global命令来查看全局安装目录：

**三、**node.js环境配置

“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”，进入环境变量对话框

1、【系统变量】下新建【NODE_PATH】，输入的内容根据实际来【D: ode ode_global ode_modules 】

2、【系统变量】下的【Path】添加上node的路径【D: ode_global】

**四、**配置淘宝镜像源

基于 Node.js 安装cnpm（淘宝镜像）

将npm的模块下载仓库从默认的国外站点改为国内的站点，这样下载模块的速度才能比较快，现在用的都是淘宝镜像源（https://registry.npm.taobao.org），使用淘宝镜像源有两种方式：

安装cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

验证方式变成了cnpm config get registry或cnpm config list如图所示

直接修改npm的默认配置：

npm config set registry https://registry.npm.taobao.org 

配置后可以根据npm config get registry或npm config list命令查看npm下载源是否配置成功

第二种临时使用：

npm --registry https://registry.npm.taobao.org install cluster

这个代码就是只在安装cluster的使用淘宝镜像下载，每次安装一个模块都用挺长的代码，比较繁琐，所以推荐第一种方式。

五、安装Vue及脚手架

安装vue.js

cnpm install vue -g

或者

npm install vue -g

查看安装的vue信息：npm info vue或者cnpm info vue

查看安装的vue版本npm list vue

安装脚手架vue-cli

cnpm install -g @vue/cli

输入vue ui进入界面 （vue ui打开其网址）

其他补充

安装webpack模板

在命令行中运行命令 npm install webpack -g ，然后等待安装完成。

webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，
所以还需要安装webpack-cli：npm install --global webpack-cli，
安装成功后可使用webpack -v查看版本号。

顺手安装上vue-router

npm install -g vue-router