Vite+Vue3+Vant快速構建項目

隨著Vue3Vite 版本的不斷更新完善,開發(fā)體驗有了質的飛躍隙疚。因此,越來越多的大廠也逐步擁抱 Vue3
利用Vite 腳手架工具可以很輕松生成以 Vue3 為模板的項目侣颂,但是作為Vue全家桶的 vue-routervuex枪孩、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.全家桶內置集成

  1. vue-router路由钧栖,配置了路由懶加載低零,全局路由守衛(wèi)婆翔,組合式API中路由跳轉,參數(shù)獲取掏婶。
  2. vuex狀態(tài)管理啃奴,配置命名空間(namespaced)的業(yè)務模塊(modules),vuex actions異步狀態(tài)流管理气堕。
  3. axios實例全局引用纺腊。
  4. vant移動端組件庫。
  5. lib-flexible+rem移動端適配茎芭,默認為375px設計稿的適配揖膜,若是750px的設計稿可調整remUnit的值,輕松適配梅桩。
  6. sass預處理器壹粟。
  7. vue.config.js本地跨域處理,更改對應的urlpath即可使用宿百。
  8. nodemon動態(tài)監(jiān)聽vue.config.js趁仙,有更改自動重啟服務,執(zhí)行npm run dev時生效垦页。
  9. Composition API<script setup>)搭配refreactive數(shù)據(jù)綁定雀费、computed計算屬性、watch監(jiān)聽痊焊、props組件傳參等等常用API的使用都有完整事例盏袄,以供參考。

二薄啥、安裝 tive-cli 命令行工具

前提:nodenpm已經安裝可用辕羽。

  • 像使用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.0Vue3.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

不出意外項目就成功啟動了。

四掰曾、項目體驗

  1. 首頁展示:
    tive-vue3-vite-demo


  2. Demo演示:地址旭蠕,進入后可以進行交互體驗。
  3. 附帶上vue2.0+VantUI移動端模板演示Demo地址:tive-vue2-mobile-demo

《Vue3學習與實戰(zhàn)》系列


歡迎訪問:天問博客

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市掏熬,隨后出現(xiàn)的幾起案子佑稠,更是在濱河造成了極大的恐慌,老刑警劉巖旗芬,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件舌胶,死亡現(xiàn)場離奇詭異,居然都是意外死亡疮丛,警方通過查閱死者的電腦和手機幔嫂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來誊薄,“玉大人履恩,你說我怎么就攤上這事∧啬瑁” “怎么了切心?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長片吊。 經常有香客問我绽昏,道長,這世上最難降的妖魔是什么俏脊? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任全谤,我火速辦了婚禮,結果婚禮上爷贫,老公的妹妹穿的比我還像新娘认然。我一直安慰自己,他們只是感情好沸久,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布套利。 她就那樣靜靜地躺著聊闯,像睡著了一般。 火紅的嫁衣襯著肌膚如雪辜贵。 梳的紋絲不亂的頭發(fā)上威酒,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天窑睁,我揣著相機與錄音,去河邊找鬼葵孤。 笑死担钮,一個胖子當著我的面吹牛,可吹牛的內容都是我干的尤仍。 我是一名探鬼主播箫津,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了苏遥?” 一聲冷哼從身側響起饼拍,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎田炭,沒想到半個月后师抄,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡教硫,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年叨吮,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瞬矩。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡茶鉴,死狀恐怖,靈堂內的尸體忽然破棺而出丧鸯,到底是詐尸還是另有隱情蛤铜,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布丛肢,位于F島的核電站围肥,受9級特大地震影響,放射性物質發(fā)生泄漏蜂怎。R本人自食惡果不足惜穆刻,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望杠步。 院中可真熱鬧氢伟,春花似錦、人聲如沸幽歼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽甸私。三九已至诚些,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間皇型,已是汗流浹背诬烹。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留弃鸦,地道東北人绞吁。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像唬格,于是被迫代替她去往敵國和親家破。 傳聞我的和親對象是個殘疾皇子颜说,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內容