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