Vue脚手架安装过程

1. 安装node.js14.16.0版本

  可以选择官网下载，一步一步点到底

  在命令行中查看npm以及node的版本号 

C:\Users\26404>npm -v
6.11.3

C:\Users\26404>node -v
v14.16.0

 2. 修改全局包安装路径

因为这个方法是后来编辑补充的，所以本文后面下载的包位置还是C盘。但是做了这一步之后，下面安装文件的路径可以自动下载到其他盘（以D盘为例）。

命令都不变，只是默认包下载的位置变了，不想做这一步也可以。

首先需要在modejs文件夹下创建两个文件夹

设置包的安装位置

npm config set prefix "D:\nodejs\npm_global"
npm config set cache "D:\nodejs\npm_cache"

查看是否配置成功

npm config ls 

 配置成功的显示

 之后包的默认安装目录会是 D:\nodejs\npm_global\node_modules

3. 输入命令安装cnpm

C:\Users\26404>npm install -g cnpm --registry=https://registry.npm.taobao.org

  查看cnpm的版本号

C:\Users\26404>cnpm -v

 安装成功的界面，可以看到cnpm的版本号

C:\Users\26404>cnpm -v
cnpm@7.1.0 (C:\Users\26404\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.18 (C:\Users\26404\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@14.16.0 (D:\Webstorm 2020.1\node-v14.16.0\node.exe)
npminstall@5.8.1 (C:\Users\26404\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\26404\AppData\Roaming\npm
win32 x64 10.0.22621
registry=https://registry.npmmirror.com

4. 安装vue-cli

从这一步到下面我都没报错，应该是一路顺风顺水了

C:\Users\26404>cnpm install -g @vue/cli
C:\Users\26404>cnpm install -g @vue/cli-init

 查看vue的版本

C:\Users\26404>vue -V
@vue/cli 5.0.8

4. 安装webpack

C:\Users\26404>cnpm install -g webpack

接下来就可以创建项目了，棒！ 

* 安装过程中出现的错误总结

1. npm does not support Node.js v14.16.0

这是因为npm和node的版本不匹配导致，可以在此node.js版本对照网站上查找npm和node版本对应关系以往的版本 | Node.js (nodejs.org)

解决方法：升级npm到指定版本号

C:\Users\26404>npm -g install npm@6.14.4

清空npm的缓存

C:\Users\26404>npm cache clean --force

再查看一下版本

C:\Users\26404>npm -v
6.14.4

C:\Users\26404>node -v
v14.16.0

这时再尝试输入第3步的代码安装cnpm

2. Error: Cannot find module 'node:util'

问题原因是node版本和cnpm的版本不对应

解决方法：安装指定版本的cnpm

如果之前安装了其他版本的cnpm可以先卸载

C:\Users\26404>npm uninstall cnpm

再安装指定版本的cnpm

C:\Users\26404>npm install cnpm@7.1.0 -g --registry=https://registry.npm.taobao.org

3. 安装之后发现没有“cnpm”命令

需要配置系统环境变量，设置包含 “cnpm.cmd”文件夹为Path环境变量，如下

目标文件夹路径：

配置环境变量的路径：