提示：從Node版本降級到Vue項目運行

---

下載Node.js

Node是 JavaScript 的運行時環境。同比tomcat，Node 為 JS 提供了更強大的操作方式

npm 是 node 提供的一個包管理工具，類似于 maven。通過 npm 去安裝依賴包，就不需要在頁面上使用 script 標簽引入了。 前端也有依賴

我是一開始下載的 node

進官網下載安裝包https://nodejs.cn/download/

下載好后雙擊即可安裝，選擇安裝路徑后可以一直傻瓜式點擊下一步

環境配置

找到安裝目錄，在安裝目錄下新建兩個文件夾node_global、node_cache

創建完畢后，使用管理員身份打開 cmd 命令窗口

輸入：
npm config set prefix “本地node_global文件夾路徑”（復制剛剛創建的node_global文件夾路徑）

npm config set prefix "D:\node18\node_global"

npm config set cache “本地node_cache文件夾路徑”（復制剛剛創建的node_cache文件夾路徑）

npm config set prefix "D:\node18\node_cache"

配置環境變量

右鍵【此電腦】→【屬性】→【高級系統設置】→【環境變量】

在【系統變量】中點擊【新建】

變量名：NODE_PATH
變量值：node_modules 路徑

在【系統變量】中選擇【Path】點擊【編輯】添加%NODE_PATH%和node_global文件路徑，隨后一直點擊【確定】

在cmd中輸入：
node -v：顯示 node.js 版本
npm -v：顯示 npm 版本

成功顯示版本說明安裝成功

安裝 cnpm（我需要安裝）

cnpm比npm速度更快

npm install -g cnpm --registry=https://registry.npmmirror.com

cnpm -v：查看是否安裝成功

安裝腳手架

vue腳手架指的是 vue-cli，它是一個專門為單頁面應用快速搭建繁雜的腳手架，它可以輕松創建新的應用程序而且可用于自動生成 vue 和 webpack,的項目模板。

第一種（舊版）：國內鏡像

cnpm install vue-cli -g

如果已安裝 cnpm，也可以通過以下命令安裝新版 CLI：

cnpm install -g @vue/cli

vue -V查看vue-cli腳手架是否安裝成功，出現版本號就安裝成功了

第二種（新版推薦）：需手動配置鏡像提速

可先配置淘寶鏡像加速：

npm config set registry https://registry.npmmirror.com

然后再執行安裝命令。

npm install -g @vue/cli

安裝依賴

npm install

或者

cnpm install

安裝淘寶鏡像（注意會更新）

由于國內直接使用 npm 的鏡像是國外的，非常緩慢，建議切換成淘寶鏡像。

https://www.npmmirror.com/

npm config set registry https://registry.npmmirror.com

查看是否成功

npm config get registry

cnpm vs npm 與新舊版本核心差異

cnpm install vue-cli -g 和 npm install -g @vue/cli 的主要區別在于 包的名稱和版本，以及使用的包管理器。以下是詳細對比：

包管理器不同

• cnpm
  是淘寶鏡像提供的 npm 客戶端，國內下載速度更快，但可能偶爾存在版本同步延遲問題。

• npm
  是 Node.js 官方的包管理器，直接連接 npm 官方倉庫，版本更新更及時。

功能差異

特性	vue-cli (2.x)	@vue/cli (3.x+)
項目初始化命令	vue init <template> <name>	vue create <name>
配置方式	依賴 webpack 配置文件	基于 vue.config.js 配置
插件系統	不支持	支持插件擴展
圖形界面	無	提供 vue ui 可視化工具

如何選擇？

• 推薦使用 npm install -g @vue/cli
  這是 Vue 官方當前維護的版本，功能更強大且持續更新。

• 如果需要舊版（如維護遺留項目）:
  使用 npm install -g vue-cli（但官方已不再維護）。

常見問題

• 同時安裝了兩個版本怎么辦？
  建議卸載舊版：

npm uninstall -g vue-cli
npm install -g @vue/cli

• 國內安裝慢怎么辦？
  可以用 cnpm 安裝新版：

cnpm install -g @vue/cli

包管理工具的區別

命令	工具	特點
cnpm install	cnpm	淘寶定制的 npm 客戶端，默認使用國內鏡像（https://registry.npmmirror.com），下載速度更快，但依賴安裝方式與 npm 略有不同（如目錄結構、符號鏈接等）。
npm install	npm	官方 Node.js 包管理工具，默認使用官方源（https://registry.npmjs.org），國內直接訪問可能較慢，需配置鏡像提速。

---