Windows安装vue环境

417 阅读2分钟

一、安装node.js

1.安装Node.js,直接下载最新的

2.在cmd命令行中验证,使用node -v,npm -v

二、Node.js环境变量配置

1.首先在node.js的安装目录新建两个文件夹node_global和node_cache

2.创建完两个文件夹后,在cmd窗口中输入以下命令(两个路径即是两个文件夹的路径):

npm config set prefix "D:\service\nodejs\node_global" npm config set cache "D:\service\nodejs\node_cache"

3.接下来设置电脑环境变量,右键“我的电脑”=》属性=》高级系统设置=》环境变量 进入以下环境变量对话框

~sf8}1va.png

4.在【系统变量】新建环境变量 NODE_PATH,值

D:\service\nodejs\node_global\node_modules,其中D:\service\nodejs\node_global是

上述创建的全局模块安装路径文件夹

5.修改【用户变量】中的path变量,将\AppData\Roaming\npm修改为

D:\service\nodejs\node_global

6.点击确定后,配置完成。

三、安装淘宝镜像

1.首先用如下命令对镜像服务器地址进行永久设置

npm config set registry https://registry.npmmirror.com

2.验证是否成功

npm config get registry

3.再使用命令安装淘宝镜像

npm install -g cnpm --registry=https://registry.npmmirror.com

npm install -g cnpm@6.14.10(设置npm版本)

4.验证命令:cnpm -v

5.补充:cnpm 如何版本降级

npm install -g cnpm@6.1.0

@6.1.0是版本!是版本!是版本!

注意:安转完成之后记得关闭cmd操作框,重新打开验证

四、安装webpack

使用cnpm 安装

1.利用cnpm安装webpack 命令行语句为cnpm install webpack -g 

2.利用cnpm安装webpack-cli 命令行语句为cnpm install webpack-cli -g

使用npm 安装

1.利用npm安装webpack 命令行语句为npm install webpack -g 

2.利用npm安装webpack-cli 命令行语句为npm install webpack-cli -g

验证命令webpack -v

五、安装vue

cnpm install vue

或者

npm install vue

六、全局安装vue-cli

1.安装语句为:

cnpm install --global vue-cli

或者

npm install --global vue-cli

2.验证命令:vue -V (V要大写) 

注意:

1.如果需要安装3.x版本,将vue-cli改为@vue/cli即可

安装之前先卸载旧版本 npm uninstall -g @vue/cli
安装3.0及其以后版本 npm install -g @vue/cli@x.x.x
安装3.0以前的旧版本 npm install -g vue-cli@2.x

2.安装webpack-dev-server要和vue版本一致,webpack-dev-server版本和vue版本不一样,需要将webpack-dev-server卸载了,安装对应版本

解决方法:

1 查看vue-cli版本是 vue -V

2 卸载cnpm uninstall webpack-dev-server

3 安装cnpm i webpack-dev-server@2.9.6

4 安装cnpm install webpack cli -D

5 正常启动。