【vue】Vue CLI 3建立專案
阿新 • • 發佈:2018-12-01
前提條件
① 若你的計算機已經安裝了舊版本的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