vue环境搭建

1、 node

（1）下载并安装node，国内地址,这里我下载的是解压版node-v14.15.4-win-x64.zip，解压到自定义路径E:\installations\下，这里我把解压文件名node-v14.15.4-win-x64修改成了nodejs，所以安装路径是 E:\installations\nodejs。
（2) 配置环境变量，在系统变量在Path下添加E:\installations\nodejs，接下来可以打开cmd窗口测试node和npm。

C:\Users\ly> node -v      // 测试node
v14.15.4
C:\Users\ly> npm -v      // 测试npm
6.14.10

注意: msi版本会在用户变量path末尾添加C:\Users\用户名\AppData\Roaming\npm,以及在系统变量path末尾添加安装路径E:\installations\nodejs，所以不需要配置。

2、配置npm包路径

E:\installations\nodejs路径下新建node_cache和node_global文件夹，打开cmd窗口，配置包路径。

C:\Users\ly>npm config set cache  "E:\installations\nodejs\node_cache"
C:\Users\ly>npm config set prefix  "E:\installations\nodejs\node_global"

注意：如果是msi版本安装，在执行npm install -g XXXX全局下载包时，这个包的默认存放路径位C:\Users\用户\AppData\Roaming\npm\node_modules下，占C盘空间，通常我们都会自定义npm全局安装模块所在的路径以及缓存cache的路径,修改方法也是执行上面两条命令即可。

# npm仓库在国外，速度比较慢，可使用官方推荐的 cnpm 命令行工具代替默认的 npm。
C:\Users\ly>npm install -g cnpm --registry=https://registry.npm.taobao.org

此时我们可以在E:\installations\nodejs\node_global下看到cnpm的指令文件，cnpm包放在node_modules路径下。

image.png

测试安装是否成功，'cnpm' 不是内部或外部命令。

C:\Users\ly> cnpm -v 
'cnpm' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

这是由于环境变量未配置路径，默认是在安装路径下E:\installations\nodejs找cnpm指令，并在E:\installations\nodejs\node_modules下寻找cnpm包，只要在系统环境变量path末尾配置E:\installations\nodejs\node_global即可。

C:\Users\ly>cnpm -v
[email protected] (E:\installations\nodejs\node_global\node_modules\cnpm\lib\parse_argv.js)
[email protected] (E:\installations\nodejs\node_global\node_modules\cnpm\node_modules\npm\lib\npm.js)
[email protected] (E:\installations\nodejs\node.exe)
[email protected] (E:\installations\nodejs\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=E:\installations\nodejs\node_global
win32 x64 10.0.19041
registry=https://r.npm.taobao.org

注意: msi版本将用户变量C:\Users\用户名\AppData\Roaming\npm修改E:\installations\nodejs\node_global即可。

3. vue/cli

C:\Users\ly>cnpm install @vue/cli -g
# 测试
C:\Users\ly>vue -V
@vue/cli 4.5.11

接下来就在cmd窗口使用命令 vue create hello 就可以创建一个项目名为hello的vue项目，当然也可以使用vue ui，利用图形化界面创建项目。