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快速安裝。

6. 配置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”

7. 安裝個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，直接執行命令即可

8. 安裝淘寶鏡像，配置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慢的問題)

9. 安裝 webpack
   cnpm install webpack –g

10. 安裝vue-cli
    cnpm install vue-cli –g

11. 測試環境
    新建一個文件夾 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環境配置成功

12. 安裝vue
    cnpm install vue
    測試 vue -V 查看vue版本

13. 安裝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.