隨著Vue3
和 Vite
版本的不斷更新完善,開發(fā)體驗有了質的飛躍隙疚。因此,越來越多的大廠也逐步擁抱 Vue3
。
利用Vite
腳手架工具可以很輕松生成以 Vue3
為模板的項目侣颂,但是作為Vue
全家桶的 vue-router
、vuex
枪孩、axios
等成員憔晒,需要自己一個一個去配置。于是便自行開發(fā)了本文講到的 tive-cli
腳手架模板工具蔑舞,只需短短幾個命令便能快速生成配置健全的Vue3全家桶
項目拒担,并且集成了VantUI
,內置了rem
移動端適配攻询,真正做到了開箱即用
从撼。
Vite + Vue3
一、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
路由钧栖,配置了路由懶加載
低零,全局路由守衛(wèi)
婆翔,組合式API中路由跳轉,參數(shù)獲取掏婶。 -
vuex
狀態(tài)管理啃奴,配置命名空間(namespaced
)的業(yè)務模塊(modules
),vuex actions
異步狀態(tài)流管理气堕。 -
axios
實例全局引用纺腊。 -
vant
移動端組件庫。 -
lib-flexible
+rem
移動端適配茎芭,默認為375px
設計稿的適配揖膜,若是750px
的設計稿可調整remUnit
的值,輕松適配梅桩。 -
sass
預處理器壹粟。 -
vue.config.js
本地跨域處理,更改對應的url
和path
即可使用宿百。 -
nodemon
動態(tài)監(jiān)聽vue.config.js
趁仙,有更改自動重啟服務,執(zhí)行npm run dev
時生效垦页。 -
Composition API
(<script setup>
)搭配ref
和reactive
數(shù)據(jù)綁定雀费、computed
計算屬性、watch
監(jiān)聽痊焊、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
執(zhí)行次命令后,會出現(xiàn)命令行交互式選擇到逊,可使用上(↑
)下(↓
)箭頭進行選擇铣口,如下:
E:\dev>tive create vue3-demo
? 請選擇要創(chuàng)建的腳手架或Demo (Use arrow keys)
> vue2.0+VantUI移動端Demo
vue3.0+vite2+VantUI移動端Demo
提示: 該腳手架內置了Vue2.0
和Vue3.0
兩個版本所對應的 Vue全家桶 模板,可根據(jù)項目需要自行選擇觉壶。
回車(enter
)確認后枷踏,會輸出:
E:\dev>tive create vue3-demo
? 請選擇要創(chuàng)建的腳手架或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
不出意外項目就成功啟動了。
四掰曾、項目體驗
- 首頁展示:tive-vue3-vite-demo
- Demo演示:地址旭蠕,進入后可以進行交互體驗。
- 附帶上
vue2.0+VantUI移動端模板
演示Demo地址:tive-vue2-mobile-demo
《Vue3學習與實戰(zhàn)》系列
- Vue3學習與實戰(zhàn) · 組件通信
- Vue3學習與實戰(zhàn) · 全局掛載使用Axios
- Vue3學習與實戰(zhàn) · 配置使用vue-router路由
- Vue3學習與實戰(zhàn) · Vuex狀態(tài)管理
- vue3 + vite實現(xiàn)異步組件和路由懶加載
- Vite+Vue3+Vant快速構建項目(本文)
歡迎訪問:天問博客