vue3?element?plus按需引入最優(yōu)雅的用法實(shí)例
全局導(dǎo)入
下載安裝element plus后，在入口文件配置一下并掛載，就能暢通無(wú)阻的使用了。但問(wèn)題是這樣有很多用不上的組件都被打包進(jìn)來(lái)了，導(dǎo)致包的體積非常大。
按需導(dǎo)入
采用按需導(dǎo)入的方法，其實(shí)是用解構(gòu)的方式，從element的包中解構(gòu)出來(lái)，再掛載到app上面。這樣開(kāi)發(fā)中用到什么組件就打包什么確實(shí)很好，減少了包的體積。但是又有一個(gè)新的問(wèn)題，就是每次想要使用新的組件的時(shí)候，都要去解構(gòu)一下，并且掛載。操作起來(lái)非常繁瑣。
有什么辦法能夠像使用全局引入那樣只配置一次，后面要用到什么組件，都會(huì)自己按需加載呢？
vite項(xiàng)目演示
需要用到兩個(gè)插件vite-plugin-style-import、vite-plugin-components這兩個(gè)插件。
先下載npm i vite-plugin-style-import vite-plugin-components -D
然后配置vite.config.js
//vite.config.js
import styleImport from 'vite-plugin-style-import'
import ViteComponents, { ElementPlusResolver } from 'vite-plugin-components'
export default defineConfig({
plugins: [
vue(),
//按需導(dǎo)入element-plus組件
ViteComponents({
customComponentResolvers: [ElementPlusResolver()],
}),
//按需導(dǎo)入element-plus的css樣式
styleImport({
libs: [
{
libraryName: 'element-plus',
esModule: true,
resolveStyle: name => {
return `element-plus/lib/theme-chalk/${name}.css`
},
},
],
}),
})還需要再去配置main.js嗎？ 不需要，安裝完element-plus，配置好vite.config.js就完成了。插件會(huì)自動(dòng)掛載處理。
import { createApp } from 'vue'
// import ElementPlus from 'element-plus'
// import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'
createApp(App).mount('#app')這樣只配置一次，每次使用組件的時(shí)候，都會(huì)自己自動(dòng)導(dǎo)入。完美達(dá)成目標(biāo)。
附：關(guān)于Element-plus按需引入的一些坑
在使用Elmessage等寫(xiě)在js文件中的反饋提示消息的組件消息時(shí)插件識(shí)別不到css文件，就會(huì)出現(xiàn)如下效果
這時(shí)就需要在main.ts中手動(dòng)引入你所需要的css文件如
import 'element-plus/theme-chalk/el-message.css
如果圖省事把css文件全部引入就是這樣
import 'element-plus/dist/index.css'
不過(guò)既然都按需引入了，優(yōu)雅就優(yōu)雅到底，盡量別全部引入，引入成功elmessage的效果應(yīng)該是這樣
也許之后 unplugin-vue-components插件會(huì)更新修復(fù)這個(gè)bug，但如果沒(méi)修復(fù)就暫時(shí)這樣把.......
總結(jié)
到此這篇關(guān)于vue3 element plus按需引入最優(yōu)雅的用法的文章就介紹到這了,更多相關(guān)vue3 element plus按需引入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue在頁(yè)面和方法中如何通過(guò)遍歷對(duì)象獲取對(duì)象的鍵(key)和值(value)
這篇文章主要介紹了vue在頁(yè)面和方法中如何通過(guò)遍歷對(duì)象獲取對(duì)象的鍵(key)和值(value)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue實(shí)現(xiàn)具備掃描和查看數(shù)據(jù)的二維碼
在我們生活中，二維碼的應(yīng)用越來(lái)越廣泛，特別是在移動(dòng)互聯(lián)網(wǎng)的時(shí)代，二維碼成為了快速傳達(dá)信息的一種利器，本文我們就來(lái)看看如何在Vue框架下，實(shí)現(xiàn)一個(gè)具備掃描和查看數(shù)據(jù)的二維碼吧2023-05-05
Vue默認(rèn)插槽,具名插槽,作用域插槽定義及使用方法
這篇文章主要介紹了Vue默認(rèn)插槽,具名插槽,作用域插槽定義及使用方法,插槽的作用是在子組件中某個(gè)位置插入父組件的自定義html結(jié)構(gòu)和data數(shù)據(jù),下面詳細(xì)內(nèi)容需要的小伙伴可以參考一下2022-03-03
函數(shù)式彈窗是一種使用函數(shù)來(lái)創(chuàng)建彈窗的技術(shù),它可以簡(jiǎn)化彈窗的使用,只需要在需要彈窗的地方調(diào)用函數(shù)就可以了,下面我們就來(lái)看看vue3中函數(shù)式彈窗的具體應(yīng)用吧2024-01-01
這篇文章主要介紹了vue自定義組件如何添加使用原生事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
教你使用vue3寫(xiě)Json-Preview的示例代碼
這篇文章主要介紹了用vue3寫(xiě)了一個(gè)Json-Preview的相關(guān)知識(shí),引入后直接<json-preview?v-model="jsonData"></json-preview>就可以使用了，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
keep-alive是Vue中一個(gè)非常有用的特性,它可以幫助我們避免重復(fù)渲染和減少組件的渲染次數(shù),從而提高應(yīng)用程序的性能,本文給大家介紹keep-alive組件緩存的相關(guān)知識(shí),感興趣的朋友一起看看吧2024-01-01
Vue+ElementUI?實(shí)現(xiàn)分頁(yè)功能-mysql數(shù)據(jù)
這篇文章主要介紹了Vue+ElementUI?實(shí)現(xiàn)分頁(yè)查詢(xún)-mysql數(shù)據(jù)，當(dāng)數(shù)據(jù)庫(kù)中數(shù)據(jù)比較多時(shí),就每次只查詢(xún)一部分來(lái)緩解服務(wù)器和頁(yè)面壓力。這里使用elementui的?Pagination?分頁(yè)?組件,配合mysql的limit語(yǔ)句，實(shí)現(xiàn)分頁(yè)查詢(xún)mysql數(shù)據(jù),下面來(lái)看看具體實(shí)現(xiàn)過(guò)程,希望對(duì)大家學(xué)習(xí)有所幫助2021-12-12
Vue中video標(biāo)簽如何實(shí)現(xiàn)不靜音自動(dòng)播放
最近在做大屏展示需要在一開(kāi)始播放引導(dǎo)視頻,產(chǎn)生自動(dòng)播放需求,下面這篇文章主要給大家介紹了關(guān)于Vue中video標(biāo)簽如何實(shí)現(xiàn)不靜音自動(dòng)播放的相關(guān)資料,需要的朋友可以參考下2023-01-01
默認(rèn)情況下,寫(xiě)在.vue組件中的樣式會(huì)全局生效,因此很容易造成組件之間的樣式?jīng)_突問(wèn)題,本文就來(lái)介紹一下如何解決此問(wèn)題,感興趣的可以了解一下2023-12-12