Vue环境配置（webstrom2020.2.3）

Vue环境配置（webstrom2020.2.3）

1.安装下载node.js
官网：https://nodejs.org/zh-cn/
本教程使用的是14.15.1的稳定版本

下载后点击进行安装，这里我设置的路径是D盘，建议大家不要安装在默认地址：

这里我没有勾选：

安装完成：

在cmd（管理员身份打开）输入node -v能够看到对应版本号即为安装成功

2.在node.js安装路径下新建node_global和node_cache文件夹

打开cmd（最好是系统管理员）,然后分两次输入以下语句来设置缓存文件和全局模块存放路径（路径要和自己对应的node.js的下载路径对应）：

npm config set cache "D:\software\node.js\node_cache"
npm config set prefix "D:\software\node.js\node_global"

输入npm root -g出现下图则配置成功：

3.设置环境变量（如果有问题，一定要仔仔细细看看环境变量的配置，很多问题都出在环境变量的配置中）

在系统变量path新增路径：

新增系统变量NODE_PATH：

将用户变量中的npm路径替换成node.js的node_global地址：


4.基于node安装cnpm(下载速度比npm快)：

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

下面是下载完成的界面

注意：如果使用上述命令出现错误，那么
先执行：

npm config set registry "http://registry.npmjs.org/"

再执行：

npm install -g cnpm

然后关掉cmd，重新打开一个cmd（没有出现错误也要重启）
我这里及下面的操作没有用管理员打开cmd，但是建议下面的操作都使用管理员打开
输入cnpm -v，出现下图则安装成功

然后再将NODE_PATH的地址改成D:\software\Node.js\node_global\node_modules

5.下载安装vue-cli
输入cnpm install vue-cli -g

输入：vue -V出现其版本号即为安装成功

6.下载安装webpack和webpack-cli
输入cnpm install webpack -g下载

下载完成后如果输入webpack -v会要求继续下载webpack -cli（现在下载的webpack版本4.0以上就会要求安装cli）:

我们不通过这个方式下载，因此选择no（这里打成了np）
然后输入cnpm install webpack-cli -g

下载完成后输入webpack -v出现下图就安装成功啦

7.用webstorm创建vue项目

Create后等待项目生成

然后在Terminal输入npm run serve


点击网址出现以下界面即为成功：

如果上述点击创建项目的时候项目生成后为空，输入npm run serve后报错，那么只需要在terminal用指令创建项目即可（据说这是webstorm2020没有template的缘故）
即输入vue init webpack,然后按照指令输入对应的内容（比如项目名称，描述，作者等等）