win10 搭建 npm 环境

前言

最近，根据CSDN和博客园等文章的帮助下，搭建了一个npm的环境，现在将搭建过程记录下来，留作参考。

搭建过程

1. 下载nodejs，我是使用的zip包安装的，安装包官网地址https://nodejs.org/dist/v16.13.1/node-v16.13.1-win-x64.zip

2. 我把下载的 node-v16.13.1-win-x64.zip 解压到了D盘的nodejs文件夹下，目录D:/nodejs/node-v16.13.1-win-x64/

3. 在步骤 2 中的**D:\nodejs\node-v16.13.1-win-x64**目录下，新建 node_cache 和 node_global 两个文件夹

4. 配置环境变量，在用户环境变量 Path 中添加
   
   D:\nodejs\node-v16.13.1-win-x64\node_global
   
   D:\nodejs\node-v16.13.1-win-x64
   
   D:\nodejs\node-v16.13.1-win-x64\node_modules
   
   Home + R 输入 cmd 打开系统命令行，输入 node -v 回车 返回 node 的版本号 v16.13.1 , 输入 npm -v 返回 npm 版本号 8.1.2 证明环境变量配置成功

5. 修改pip源(可解决pip安装第三方包慢的问题，vue初始化项目慢也是由于安装第三方包导致的)
   
   在c盘的用户目录(C:\Users\你的用户名)下，新建pip文件夹，在pip文件夹下新建pip.ini
   
   在pip文件夹中，添加如下内容

[global]
index-url = http://mirrors.aliyun.com/pypi/simple/
[install]
trusted-host = mirrors.aliyun.com

如此一来，就可以解决vue初始化项目慢的问题，同时在开发中安装第三方包，也可直接通过pip快速安装。

1. 配置npm安装目录
   
   打开命令行，运行：
   
   npm config set prefix “D:\nodejs\node-v16.13.1-win-x64\node_global”
   
   npm config set cache “D:\nodejs\node-v16.13.1-win-x64\node_cache”

2. 安装个module测试npm是否配置成功
   
   命令行：
   
   npm install express –g
   
   运行完毕后，会在D:\nodejs\node-v16.13.1-win-x64\node_global\node_modules\目录下生成一个express文件夹存放express模块
   
   我运行完毕上面的指令后，命令行提示现有的npm版本低，建议升级：npm install -g npm@8.3.0，直接执行命令即可

3. 安装淘宝镜像，配置cnmp
   
   npm install -g cnpm --registry=https://registry.npm.taobao.org
   
   cnpm -v 检查是否安装成功
   
   npm config set registry https://registry.npm.taobao.org 更换nmp镜像为淘宝源(解决vue init慢的问题)

4. 安装 webpack
   
   cnpm install webpack –g

5. 安装vue-cli
   
   cnpm install vue-cli –g

6. 测试环境
   
   新建一个文件夹 D:\vueTst\tst
   
   在目录路径下运行：
   
   vue init webpack test2
   
   使用vscode打开，在vscode中新建终端，运行 cnpm install
   
   如果提示：cnpm : 无法加载文件 D:\nodejs\node-v16.13.1-win-x64\node_global\cnpm.ps1，因为在此系统上禁止运行脚本
   
   需要以管理员身份打开powershell,输入set-ExecutionPolicy RemoteSigned，选择y即可。
   
   npm run dev，打开浏览器，输入http://localhost:8080，出现vue欢迎页面，证明vue环境配置成功

7. 安装vue
   
   cnpm install vue
   
   测试 vue -V 查看vue版本

8. 安装vue的脚手架工具
   
   cnpm install -g @vue/cli
   
   vue是框架名称，vue也是vue-cli在终端里面的命令。
   
   vue-cli是vue框架开发的快速工程化命令工具。
   
   @vue/cli是vue-cli的最新的npmjs的包的名称。

运行：

cnpm install

cnpm run dev或npm run dev

打正式包：

npm run build:prod

PS:

运行 npm -v 提示：

“npm WARN config global --global, --local are deprecated. Use --location=global instead.”

在D:\nodejs\node-v16.13.1-win-x64\npm.cmd 中

复制 npm.cmd 为 npm.cmd-org 做备份

修改 nmp.cmd 中的 prefix-g 为 prefix --location=global

保存，再次运行 npm -v，就没有这个告警了

参考博客

[1]. Node.js+VScode安装+Vue全家桶环境搭建+Win10(主要参考)

[2]. Node.js安装及环境配置之Windows篇

[3]. 搭建vue开发环境，解决vue init慢的问题

[4]. cnpm : 无法加载文件 C:\software\nodejs\node_global\cnpm.ps1，因为在此系统上禁止运行脚本

[5]. npm报错：npm WARN config global --global, --local are deprecated. Use --location=global instead.