1. 程式人生 > >【vue】Vue CLI 3建立專案

【vue】Vue CLI 3建立專案

前提條件

① 若你的計算機已經安裝了舊版本的vue-cli,你需要先解除安裝它。

npm uninstall vue-cli -g

② 解除安裝完舊版本之後,安裝新版本。(注:node.js版本要求8.9以上)

npm install -g @vue/cli

③ 使用vue --version檢查當前版本是否正確。


建立專案

推薦使用cmd來建立,因為涉及到一些設定。

① 新建專案hello-world(專案名可自定義,但不能有大寫字母)

vue create hello-world

②回車之後出現以下提示,即選擇一個preset(通過上下鍵來選擇,cmd的好處就體現了)
1>預設,包含babel+eslint設定的preset
2>手動選擇特性(即需要自己一步步的選擇自己的專案所需的特性)

? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

若選擇1,則專案直接建立完成;選擇2,則繼續往下走。

③ 選擇2之後,出現以下特性供你選擇,若需要的按空格選中:

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
? Check the features needed for your project:
>(*) Babel
 ( ) TypeScript
 (*) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
 ( ) E2E Testing

我選擇了以上幾個(帶*的項)。

③ 進行更詳細的配置:
一問,是否要history模式,我選否;
二問,要用何種css前處理器,(根據自身情況選);
三問,選擇Linter / Formatter規範型別,我選ESLint + Standard config

之後我都是回車

最後一問,是否將此作為將來專案的配置,我選了否

④ 開始建立,需要等待一會兒


結語

至此專案建立完成。
可以cd到該專案目錄下,執行以下命令,開啟localhost:8080檢視專案。

npm run serve

補充

使用圖形化介面:
cd 到該專案目錄下,輸入以下命令之後會開啟圖形化介面。

vue ui