關于 Vue CLI 和 Vite 兩種建構工具建立 Vue 3 項目的方法
這幾天進入 Vue CLI 官網，發現不能選擇 Vue CLI 的版本，也就是說查不到 vue-cli 4 以下版本的文檔。
如果此時電腦上安裝了 Vue CLI，那麼舊版安裝的 vue 項目很可能會建構失敗。于是我試着運作一些早期開源的 vue 項目，比如vue-element-admin 管理系統，發現會提示 “'vue-cli-service' 不是内部或外部指令，也不是可運作的程式或批處理檔案” 。
是以一些已上線項目在建構過程中很可能會出現類似的提示，最直接粗暴的解決辦法就是使用 Vue CLI 建立一個新的 vue2 的項目，并修改 package.json 之後再重新安裝依賴即可。也可以全局安裝一個橋接工具（官網有提及，本人沒有嘗試）。
我試着去查找官方對此問題更詳細的說明，但沒有在官方文檔中找到此類文檔。猜測 vue 官方在引導開發者建立 vue 項目時使用是 Vue CLI（官方文檔中現在未發現稱其為 Vue CLI 4，而直接稱為 Vue CLI，git 上有則其是 vue-cli 4.0的說明文字） 及 Vite（尤雨溪老師開發并推薦的下一代前端開發與建構工具）建構。
在此整理了 Vue CLI 和 Vite 兩種建構工具建立 Vue 3 項目的方法及差別，以供參考和學習。
一、Vue CLI 建立 vue3 項目
鑒于 Vue CLI 官網現在沒有寫明版本，本文也不提以往的 vul-cli 版本。
1.安裝 Vue CLI
Vue CLI 4 的包由之前的 vue-cli 改成了 @vue/cli。如果本地已經全局安裝了舊版本的 vue-cli，需要先使用 npm uninstall vue-cli -g 解除安裝。再使用 npm install -g @vue/cli 安裝 Vue CLI 最新版本
安裝之後，可以通路 vue 指令，并使用 vue --version 檢查版本
2.使用 “vue create 項目名” 指令建立新項目
3.選擇項目預設
通過 vue create 指令後，會提示選擇預設，如圖所示：
選項
說明
Default ([Vue 2] babel, eslint)
安裝vue2基本配置的預設
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
安裝vue3基本配置的預設
Manually select features
手動選擇特性安裝
4.選擇項目配置功能
使用 Vue CLI 腳手架很友善的一點，就是可以同時安裝一些插件。比如通常所說的 Vue 全家桶中的 vue-router、 vuex 可以在此直接選擇配置，如圖所示：
建議在此選擇 Choose Vue versio、Babel、Router、Vuex、CSS Pre-processors 五項。
TypeScript 根據個人技術喜好選擇；Progressive Web App (PWA) Support 根據項目需要選擇；Linter / Formatter 強烈推薦不要選擇，嚴重影響開發效率和團隊合作體驗；Unit Testing 和 E2E Testing 并沒有什麼用，實際工作中測試人員會有自己的工具。
Choose Vue versio
選擇vue版本
Babel
安裝Babel編譯器
TypeScript
支援TypeScript
Progressive Web App (PWA) Support
支援漸進式web應用
Router
安裝 Vue 路由
Vuex
安裝 Vuex （vue 狀态管理模式）
CSS Pre-processors
安裝 CSS 預處理器
Linter / Formatter
代碼檢測和格式校驗
Unit Testing
安裝單元測試
E2E Testing
安裝端到端測試
5.選擇 Vue 版本
6.選擇路由曆史記錄模式
如果選擇曆史記錄模式，生産環境需要在伺服器設定無頁面傳回 index 首頁的配置，如圖所示：
7.選擇 CSS 預處理器，可根據個人喜好選擇
8.選擇配置選項放在專用的配置檔案中還是 package.json 中，建議選擇 In dedicated config files 放在專用的配置檔案中
9.是否儲存本次選擇的預設
在 vue create 過程中儲存的 preset 會被放在你的 home 目錄下的一個配置檔案中 (~/.vuerc),選擇儲存後,本地再建立 Vue 項目将可預設本次的配置進行自動安裝，有興趣的可以自己嘗試一下。
完成這些步驟後，Vue CLI 會自動安裝選擇預設的依賴。還有需要的插件，如 Axios 和 Element plus 需要自行安裝。
二、Vite 建立 Vue 3 項目
Vite 是一種新型前端建構工具，能夠顯著提升前端開發體驗，Vite 需要 Node.js 版本 >= 12.0.0。
1.使用 Vite 安裝 Vue
2.輸入項目名稱，如圖所示：
3.選擇 vue 架構
4.選擇使用 vue (javascript 文法) 或 vue-ts (typescript 文法)
Vite 不支援 vue2，是以不能選擇版本，是直接建構 vue3。
配置完成後還需要進入項目并安裝依賴。
Vite 建立的項目沒有內建 vue-router、vuex 等插件，還需要手動安裝。看到這裡都可以根據步驟建立 vue3 項目，如有疑問，歡迎留言讨論。