這幾天進入 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 最新版本
npm install -g @vue/cli
安裝之後，可以訪問 vue 命令，並使用 vue --version 檢查版本
vue --version
2.使用 “vue create 項目名” 命令創建新項目
vue create new-vue3-project
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
npm init @vitejs/app
2.輸入項目名稱，如圖所示：
3.選擇 vue 框架
4.選擇使用 vue (javascript 語法) 或 vue-ts (typescript 語法)
Vite 不支持 vue2，所以不能選擇版本，是直接構建 vue3。
配置完成後還需要進入項目並安裝依賴。
cd vite-vue3-project //進入項目 npm install //安裝依賴 npm run dev //構建項目本地開發環境
Vite 創建的項目沒有集成 vue-router、vuex 等插件，還需要手動安裝。看到這裏都可以根據步驟創建 vue3 項目，如有疑問，歡迎留言討論。