如何讓Vue3開發更順暢

蝸牛 互聯網技術資訊 2022-02-20 107 0

這篇文章主要介紹“如何讓Vue3開發更順暢”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“如何讓Vue3開發更順暢”文章能幫助大家解決問題。

如何讓Vue3開發更順暢  vue3 第1張

一、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進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看