温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue3 element plus如何按需引入

发布时间:2022-03-11 14:16:54 来源:亿速云 阅读:1219 作者:小新 栏目:开发技术

这篇文章将为大家详细讲解有关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文件,就会出现如下效果

vue3 element plus如何按需引入

 这时就需要在main.ts中手动引入你所需要的css文件如

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

 如果图省事把css文件全部引入就是这样

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

不过既然都按需引入了,优雅就优雅到底,尽量别全部引入,引入成功elmessage的效果应该是这样

vue3 element plus如何按需引入

也许之后 unplugin-vue-components插件会更新修复这个bug,但如果没修复就暂时这样把.......

关于“vue3 element plus如何按需引入”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI