唯

VUE CLI 安裝及錯誤訊息如權限以及手動設定建置 VUE 專案

Jul 14, 2023
Tags: VUE, VUE2, VUE3  | Comments (0)

上次我們學會了如何以 CDN 的模式使用 VUE，所已這次我們將開使使用正式的 CLI 安裝及啟動專案建置。

1. 透過指令安裝

如果您使用 Windows 或其他系統，可以直接按下列指示操作：

npm install -g @vue/cli


若您看見下列權限錯誤，可以嘗試使用其他指令。

由於我使用 iOS 並且遇到權限錯誤，所以必須在指令之前打上 sudo。

sudo npm install -g @vue/cli

* -g 是全域的意思

密碼與系統登入密碼相同。

3. 安裝之後

可以透過下列指令確認版本。

vue --version

4. 設置專案

vue create hello-world

請注意，在這裡的 hello-word 是指專案名稱，請給個好名字並避免使用大寫文字。

我在這裡命名為 "test-demo"。

5. 安裝

由於我們要手動安裝，所以可以通過鍵盤箭頭上下選擇模式，並選擇 "Manually select features".

由於我們需要歷史模式，所以輸入 "Y" 並按下 Enter 確認。

在這個步驟，選擇合適您的 CSS 預處理器 ( 直接選擇您所要的即可 )。

選擇您想要的模式。

直接選擇適合您的需求或按照我的設定。

繼續設定。

您可以在此選擇之前所有的設定是否作為未來的預設值，如果不要，直接輸入 "N" 並 Enter 即可。

設定完成後等待成功畫面跑出來即可。

您可以直接使用 "npm run serve" 來啟動專案，或將 "serve" 改成 "dev" ( 純粹是讓字變少 ).

我們可以回到終端機輸入下列指令：

npm run dev

如此將顯示出連結：

點擊後即可看到您的第一個 VUE 專案啟動。