目录
强调一点:这些命令复制进cmd窗口可能不被识别,但是命令本身没有错,建议照着手动敲入
目录
webpack基于node.js运行,首先需要安装node.js
下载对应你系统的Node.js版本:点击下载,推荐下载LTS版本
选安装目录进行安装,安装完成检查PATH环境变量是否设置了node.js的路径。
测试:在命令提示符下输入命令
node -v
,会显示当前node的版本
2 .安装NPM
- node.js已经集成了npm工具,在命令提示符输入可查看当前npm版本
npm -v
- 设置包路径:包路径就是npm从远程下载的js包所存放的路径。使用 npm config ls 查询NPM管理包路径(NPM下载的依赖包所存放的路径)
- 为了方便对依赖包管理,我们将管理包的路径设置在单独的地方,本教程将安装目录设置在node.js的目录下,创建npm_modules和npm_cache,执行下边的命令:
npm config set prefix "nodejs安装路径\npm_modules" npm config set cache "nodejs安装路径\npm_cache" 例如: npm config set prefix "D:\soft\cstsoft\installplace\nodejs\npm_modules" npm config set cache "D:\soft\cstsoft\installplace\nodejs\npm_cache"
此时再使用 npm config ls 查询NPM管理包路径发现路径已更改
-
在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”, 值为“D:\soft\cst\nodejs\node_modules”
3.安装webpack
全局安装:
npm install webpack -g
webpack 已安装成功,执行
npm webpack -v
可以看到所安装webpack的版本号
4.安装vue
npm install -g vue
查看 vue 版本的指令:
npm list vue
或者
npm list vue -g
vue安装后使用npm list vue 显示empty的一种解决方法
①使用 npm list vue -g 看看是否还是为空,如果出现版本号,则不用管,安装vue成功
②如果使用 npm list vue -g 还是为空,
先安装cnpm
npm install cnpm -g
安装完以后配置环境变量,在系统变量path下添加该路径即可正常使用cnpm,我的路径是“D:\soft\cst\nodejs\npm_modules”
插曲:下载cnpm报错
----------------------------------------------------------插曲开始-----------------------------------------------------------
问题如下
operation not permitted
The operation was rejected by your operating system
It’s possible that the file was already in use (by a text editor or antivirus),
or that you lack permissions to access it.
上面的报错信息提示权限不足,这个问题表现是只有cnpm安装报错,其他的包都正常安装
问题原因:node的版本太低,装不上高版本的cnpm,指定对应的cnpm版本就可以安装了
npm install -g cnpm@7.1.0 --registry=http://registry.npmmirror.com
我的npm版本是6.14.16,node版本是14.19.0 。
安装7.1.0的cnpm可以正常安装了
高版本的node不能兼容低版本的node_sass
低版本的node又不能下载高版本的cnpm
----------------------------------------------------------插曲结束-----------------------------------------------------------
然后使用cnpm安装vue
cnpm install vue
最后查看安装的vue版本
cnpm list vue
5.安装vue-cli
npm install -g @vue/cli
查看vue-cli是否安装成功
vue -V
注意 V是大写的
或者
vue --version
这里如果遇到:‘vue‘ 不是内部或外部命令,也不是可运行的程序或批处理文件
把vue的路径配置到环境变量【path】中,我的路径是:D:\soft\cst\nodejs\npm_modules
如果还是报这个错,重启一下电脑应该就生效了。
扩展说明:
1.bug
解决办法:
首先代理置为空
npm config set proxy null
清理缓存
npm cache clean --force
原npm地址(二选一)
npm config set registry http://registry.npmjs.org/
国内淘宝镜像
npm config set registry https://registry.npm.taobao.org
2.完全卸载webpack:
在全局下删除 npm uninstall webpack -g
最好将项目目录下的node-modules一起删除,否则会有残留文件影响下一次的结果,找不到就先执行命令,然后卸载nodejs,并且把nodejs整个安装目录删掉吧
3.删除npm之前设置的npm config set prefix...
方法是删除(或者修改)C:\Users\Lenovo\.npmrc这个文件和删除C:\Users\Lenovo\.nrmrc。如果不在这个目录下,就全局搜一下
也有的电脑在C:\Users\Administrator\
.npmrc内容如图所示: