webpack安装教程

目录

强调一点：这些命令复制进cmd窗口可能不被识别，但是命令本身没有错，建议照着手动敲入

目录

目录

2 .安装NPM

3.安装webpack

4.安装vue

 5.安装vue-cli

---

webpack基于node.js运行，首先需要安装node.js

下载对应你系统的Node.js版本:点击下载，推荐下载LTS版本

选安装目录进行安装，安装完成检查PATH环境变量是否设置了node.js的路径。

测试：在命令提示符下输入命令

node -v

,会显示当前node的版本

2 .安装NPM

1. node.js已经集成了npm工具，在命令提示符输入可查看当前npm版本 

   npm -v

        
2. 设置包路径：包路径就是npm从远程下载的js包所存放的路径。使用 npm config ls 查询NPM管理包路径（NPM下载的依赖包所存放的路径）
3. 为了方便对依赖包管理，我们将管理包的路径设置在单独的地方，本教程将安装目录设置在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管理包路径发现路径已更改

4. 在环境变量 -> 系统变量中新建一个变量名为 “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内容如图所示：