Vue的安裝與配置

西伯利亚电子野猪仔仔發表於2024-08-18
Vue

1、安裝 Node.js

Node.js 官網：https://nodejs.org/en/download

安裝成功後在 CMD 控制檯輸入 node -v 和 npm -v 驗證是否安裝成功

2.配置預設安裝目錄和快取日誌目錄

由於在執行全域性安裝語句時，安裝的模組會預設安裝到 C:\Users\使用者名稱\AppData\Roaming\npm 目錄下，久而久之C盤很容易被佔滿（C盤足夠大可以無視此步驟），所以將預設安裝目錄和快取日誌目錄重新配置到其他磁碟機代號節約C盤空間

  • 執行命令，配置預設安裝目錄和快取日誌目錄到剛才建立的資料夾
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

3、配置環境變數

  • 按 win 鍵並輸入“編輯系統環境變數”調出系統屬性介面，點選下方的“環境變數”按鈕
  • 在系統變數下新建 NODE_PATH 變數，輸入預設安裝目錄 node_global 下的 node_modules 的路徑
D:\nodejs\node_global\node_modules
  • 進入系統變數的Path，輸入nodejs安裝路徑
D:\configuration\nodejs\
  • 進入使用者變數的Path，輸入 nodejs 預設的模組呼叫路徑
D:\configuration\nodejs\node_global
D:\configuration\nodejs\node_cache

4、配置淘寶映象

使用 NPM 來安裝用的是國外的伺服器，經常會出現超時錯誤，可以透過修改為國內的淘寶映象來加速安裝。淘寶 NPM 映象是一個完整 npmjs.com 映象，同步頻率目前為 10分鐘一次，以保證儘量與官方服務同步。

  • 安裝 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 驗證是否安裝成功
cnpm config get registry

5、安裝 vue 和腳手架

  • 安裝 vue.js
cnpm install vue -g
  • 驗證安裝是否成功
cnpm info vue
npm list vue

  • 安裝 webpack 模組
cnpm install webpack -g
  • 安裝 webpack-cli
cnpm install --global webpack-cli

6、安裝vue-cli 3.x

cnpm install @vue/cli –g

7、建立 vue 3 專案

  • 以管理員身份開啟 cmd 控制檯，進入想要建立專案的目錄，開始建立專案
vue create [專案名稱]

  • 根據給出的提示進入專案目錄，執行專案

npm run serve

在瀏覽器輸入給出的網址，出現如下頁面則表示專案搭建成功

8、可能遇到的問題

1.npm ERR! Invalid tag name “@vue-cli“: Tags may not have any characters that encodeURIComponent encod

正確命令

npm install -g @vue/cli

錯誤命令

npm install -g @vue-cli

錯誤示例

正確示例

2.解決：Could not read package.json: This is related to npm not being able to find a file.

原因：

Could not read package.json，找不到package.json的路徑，執行npm命令的路徑不正確

解決：

cd:到正確目錄下即可，再執行npm install 命令

相關文章