作者:胖蚂蚁 | 来源:互联网 | 2023-10-12 12:41
本人工作时主要负责后端,最近一段时间开始接触前端的一些工作,搭建成功后,用此博文来记录一下。
1 下载Nodejs
Nodejs所有版本的下载链接
注:本人推荐采用zip的方式搭建。
选择下载版本
![](https://img2.php1.cn/3cdc5/3984/9f3/351fcba4a70c3a60.png)
选择平台
![](https://img2.php1.cn/3cdc5/3984/9f3/5c2b73a34bfea970.png)
2 文件解压
我将zip文件下载到了E:\Develop,并且解压到当前文件夹,之后便生成文件E:\Develop\node-v6.14.4-win-x64,并在node-v6.14.4-win-x64文件夹中创建两个新文件夹node_cache和node_global。
node_cache:npm全局缓存路径
node_global: npm全局安装路径
注:下图的文件夹"nodejsX"是我新建用于nvm的,这里不对nvm做相关介绍。
![](https://img2.php1.cn/3cdc5/3984/9f3/fd3e948c428e36d7.png)
3 环境变量配置
3.1 系统变量配置
新建变量:NODE_PATH
值:E:\Develop\node-v6.14.4-win-x64\node_global\node_modules
注:有一点需要注意的是,此时文件夹node_global下其实并没有文件夹node_modules,不过在之后下载时会自动生成。
![](https://img2.php1.cn/3cdc5/3984/9f3/a2870af6edfedaa9.png)
编辑Path
追加值:E:\Develop\node-v6.14.4-win-x64\node_global
![](https://img2.php1.cn/3cdc5/3984/9f3/4cfd679cde928fc2.png)
3.2 用户变量
新建变量:NODE_PATH
值:E:\Develop\node-v6.14.4-win-x64\node_global\node_modules
![](https://img2.php1.cn/3cdc5/3984/9f3/f28de8be76248794.png)
编辑Path
追加值:%NODE_PATH%和%NODE_PATH%\node_global
注:二者以";"分割
![](https://img2.php1.cn/3cdc5/3984/9f3/060be3a925c9a838.png)
4 npm全局安装和下载配置
全局安装设置:
管理员运行cmd,然后输入:
npm config set cache "E:\Develop\node-v6.14.4-win-x64\node_cache"
npm config set prefix "E:\Develop\node-v6.14.4-win-x64\node_global"
淘宝源:
npm config set registry http://registry.npm.taobao.org/
安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
这一步时间教程,如果你得到这样的一个运行结果,说明你安装成功了:
cnpm下载成功图 恢复默认设置:
npm config set registry https://registry.npmjs.org/
5 验证是否安装成功
5.1 版本验证 node -v 和 npm -v:
![](https://img2.php1.cn/3cdc5/3984/9f3/03cea89f5d48e3fe.png)
5.2 查看淘宝源:
![](https://img2.php1.cn/3cdc5/3984/9f3/fe0f4b6d66f6058f.png)
5.3 全局安装webpack(@后面可以指定版本号):
cnpm install webpack@3.10.0 -g
注:cmd下载过程中有警告不要紧,但要保证所有的下载条目,都是绿色的installed
接着会在"E:\Develop\node-v6.14.4-win-x64\node_global"下生成webpack文件:
![](https://img2.php1.cn/3cdc5/3984/9f3/8c08c87792a8bfd6.png)
6 参考链接
https://www.jianshu.com/p/b0f97e20283f?from=singlemessage