隨着Vue3 和 Vite 版本的不斷更新完善，開發體驗有了質的飛躍。因此，越來越多的大廠也逐步擁抱 Vue3。
利用Vite 腳手架工具可以很輕松生成以 Vue3 為模板的項目，但是作為Vue全家桶的 vue-router、vuex、axios等成員，需要自己一個一個去配置。於是便自行開發了本文講到的 tive-cli 腳手架模板工具，只需短短幾個命令便能快速生成配置健全的Vue3全家桶項目，並且集成了VantUI，內置了rem移動端適配，真正做到了開箱即用。
一、vue3全家桶模板介紹
1.版本依賴
{
"dependencies": {
"axios": "^0.21.1",
"vant": "^3.0.7",
"vue": "^3.2.24",
"vue-router": "^4.0.4",
"vuex": "^4.0.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.1.4",
"@vue/compiler-sfc": "^3.2.24",
"autoprefixer": "^10.2.4",
"lib-flexible": "^0.3.2",
"postcss-loader": "^4.1.0",
"postcss-px2rem": "^0.3.0",
"postcss-px2rem-exclude": "^0.0.6",
"sass": "^1.32.8",
"vite": "^2.0.0"
}
}
2.全家桶內置集成
vue-router路由，配置了路由懶加載，全局路由守衛，組合式API中路由跳轉，參數獲取。vuex狀態管理，配置命名空間（namespaced）的業務模塊（modules），vuex actions異步狀態流管理。axios實例全局引用。vant移動端組件庫。lib-flexible+rem移動端適配，默認為375px設計稿的適配，若是750px的設計稿可調整remUnit的值，輕松適配。sass預處理器。vue.config.js本地跨域處理，更改對應的url和path即可使用。nodemon動態監聽vue.config.js，有更改自動重啟服務，執行npm run dev時生效。Composition API（<script setup>）搭配ref和reactive數據綁定、computed計算屬性、watch監聽、props組件傳參等等常用API的使用都有完整事例，以供參考。
二、安裝 tive-cli 命令行工具
前提：
node和npm已經安裝可用。
- 像使用
vue-cli腳手架工具一樣，第一步全局安裝tive-cli命令行腳手架工具。
npm i -g tive-cli
# or
cnpm i -g tive-cli
三、生成項目
tive create vue3-demo
執行次命令后，會出現命令行交互式選擇，可使用上（↑）下（↓）箭頭進行選擇，如下：
E:\dev>tive create vue3-demo
? 請選擇要創建的腳手架或Demo (Use arrow keys)
> vue2.0+VantUI移動端Demo
vue3.0+vite2+VantUI移動端Demo
提示： 該腳手架內置了Vue2.0和Vue3.0兩個版本所對應的 Vue全家桶 模板，可根據項目需要自行選擇。
回車（enter）確認后，會輸出：
E:\dev>tive create vue3-demo
? 請選擇要創建的腳手架或Demo vue3.0+vite2+VantUI移動端Demo
{ tel: 'tive6/tive-vue3-vite-demo' }
√ tive-vue3-vite-demo 下載成功
Done. Now run:
cd vue3-demo
npm install
npm start
接下來就可以按照提示的命令進行操作：
cd vue3-demo
npm install
npm start
不出意外項目就成功啟動了。
四、項目體驗
- 首頁展示：
- Demo演示：地址，進入后可以進行交互體驗。
- 附帶上
vue2.0+VantUI移動端模板演示Demo地址：tive-vue2-mobile-demo
《Vue3學習與實戰》系列
- Vue3學習與實戰 · 組件通信
- Vue3學習與實戰 · 全局掛載使用Axios
- Vue3學習與實戰 · 配置使用vue-router路由
- Vue3學習與實戰 · Vuex狀態管理
- vue3 + vite實現異步組件和路由懶加載
- Vite+Vue3+Vant快速構建項目（本文）
歡迎訪問：天問博客