前言

vue3如今已經(jīng)成為默認(rèn)版本了，相信大多數(shù)公司已經(jīng)全面擁抱vue3了。

而Vite作為新一代的新型前端構(gòu)建工具，使用它能夠顯著提升前端開發(fā)體驗(yàn)。

什么是Vite

這里借用官方的介紹：

• 一個(gè)開發(fā)服務(wù)器，它基于 原生 ES 模塊 提供了 豐富的內(nèi)建功能，如速度快到驚人的 模塊熱更新（HMR）。

• 一套構(gòu)建指令，它使用 Rollup 打包你的代碼，并且它是預(yù)配置的，可輸出用于生產(chǎn)環(huán)境的高度優(yōu)化過的靜態(tài)資源。

Vite的優(yōu)勢

• 開箱即用

• 具備插件API和JS API

• 高度的可擴(kuò)展性

• 熱更新

• 高效，快速

搭建第一個(gè) Vite 項(xiàng)目

兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0。然而，有些模板需要依賴更高的 Node 版本才能正常運(yùn)行，當(dāng)你的包管理器發(fā)出警告時(shí)，請(qǐng)注意升級(jí)你的 Node 版本。

NPM:

Yarn:

創(chuàng)建Vite項(xiàng)目的命令有很多，大同小異，但是我推薦使用 yarn的方式，誰用誰知道，命令簡潔，速度更快，當(dāng)然也有其它的方式，可以看一下官網(wǎng)的推薦方式，這個(gè)選擇自己喜歡的就好了

初始化好之后的目錄：

執(zhí)行：npm i或者yarn安裝依賴，再執(zhí)行?npm run dev?或者?yarn dev?打開瀏覽器輸入http://localhost:3000

即可看到

這樣一個(gè)vue3+vite+ts的項(xiàng)目初始化就完成了

運(yùn)行項(xiàng)目不會(huì)默認(rèn)打開瀏覽器,需要在package.json里面 ,在vite 后面加上--open

安裝vue全家桶

Pinia狀態(tài)管理

由于 vuex 4 對(duì) typescript 的支持讓人感到難過，所以狀態(tài)管理?xiàng)売昧?vuex 而采取了 pinia. pinia 的作者是 Vue 核心團(tuán)隊(duì)成員

尤大好像說 pinia 可能會(huì)代替 vuex，所以請(qǐng)放心使用。

Pinia 與 Vuex 的區(qū)別：

• id 是必要的，它將所使用 store 連接到 devtools。

• 創(chuàng)建方式：new Vuex.Store(...)(vuex3)，createStore(...)(vuex4)。

• 對(duì)比于 vuex3 ，state 現(xiàn)在是一個(gè)函數(shù)返回對(duì)象。

• 沒有 mutations，不用擔(dān)心，state 的變化依然記錄在 devtools 中。

安裝 pinia

main.ts

新建store文件夾，新建index.ts

組件內(nèi)使用

getters 用法介紹

Pinia 中的 getter 與 Vuex 中的 getter 、組件中的計(jì)算屬性具有相同的功能

actions

這里與 Vuex 有極大的不同，Pinia 僅提供了一種方法來定義如何更改狀態(tài)的規(guī)則，放棄 mutations 只依靠 Actions，這是一項(xiàng)重大的改變。

Pinia 讓 Actions 更加的靈活：

• 可以通過組件或其他 action 調(diào)用

• 可以從其他 store 的 action 中調(diào)用

• 直接在 store 實(shí)例上調(diào)用

• 支持同步或異步

• 有任意數(shù)量的參數(shù)

• 可以包含有關(guān)如何更改狀態(tài)的邏輯（也就是 vuex 的 mutations 的作用）

• 可以 $patch 方法直接更改狀態(tài)屬性

VueRouter

yarn add vue-router@4
在 src 文件下新增 router 文件夾 => router.ts 文件,內(nèi)容如下:

修改入口文件 mian.ts :

到這里路由的基礎(chǔ)配置已經(jīng)完成了,更多配置信息可以查看 vue-router 官方文檔:

vue-router: next.router.vuejs.org/zh/guide/

vue-router4.x 支持 typescript，配置路由的類型是 RouteRecordRaw，這里 meta 可以讓我們有更多的發(fā)揮空間，這里提供一些參考

• title:string; 頁面標(biāo)題，通常必選。

• icon?:string; 圖標(biāo)，一般配合菜單使用。

• auth?:boolean; 是否需要登錄權(quán)限。

• ignoreAuth?:boolean; 是否忽略權(quán)限。

• roles?:RoleEnum[]; 可以訪問的角色

• keepAlive?:boolean; 是否開啟頁面緩存

• hideMenu?:boolean; 有些路由我們并不想在菜單中顯示，比如某些編輯頁面。

• order?:number; 菜單排序。

• frameUrl?:string; 嵌套外鏈。

Element-ui plus

Element Plus 目前還處于快速開發(fā)迭代中。目前使用2.0.1版可以結(jié)合vite-plugin-style-import插件按需加載樣式。 unplugin-vue-components 按需自動(dòng)導(dǎo)入組件 使用 Element Plus組件時(shí)可以直接使用

main.ts

