Vite2 + Vue3 + TypeScript + Pinia 搭建一套企業(yè)級(jí)的開(kāi)發(fā)腳手架【值得收藏】
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
前端學(xué)習(xí)路線(xiàn)一條龍【內(nèi)含入門(mén)到進(jìn)階到高級(jí)精選資源】無(wú)套路獲取?。?！
前端小菜雞之菜雞互啄，公眾號(hào)：前端開(kāi)發(fā)愛(ài)好者xy哥怒肝，前端學(xué)習(xí)路線(xiàn)一條龍【內(nèi)含入門(mén)到進(jìn)階到高級(jí)精選資源】無(wú)套路獲?。。?！
哈嘍,大家好 我是
xy???????。從我最初接觸vue3版本到現(xiàn)在已經(jīng)有一年的時(shí)間。由于 vue3.2 版本的發(fā)布，getters 用法介紹
Pinia 中的 getter 與 Vuex 中的 getter 、組件中的計(jì)算屬性具有相同的功能
store=>mian.tsimport?{?defineStore?}?from?'pinia'
export?const?useMainStore?=?defineStore({
??id:?'mian',
??state:?()?=>?({
????name:?'超級(jí)管理員',
??}),
??//?getters
??getters:?{
????nameLength:?(state)?=>?state.name.length,
??}
})組件中使用:
??<div>用戶(hù)名:{{?mainStore.name?}}<br?/>長(zhǎng)度:{{?mainStore.nameLength?}}div>
??<hr/>
??<button?@click="updateName">修改store中的namebutton>
</template>actions
這里與
Vuex有極大的不同，Pinia僅提供了一種方法來(lái)定義如何更改狀態(tài)的規(guī)則，放棄mutations只依靠Actions，這是一項(xiàng)重大的改變。
Pinia讓Actions更加的靈活：
可以通過(guò)組件或其他 action調(diào)用可以從其他 store的action中調(diào)用直接在 store實(shí)例上調(diào)用支持 同步或異步有任意數(shù)量的參數(shù) 可以包含有關(guān)如何更改狀態(tài)的邏輯（也就是 vuex 的 mutations 的作用） 可以 $patch方法直接更改狀態(tài)屬性import?{?defineStore?}?from?'pinia'
export?const?useMainStore?=?defineStore({
??id:?'mian',
??state:?()?=>?({
????name:?'超級(jí)管理員',
??}),
??getters:?{
????nameLength:?(state)?=>?state.name.length,
??},
??actions:?{
????async?insertPost(data:string){
??????//?可以做異步
??????//?await?doAjaxRequest(data);
??????this.name?=?data;
????}
??},
})環(huán)境變量配置
vite提供了兩種模式：具有開(kāi)發(fā)服務(wù)器的開(kāi)發(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ū)分開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境
"build:dev":?"vue-tsc?--noEmit?&&?vite?build?--mode?development",
"build:pro":?"vue-tsc?--noEmit?&&?vite?build?--mode?production",使用組件庫(kù) Naive UI
組件庫(kù)選擇，這里我們選擇
Naive UI至于為什么選擇它？我可以直接說(shuō)尤大大推薦的嗎？
官方介紹：
一個(gè) Vue 3組件庫(kù)比較完整， 主題可調(diào)，使用TypeScript，不算太慢有點(diǎn)意思 介紹還是比較謙虛的，既然
尤大推薦，肯定有它的優(yōu)勢(shì)了!!!安裝 Naive UI
#?安裝?組件庫(kù)
yarn?add?naive-ui
#?安裝?字體
yarn?add?vfonts如何使用
import?{?NButton?}?from?"naive-ui"naive-ui</n-button> 全局配置 Config Provider
全局化配置設(shè)置內(nèi)部組件的
主題、語(yǔ)言和組件卸載于其他位置的DOM的類(lèi)名。<n-config-provider?:locale="zhCN"?:theme="theme">
????
n-config-provider>尤其是主題配置這個(gè)功能，我真的很喜歡 ??
組件庫(kù)選擇上不做任何強(qiáng)制，根據(jù)自己的項(xiàng)目需要選擇合適的組件庫(kù)即可
Vite 常用基礎(chǔ)配置
基礎(chǔ)配置
運(yùn)行代理和打包配置server:?{
????host:?'0.0.0.0',
????port:?3000,
????open:?true,
????https:?false,
????proxy:?{}
},生產(chǎn)環(huán)境去除
consoledebuggerbuild:{
??...
??terserOptions:?{
??????compress:?{
????????drop_console:?true,
????????drop_debugger:?true
??????}
??}
}生產(chǎn)環(huán)境生成 .gz 文件
開(kāi)啟
gzip可以極大的壓縮靜態(tài)資源，對(duì)頁(yè)面加載的速度起到了顯著的作用。使用
vite-plugin-compression可以gzip或brotli的方式來(lái)壓縮資源，這一步需要服務(wù)器端的配合，vite只能幫你打包出.gz文件。此插件使用簡(jiǎn)單，你甚至無(wú)需配置參數(shù)，引入即可。#?安裝
yarn?add?--dev?vite-plugin-compressionplugins 中添加：
import?viteCompression?from?'vite-plugin-compression'
//?gzip壓縮?生產(chǎn)環(huán)境生成?.gz?文件
viteCompression({
??????verbose:?true,
??????disable:?false,
??????threshold:?10240,
??????algorithm:?'gzip',
??????ext:?'.gz',
????}),最終 vite.config.ts
import?{?defineConfig?}?from?'vite'
import?vue?from?'@vitejs/plugin-vue'
import?path?from?'path'
//@ts-ignore
import?viteCompression?from?'vite-plugin-compression'
//?https://vitejs.dev/config/
export?default?defineConfig({
??base:?'./',?//打包路徑
??plugins:?[
????vue(),
????//?gzip壓縮?生產(chǎn)環(huán)境生成?.gz?文件
????viteCompression({
??????verbose:?true,
??????disable:?false,
??????threshold:?10240,
??????algorithm:?'gzip',
??????ext:?'.gz',
????}),
??],
??//?配置別名
??resolve:?{
????alias:?{
??????'@':?path.resolve(__dirname,?'src'),
????},
??},
??css:{
????preprocessorOptions:{
??????scss:{
????????additionalData:'@import?"@/assets/style/mian.scss";'
??????}
????}
??},
??//啟動(dòng)服務(wù)配置
??server:?{
????host:?'0.0.0.0',
????port:?8000,
????open:?true,
????https:?false,
????proxy:?{}
??},
??//?生產(chǎn)環(huán)境打包配置
??//去除?console?debugger
??build:?{
????terserOptions:?{
??????compress:?{
????????drop_console:?true,
????????drop_debugger:?true,
??????},
????},
??},
})常用插件
可以查看官方文檔：https://vitejs.cn/plugins/
@vitejs/plugin-vue提供Vue 3單文件組件支持@vitejs/plugin-vue-jsx提供 Vue 3JSX支持（通過(guò) 專(zhuān)用的 Babel 轉(zhuǎn)換插件）@vitejs/plugin-legacy為打包后的文件提供傳統(tǒng)瀏覽器兼容性支持unplugin-vue-components組件的按需自動(dòng)導(dǎo)入vite-plugin-compression使用 gzip 或者 brotli 來(lái)壓縮資源..... 非常推薦使用的 hooks 庫(kù)
因?yàn)?code style="padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(145, 109, 213);font-weight: bolder;background: none;">vue3.x和
react hooks真的很像，所以就稱(chēng)為hooks
VueUse：https://vueuse.org/看到這個(gè)庫(kù)的第一眼，讓我立馬想到了 react 的
ahooks
VueUse是一個(gè)基于Composition API的實(shí)用函數(shù)集合。通俗的來(lái)說(shuō)，這就是一個(gè)工具函數(shù)包，它可以幫助你快速實(shí)現(xiàn)一些常見(jiàn)的功能，免得你自己去寫(xiě)，解決重復(fù)的工作內(nèi)容。以及進(jìn)行了基于 Composition API 的封裝。讓你在 vue3 中更加得心應(yīng)手。??想要入手 vue3 的小伙伴，趕快學(xué)習(xí)起來(lái)吧！??！
??最后給大家奉上倉(cāng)庫(kù)地址吧：https://github.com/xushanpei/vite_vue3_ts
-------------------?End?-------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬(wàn)水千山總是情，點(diǎn)個(gè)【在看】行不行
