一、相关概念
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包
vue-cli: 用户生成Vue工程模板(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)
二、Node.js的安装和配置环境变量
1、下载Node.js(这里我以node-v14.15.5下载为例)
注意:
建议下载v12.16.0版本以上的,因为版本低无法创建Vue的脚手架
文件选择:
Mac选择pkg版本下载,windows选择msi格式的下载
下载方式1:
![](https://img-blog.csdnimg.cn/img_convert/5a85be45a91f3f27b48d4efaaa5d8d96.png)
下载方式2:
从这个https://nodejs.org/download/release/网站下载,选择自己想要的版本
![](https://img-blog.csdnimg.cn/img_convert/dc4e600d270b4fd83c010a5ee68e320c.png)
2、安装Node.js
1、双击下载好的安装文件
![](https://img-blog.csdnimg.cn/img_convert/cd08a7964cf2ed9e8cb7157149d0007b.png)
2、进入Node.js安装步骤,点击“Next”继续
![](https://img-blog.csdnimg.cn/img_convert/dd875fd05197b99dd394a3be1039747d.png)
3、选择I accept the terms in the License Agreement,点击“Next”继续
![](https://img-blog.csdnimg.cn/img_convert/0ce3ec7db2648246ec9f38b99fa5542b.png)
4、选择安装路径,安装路径尽量不要存在中文(建议不要安装在C盘),点击“Next”继续
![](https://img-blog.csdnimg.cn/img_convert/5090d983bb241a2245c566c90b1f24da.png)
5、Add to PATH:默认会添加到path环境变量中,点击“Next”继续
![](https://img-blog.csdnimg.cn/img_convert/e03254660991f4ca5602b0d103334c42.png)
6、点击“Finsh”完成
![](https://img-blog.csdnimg.cn/img_convert/0e9ab13b0f66d7f84075cb3478a30fe2.png)
7、安装后里面的文件如图
![](https://img-blog.csdnimg.cn/img_convert/21b3202c3ce9d4d2347ac814b796698d.png)
三、安装后判断是否安装成功以及环境变量配置
1、输入命令查看版本,判断是否安装成功
mac首次安装都无需配置环境变量
命令的话都一样的,Windows也是这样用
使用window+ R快捷键,启动cmd命令行验证node.js是否安装成功
一般新的node安装自带npm包管理器,集成在node中
![](https://img-blog.csdnimg.cn/img_convert/02e143388c99fca4222df33d396b31e4.png)
出现以上情况,即表示安装成功
2、设置电脑环境变量
环境变量界面打开顺序:右键 “我的电脑”=》属性=》高级系统设置=》环境变量,具体实行过程,请看下图:
![](https://img-blog.csdnimg.cn/img_convert/20735e0805fdf60f6d38bc2d477cee23.png)
3、在系统变量中新建环境变量NODE_PATH
在系统变量中新建环境变量NODE_PATH值为 D:\Program Files\nodejs\node_global\node_modules其中 D:\Program Files\nodejs\node_global是新创建的全局模块安装路径
![](https://img-blog.csdnimg.cn/img_convert/d342b080e31161aadd134bf7a99b4eba.png)
4、修改【用户变量】
修改【用户变量】中的 path 变量,将C:\Users\Lenovo\AppData\Roaming\npm 修改为D:\ProgramFiles\nodejs\node_global
![](https://img-blog.csdnimg.cn/img_convert/82f8634245370ddf5f9c48325a2166f2.png)
四、自定义配置全局模块和缓存路径
在上面已经完成了 node.js 的安装,即使不进行此步骤的环境变量配置也不影响node.js的使用
但是,若不进行环境变量配置,那么在使用命令安装 node.js全局模块(如:npm install -g vue)时,会默认安装到C盘的路径(C:\Users\hua\AppData\Roaming\npm)中
因此,需要配置全局安装模块 node_global 以及 缓存目录 node_cache 的环境变量
1、在node.js的安装目录中,新建两个文件夹 node_global 和 node_cache,分别用来存放安装的全局模块和全局缓存信息
![](https://img-blog.csdnimg.cn/img_convert/5f08046f45dc4971cf6c635d82db06a0.png)
2、设置全局模块安装路径和全局缓存存放路径
创建完两个文件夹后,在cmd窗口中输入以下命令(两个路径即是两个文件夹的路径):
# 设置全局模块安装路径
npm config set prefix" D:\Program Files\nodejs\node_global "
# 设置全局缓存存放路径
npm config set cache" D:\Program Files\nodejs\node_cache "
命令执行,效果如图:
![](https://img-blog.csdnimg.cn/img_convert/da857511981d8e4bf656b4397d25756f.png)
3、在cmd 命令行中,通过命令配置淘宝镜像
npm config set registry=http://registry.npm.taobao.org
![](https://img-blog.csdnimg.cn/img_convert/282eed4a847c3efa799c3ddb67fac355.png)
输入npm config list查看npm的配置
![](https://img-blog.csdnimg.cn/img_convert/b69f495603777496aeebd56e663fde17.png)
检测一下淘宝镜像站:npm configget registry
![](https://img-blog.csdnimg.cn/img_convert/cf86009c5ced9f04643374748f41937c.png)
4、测试安装express模块
如果以上的步骤你都没有问题,这个时候就可以使用npm install安装命令来安装模块了,以express为例:
npm install express -g # -g是全局安装的意思
如下图所示,则说明安装成功,并且你会在node_global目录下的node_module文件夹中看到安装好的express的文件夹
![](https://img-blog.csdnimg.cn/img_convert/d0e31c25e6b0ec7843944fdfa82b401f.png)
5、安装cnpm输入以下命令
npm install -g cnpm--registry=https://registry.npm.taobao.org
npm install -g cnpm --registry=http://registry.npm.taobao.org
因为cnpm会被安装到D:\Program Files\nodejs\node_global下,而系统变量path并未包含该路径。此时使用cnpm的命令会提示我们:
"cnpm" 不是内部或外部命令,也不是可运行的程序或批处理文件
我们在系统变量path下添加该路径即可正常使用cnpm:
![](https://img-blog.csdnimg.cn/img_convert/252d8433e8c6c82ed090dd1f7b718013.png)
![](https://img-blog.csdnimg.cn/img_convert/cb07f62a0fa8839482ccf0495269629f.png)
再来输入一次cnpm -v命令,检查
![](https://img-blog.csdnimg.cn/img_convert/f08570cd37420cf5d0409d3b95bb736b.png)
cnpm一键安装package.json里的 dependencies 和devDependencies里的所有模块
cnpm install 默认安装package.json中的所有模块
如果只想安装dependencies中的内容,可以使用--dependencies字段:
cnpm install--dependencies
同样只想安装devDependencies中的内容,可以使用--devDependencies字段:
cnpm install--devDependencies
这里安装的package.json中所有依赖的模块,都是package.json中指定的版本。如果需要安装最新的版本则要:
cnpm update<package_name>//要安装的模块的名字
6、配置yarn
# 下载并全局安装yarn
npm install -g yarn
![](https://img-blog.csdnimg.cn/img_convert/f03733241fdb1cbc74dd970b51b67acc.png)
查看当前源
yarn config getregistry
![](https://img-blog.csdnimg.cn/img_convert/9f0aacb8ab05cbe463a83c7a1276a981.png)
# 配置yarn的淘宝源
yarn config set registry=https://registry.npm.taobao.org-g
yarn config setregistry https://registry.npm.taobao.org -g
yarn config setsass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
![](https://img-blog.csdnimg.cn/img_convert/c3e9177d2286d8e2459514c63e76a74e.png)
![](https://img-blog.csdnimg.cn/img_convert/8242421e4c9d0c081d25b25b0e85b27b.png)
# yarn安装项目依赖
yarn install
![](https://img-blog.csdnimg.cn/img_convert/bda9fa7d2ce7dd6394df7c40cae215b9.png)
7、其他一些命令
安装npm包–rimraf : npm install rimraf -g
执行命令删除依赖 : 1rimraf node_modules
清理npm缓存命令 : npm cache clear --force 或-f
npm安装vue-cli : cnpm install -gvue-cli (命令中 -g 表示全局安装)
更新npm包 : npminstall npm -g,再来查看npm的版本 npm -v,可以对比之前的版本