快捷導(dǎo)航

使用Vite+Vue3+Vant全家桶快速構(gòu)建項(xiàng)目步驟詳解

更新時(shí)間：2022年06月30日 10:21:38 作者：天

這篇文章主要為大家介紹了使用Vite+Vue3+Vant全家桶快速構(gòu)建項(xiàng)目步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

隨著Vue3 和 Vite 版本的不斷更新完善，開發(fā)體驗(yàn)有了質(zhì)的飛躍。因此，越來越多的大廠也逐步擁抱 Vue3。

利用Vite 腳手架工具可以很輕松生成以 Vue3 為模板的項(xiàng)目，但是作為Vue全家桶的 vue-router、vuex、axios等成員，需要自己一個(gè)一個(gè)去配置。于是便自行開發(fā)了本文講到的 tive-cli 腳手架模板工具，只需短短幾個(gè)命令便能快速生成配置健全的Vue3全家桶項(xiàng)目，并且集成了VantUI，內(nèi)置了rem移動(dòng)端適配，真正做到了開箱即用。

一、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.全家桶內(nèi)置集成

vue-router路由，配置了路由懶加載，全局路由守衛(wèi)，組合式API中路由跳轉(zhuǎn)，參數(shù)獲取。
vuex狀態(tài)管理，配置命名空間（namespaced）的業(yè)務(wù)模塊（modules），vuex actions異步狀態(tài)流管理。
axios實(shí)例全局引用。
vant移動(dòng)端組件庫。
lib-flexible+rem移動(dòng)端適配，默認(rèn)為375px設(shè)計(jì)稿的適配，若是750px的設(shè)計(jì)稿可調(diào)整remUnit的值，輕松適配。
sass預(yù)處理器。
vue.config.js本地跨域處理，更改對(duì)應(yīng)的url和path即可使用。
nodemon動(dòng)態(tài)監(jiān)聽vue.config.js，有更改自動(dòng)重啟服務(wù)，執(zhí)行npm run dev時(shí)生效。
Composition API（<script setup>）搭配ref和reactive數(shù)據(jù)綁定、computed計(jì)算屬性、watch監(jiān)聽、props組件傳參等等常用API的使用都有完整事例，以供參考。

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

前提：node和npm已經(jīng)安裝可用。

像使用vue-cli腳手架工具一樣，第一步全局安裝 tive-cli 命令行腳手架工具。

npm i -g tive-cli
# or
cnpm i -g tive-cli

三、生成項(xiàng)目

tive create vue3-demo

執(zhí)行次命令后，會(huì)出現(xiàn)命令行交互式選擇，可使用上（↑）下（↓）箭頭進(jìn)行選擇，如下：

E:\dev>tive create vue3-demo
? 請(qǐng)選擇要?jiǎng)?chuàng)建的腳手架或Demo (Use arrow keys)
> vue2.0+VantUI移動(dòng)端Demo
  vue3.0+vite2+VantUI移動(dòng)端Demo

提示：該腳手架內(nèi)置了Vue2.0和Vue3.0兩個(gè)版本所對(duì)應(yīng)的 Vue全家桶模板，可根據(jù)項(xiàng)目需要自行選擇。

回車（enter）確認(rèn)后，會(huì)輸出：

E:\dev>tive create vue3-demo
? 請(qǐng)選擇要?jiǎng)?chuàng)建的腳手架或Demo vue3.0+vite2+VantUI移動(dòng)端Demo
{ tel: 'tive6/tive-vue3-vite-demo' }
√ tive-vue3-vite-demo 下載成功
Done. Now run:
   cd vue3-demo
   npm install
   npm start

接下來就可以按照提示的命令進(jìn)行操作：