vue3?element?plus如何按需引入

這篇文章將為大家詳細講解有關vue3 element plus如何按需引入，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

全局導入

下載安裝element plus后，在入口文件配置一下并掛載，就能暢通無阻的使用了。但問題是這樣有很多用不上的組件都被打包進來了，導致包的體積非常大。

按需導入

采用按需導入的方法，其實是用解構的方式，從element的包中解構出來，再掛載到app上面。這樣開發中用到什么組件就打包什么確實很好，減少了包的體積。但是又有一個新的問題，就是每次想要使用新的組件的時候，都要去解構一下，并且掛載。操作起來非常繁瑣。

有什么辦法能夠像使用全局引入那樣只配置一次，后面要用到什么組件，都會自己按需加載呢？

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')

這樣只配置一次，每次使用組件的時候，都會自己自動導入。完美達成目標。

附：關于Element-plus按需引入的一些坑

在使用Elmessage等寫在js文件中的反饋提示消息的組件消息時插件識別不到css文件，就會出現如下效果

 這時就需要在main.ts中手動引入你所需要的css文件如

import 'element-plus/theme-chalk/el-message.css

 如果圖省事把css文件全部引入就是這樣

import 'element-plus/dist/index.css'

不過既然都按需引入了，優雅就優雅到底，盡量別全部引入，引入成功elmessage的效果應該是這樣

也許之后 unplugin-vue-components插件會更新修復這個bug，但如果沒修復就暫時這樣把.......

關于“vue3 element plus如何按需引入”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。