安裝腳手架
命令 npm install -g @vue/cli
打開 cmd 窗口輸入以上命令。當出現以下界面即表示安裝完成。
查看已安裝腳手架版本
命令 vue -V
在 cmd 窗口輸入以上命令
可以看出當前版本為 5.0.4。
創建項目
命令 vue create 項目名稱
在 cmd 窗口輸入 vue create vue-demo
輸入 y
使用方向鍵上下選中選項 Manually select features （自由選擇），回車
使用方向鍵上下選擇要安裝的選項， 點擊空格鍵用於勾選/取消要安裝的內容選項。勾選的內容前面括號內會顯示一個星號“*”。
選項說明
| 選項 | 說明 |
|---|---|
| Babel | |
| TypeScript | |
| Progressive Web App (PWA) Support | |
| Router | |
| Vuex | |
| CSS Pre-processors | |
| Linter / Formatter | 檢查代碼中定義的變量定義后是否被使用 |
| Unit Testing | |
| E2E Testing |
選擇完成后，敲擊回車鍵完成選擇，並進入 vue 版本的選擇
此時選擇 vue 3.x 敲擊回車
此時用於確認路由器是否使用歷史模式？（需要為生產中的索引回退進行適當的服務器設置）。
輸入 n 敲擊回車
使用方向鍵上下選擇 Less， 敲擊回車
使用箭頭鍵選擇linter/formatter配置
選項說明
| 選項 | 說明 |
|---|---|
| ESLint + Airbnb config | 使用 ESLint 官網推薦的規則 + Airbnb 第三方的配置。只檢測錯誤 |
| ESLint + Standard config | 使用 ESLint 官網推薦的規則 + Standard 第三方的配置。自帶 linter 和 自動代碼糾正，沒有配置，自動格式化代碼，可在編碼早起發現規范問題和錯誤 |
| ESLint + Prettier | 使用 ESLint 官網推薦的規則 + Prettier 第三方的配置，Prettier 主要是做風格統一。代碼格式化工具 |
選擇 ESLint + Prettier， 敲擊回車
設置格式化時間
| 選項 | 說明 |
|---|---|
| Lint on save | 保存時檢測 |
| Lint and fix on commit | 用戶提交文件到 git 時檢測 |
選擇 Lint on save， 敲擊回車
你更喜歡把Babel、ESLint等的配置放在哪里。？
| 選項 | 說明 |
|---|---|
| In dedicated config files | 在專用配置文件中，即單獨管理 |
| In package.json | 在package.json文件 |
選擇 In package.json ， 敲擊回車
是否將此保存為未來項目的預設？（是/否）
輸入 n ， 敲擊回車
等待安裝完成。
當出現以下界面內容時，即表示項目創建完成。
項目文件被放置在 C:\Users\Earen\vue-demo 目錄中。
此時可以輸入命令 cd vue-demo 進入 vue-demo 目錄中。
輸入命令 npm run serve 啟動項目
·