vue3?element?plus按需引入最優(yōu)雅的用法實例
全局導(dǎo)入
下載安裝element plus后，在入口文件配置一下并掛載，就能暢通無阻的使用了。但問題是這樣有很多用不上的組件都被打包進(jìn)來了，導(dǎo)致包的體積非常大。
按需導(dǎo)入
采用按需導(dǎo)入的方法，其實是用解構(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(),
//按需導(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就完成了。插件會自動掛載處理。
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')這樣只配置一次，每次使用組件的時候，都會自己自動導(dǎo)入。完美達(dá)成目標(biāo)。
附：關(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的效果應(yīng)該是這樣
也許之后 unplugin-vue-components插件會更新修復(fù)這個bug，但如果沒修復(fù)就暫時這樣把.......
總結(jié)
到此這篇關(guān)于vue3 element plus按需引入最優(yōu)雅的用法的文章就介紹到這了,更多相關(guān)vue3 element plus按需引入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了解決運行vue項目內(nèi)存溢出問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
改變vue請求過來的數(shù)據(jù)中的某一項值的方法(詳解)
下面小編就為大家分享一篇改變vue請求過來的數(shù)據(jù)中的某一項值的方法(詳解)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue內(nèi)置組件keep-alive事件動態(tài)緩存實例
這篇文章主要介紹了vue內(nèi)置組件keep-alive事件動態(tài)緩存實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了如何在 Vue 表單中處理圖片，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
關(guān)于ElementUI el-table 鼠標(biāo)滾動失靈的問題及解決辦法
這篇文章主要介紹了關(guān)于ElementUI el-table 鼠標(biāo)滾動失靈的問題及解決辦法,本文給大家分享問題所在原因及解決方案,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了Vue Router初始化路由信息的相關(guān)知識,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以了解一下2023-11-11
vuex中this.$store.commit和this.$store.dispatch的基本用法實例
在vue的項目里常常會遇到父子組件間需要進(jìn)行數(shù)據(jù)傳遞的情況,下面這篇文章主要給大家介紹了關(guān)于vuex中this.$store.commit和this.$store.dispatch的基本用法的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue實現(xiàn)禁止瀏覽器記住密碼功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式
這篇文章主要介紹了Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue 通過 Prop 向子組件傳遞數(shù)據(jù)的實現(xiàn)方法
這篇文章主要介紹了vue 通過 Prop 向子組件傳遞數(shù)據(jù)的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10