如何讓Vue3開發更順暢
這篇文章主要介紹“如何讓Vue3開發更順暢”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“如何讓Vue3開發更順暢”文章能幫助大家解決問題。
一、setup name 增強
Vue3的setup語法糖是個好東西，但使用setup語法帶來的第一個問題就是無法自定義name，而我們使用keep-alive往往是需要name的，解決這個問題通常是通過寫兩個script標簽來解決，一個使用setup，一個不使用，但這樣必然是不夠優雅的。
<script>
import?{?defineComponent,?onMounted?}?from?'vue'
export?default?defineComponent({
??name:?'OrderList'
})
</script>
<script?setup>
onMounted(()?=>?{
??console.log('mounted===')
})
</script>
這時候借助插件vite-plugin-vue-setup-extend可以讓我們更優雅的解決這個問題，不用寫兩個script標簽，可以直接在script標簽上定義name。
安裝
npm?i?vite-plugin-vue-setup-extend?-D
配置
//?vite.config.ts
import?{?defineConfig?}?from?'vite'
import?VueSetupExtend?from?'vite-plugin-vue-setup-extend'
export?default?defineConfig({
??plugins:?[
????VueSetupExtend()
??]
})
使用
<script?setup?name="OrderList">
import?{?onMounted?}?from?'vue'
onMounted(()?=>?{
??console.log('mounted===')
})
</script>
二、API 自動導入
setup語法讓我們不用再一個一個的把變量和方法都return出去就能在模板上使用，大大的解放了我們的雙手。然而對于一些常用的VueAPI，比如ref、computed、watch等，還是每次都需要我們在頁面上手動進行import。
我們可以通過unplugin-auto-import實現自動導入，無需import即可在文件里使用Vue的API。
安裝
npm?i?unplugin-auto-import?-D
配置
//?vite.config.ts
import?{?defineConfig?}?from?'vite'
import?AutoImport?from?'unplugin-auto-import/vite'
export?default?defineConfig({
??plugins:?[
????AutoImport({
???????//?可以自定義文件生成的位置，默認是根目錄下，使用ts的建議放src目錄下
??????dts:?'src/auto-imports.d.ts',
??????imports:?['vue']
????})
??]
})
安裝配置完會自動生成auto-imports.d.ts文件。
//?auto-imports.d.ts
//?Generated?by?'unplugin-auto-import'
//?We?suggest?you?to?commit?this?file?into?source?control
declare?global?{
??const?computed:?typeof?import('vue')['computed']
??const?createApp:?typeof?import('vue')['createApp']
??const?customRef:?typeof?import('vue')['customRef']
??const?defineAsyncComponent:?typeof?import('vue')['defineAsyncComponent']
??const?defineComponent:?typeof?import('vue')['defineComponent']
??const?effectScope:?typeof?import('vue')['effectScope']
??const?EffectScope:?typeof?import('vue')['EffectScope']
??const?getCurrentInstance:?typeof?import('vue')['getCurrentInstance']
??const?getCurrentScope:?typeof?import('vue')['getCurrentScope']
??const?h:?typeof?import('vue')['h']
??const?inject:?typeof?import('vue')['inject']
??const?isReadonly:?typeof?import('vue')['isReadonly']
??const?isRef:?typeof?import('vue')['isRef']
??//?...
}
export?{}
使用
<script?setup?name="OrderList">
//?不用import，直接使用ref
const?count?=?ref(0)
onMounted(()?=>?{
??console.log('mounted===')
})
</script>
上面我們在vite.config.ts的配置里只導入了vue，imports: ['vue']，除了vue的你也可以根據文檔導入其他的如vue-router、vue-use等。
個人建議只對一些比較熟悉的API做自動導入，如vue的API我們在開發時都比較熟悉，閉著眼都能寫出來，對于一些不大熟悉的像VueUse這種庫，還是使用import更好一些，畢竟編輯器都有提示，不易寫錯。
解決eslint報錯問題
在沒有import的情況下使用會導致eslint提示報錯，可以通過在eslintrc.js安裝插件**vue-global-api**解決。
//?安裝依賴
npm?i?vue-global-api?-D
//?eslintrc.js
module.exports?=?{
??extends:?[
????'vue-global-api'
??]
}
三、告別.value
眾所周知，ref要求我們訪問變量時需要加上.value，這讓很多開發者覺得難受.
let?count?=?ref(1)
const?addCount?=?()?=>?{
??count.value?+=?1
}
后來尤大大也提交了一份新的ref語法糖提案。
ref:?count?=?1
const?addCount?=?()?=>?{
??count?+=?1
}
該提案一出便引起了社區的一片討論，時間已經過去很久了，這里就不再廢話這個話題了。
這里我介紹的是另外一種寫法，也是官方后來出的一種方案，在ref前加上$，該功能默認關閉，需要手動開啟。
//?vite.config.ts
import?{?defineConfig?}?from?'vite'
import?vue?from?'@vitejs/plugin-vue'
export?default?defineConfig({
??plugins:?[
????vue({
??????refTransform:?true?//?開啟ref轉換
????})
??]
})
開啟之后可以這樣寫：
let?count?=?$ref(1)
const?addCount?=?()?=>?{
??count++
}
該語法糖根據不同的版本配置也略有不同，下面貼一下我自己所用相關插件的版本：
"vue":?"^3.2.2", "@vitejs/plugin-vue":?"^1.9.0", "@vue/compiler-sfc":?"^3.2.5", "vite":?"^2.6.13"
四、自動導入圖片
在Vue2時我們經常會這樣引用圖片：
<img?:src="require('@/assets/image/logo.png')"?/>
但在Vite中不支持require了，引用圖片變成了下面這樣：
<template> ??<img?:src="Logo"?/> </template> <script?setup> import?Logo?from?'@/assets/image/logo.png' </script>
每次使用圖片都得import，顯然耽誤了大家摸魚的時間，這時我們可以借助vite-plugin-vue-images來實現自動導入圖片。
爽歸爽，但容易發生變量沖突，慎用！
安裝
npm?i?vite-plugin-vue-images?-D
配置
//?vite.config.ts
import?{?defineConfig?}?from?'vite'
import?ViteImages?from?'vite-plugin-vue-images'
export?default?defineConfig({
??plugins:?[
????ViteImages({
??????dirs:?['src/assets/image']?//?指明圖片存放目錄
????})
??]
})
使用
<template> ??<!--?直接使用?--> ??<img?:src="Logo"?/> </template> <script?setup> //?import?Logo?from?'@/assets/image/logo.png' </script>
五、忽略.vue后綴
相信很多人在Vue2開發時，導入文件都是忽略.vue后綴的。但在Vite里，忽略.vue后綴會引起報錯。
import?Home?from?'@/views/home'?//?error import?Home?from?'@/views/home.vue'?//?ok
根據尤大大的回答，必須寫后綴其實是故意這么設計的，也就是提倡大家這么去寫。
但如果你真的不想寫，官方也是提供了支持的。
//?vite.config.ts
import?{?defineConfig?}?from?'vite'
export?default?defineConfig({
??resolve:?{
????extensions:?['.js',?'.ts',?'.jsx',?'.tsx',?'.json',?'.vue']
??}
})
這里要注意，手動配置extensions要記得把其他類型的文件后綴也加上，因為其他類型如js等文件默認是可以忽略后綴導入的，不寫上的話其他類型文件的導入就變成需要加后綴了。
雖然可以這么做，不過畢竟官方文檔說了不建議忽略.vue后綴，所以建議大家在實際開發中還是老老實實寫上.vue。
關于“如何讓Vue3開發更順暢”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注蝸牛博客行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：niceseo99@gmail.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
評論