Axios封裝

實(shí)際使用中可以根據(jù)項(xiàng)目修改，比如RESTful api中可以自行添加put和delete請(qǐng)求,ResType也可以根據(jù)后端的通用返回值動(dòng)態(tài)的去修改

新增 http文件夾，http下新增 Http.ts 文件以及 api 文件夾:

http.ts

在http文件夾下創(chuàng)建api文件夾用于統(tǒng)一存放接口文件,統(tǒng)一管理api

http/api/login.ts

至此,一個(gè)簡單地請(qǐng)求封裝完成了!!!!

除了自己手動(dòng)封裝 axios ,這里還推薦一個(gè) vue3 的請(qǐng)求庫: VueRequest,非常好用,下面來看看 VueRequest有哪些比較好用的功能吧!!!

• 所有數(shù)據(jù)都具有響應(yīng)式

• 輪詢請(qǐng)求

• 自動(dòng)處理錯(cuò)誤重試

• 內(nèi)置請(qǐng)求緩存

• 節(jié)流請(qǐng)求與防抖請(qǐng)求

• 聚焦頁面時(shí)自動(dòng)重新請(qǐng)求

• ?? 強(qiáng)大的分頁擴(kuò)展以及加載更多擴(kuò)展

• 完全使用 Typescript 編寫，具有強(qiáng)大的類型提示

• ?? 兼容 Vite

• 輕量化

• 開箱即用

tsx支持

首先需要安裝官方維護(hù)的vite插件@vitejs/plugin-vue-jsx,這個(gè)插件其實(shí)核心還是@vue/babel-plugin-jsx,只是在這個(gè)插件上封裝了一層供vite插件調(diào)用。所以關(guān)于vue的jsx語法規(guī)范可以直接參看@vue/babel-plugin-jsx,文檔鏈接如下，建議大家可以先讀一遍語法規(guī)范。官方寫得比較詳細(xì)，后續(xù)我也會(huì)結(jié)合實(shí)際講解一下大部分規(guī)范的用法，vue jsx語法規(guī)范。

安裝完之后在vite.config.ts進(jìn)行插件使用，代碼如下：

環(huán)境變量配置

vite 提供了兩種模式：具有開發(fā)服務(wù)器的開發(fā)模式（development）和生產(chǎn)模式（production）

項(xiàng)目根目錄新建: .env.development

NODE_ENV=development VITE_APP_WEB_URL= 'YOUR WEB URL'

項(xiàng)目根目錄新建: .env.production

NODE_ENV=production VITE_APP_WEB_URL= 'YOUR WEB URL'

組件中使用：

console.log(import.meta.env.VITE_APP_WEB_URL)

配置 package.json:

打包區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境

"build:dev": "vite build --mode development",

"build:pro": "vite build --mode production",

Vite 常用基礎(chǔ)配置

基礎(chǔ)配置

運(yùn)行 代理 和 打包 配置

生產(chǎn)環(huán)境生成 .gz 文件

開啟 gzip 可以極大的壓縮靜態(tài)資源，對(duì)頁面加載的速度起到了顯著的作用。\

使用 vite-plugin-compression 可以 gzip 或 brotli 的方式來壓縮資源，這一步需要服務(wù)器端的配合，vite 只能幫你打包出 .gz 文件。此插件使用簡單，你甚至無需配置參數(shù)，引入即可。

# 安裝 yarn add --dev vite-plugin-compression

plugins 中添加：

最終 vite.config.ts

常用插件

可以查看官方文檔：vitejs.cn/plugins/\

• @vitejs/plugin-vue 提供 Vue 3 單文件組件支持

• @vitejs/plugin-vue-jsx 提供 Vue 3 JSX 支持（通過 專用的 Babel 轉(zhuǎn)換插件）

• @vitejs/plugin-legacy 為打包后的文件提供傳統(tǒng)瀏覽器兼容性支持

• unplugin-vue-components 組件的按需自動(dòng)導(dǎo)入

• vite-plugin-compression 使用 gzip 或者 brotli 來壓縮資源

非常推薦使用的 hooks 庫

因?yàn)関ue3.x和react hooks真的很像，所以就稱為 hooks\

VueUse：vueuse.org/

看到這個(gè)庫的第一眼，讓我立馬想到了 react 的 ahooks

VueUse 是一個(gè)基于 Composition API 的實(shí)用函數(shù)集合。通俗的來說，這就是一個(gè)工具函數(shù)包，它可以幫助你快速實(shí)現(xiàn)一些常見的功能，免得你自己去寫，解決重復(fù)的工作內(nèi)容。以及進(jìn)行了基于 Composition API 的封裝。讓你在 vue3 中更加得心應(yīng)手。

想要入手 vue3 的小伙伴，趕快學(xué)習(xí)起來吧?。?！

最后給大家奉上倉庫地址吧：gitee.com/frontendBoy…

寫在最后

公眾號(hào)：前端少年汪

專注分享 web 前端相關(guān)技術(shù)文章、視頻教程資源、熱點(diǎn)資訊等，如果喜歡我的分享，給 點(diǎn)一個(gè)贊 或者 ?關(guān)注 都是對(duì)我最大的支持。