使用Vite+Vue3+Vant全家桶快速構建項目步驟詳解
引言
隨著Vue3 和 Vite 版本的不斷更新完善,開發(fā)體驗有了質的飛躍。因此,越來越多的大廠也逐步擁抱 Vue3。
利用Vite 腳手架工具可以很輕松生成以 Vue3 為模板的項目,但是作為Vue全家桶的 vue-router、vuex、axios等成員,需要自己一個一個去配置。于是便自行開發(fā)了本文講到的 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路由,配置了路由懶加載,全局路由守衛(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
以上就是使用Vite+Vue3+Vant全家桶快速構建項目步驟詳解的詳細內容,更多關于Vite+Vue3+Vant快速構建項目的資料請關注腳本之家其它相關文章!
相關文章
vue實現(xiàn)動態(tài)控制el-table表格列的展示與隱藏
這篇文章主要介紹了vue實現(xiàn)動態(tài)控制el-table表格列的展示與隱藏,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04Vue?ElementUI?table實現(xiàn)表格斜線分隔線
這篇文章主要為大家詳細介紹了Vue?ElementUI?table實現(xiàn)表格斜線分隔線,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03vue?頁面刷新、重置、更新頁面所有數(shù)據(jù)的示例代碼
Vue.js提供了多種方式來實現(xiàn)頁面刷新、重置和更新頁面所有數(shù)據(jù)的功能,下面通過示例代碼演示vue?頁面刷新、重置、更新頁面所有數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-01-01