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环境变量,如下
目标文件夹路径:
配置环境变量的路径: