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按需引入最优雅的用法的文章就介绍到这了,更多相关vue3 element plus按需引入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue在页面和方法中如何通过遍历对象获取对象的键(key)和值(value)
这篇文章主要介绍了vue在页面和方法中如何通过遍历对象获取对象的键(key)和值(value)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
在我们生活中，二维码的应用越来越广泛，特别是在移动互联网的时代，二维码成为了快速传达信息的一种利器，本文我们就来看看如何在Vue框架下，实现一个具备扫描和查看数据的二维码吧2023-05-05
这篇文章主要介绍了Vue默认插槽,具名插槽,作用域插槽定义及使用方法,插槽的作用是在子组件中某个位置插入父组件的自定义html结构和data数据,下面详细内容需要的小伙伴可以参考一下2022-03-03
函数式弹窗是一种使用函数来创建弹窗的技术,它可以简化弹窗的使用,只需要在需要弹窗的地方调用函数就可以了,下面我们就来看看vue3中函数式弹窗的具体应用吧2024-01-01
这篇文章主要介绍了vue自定义组件如何添加使用原生事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了用vue3写了一个Json-Preview的相关知识,引入后直接<json-preview v-model="jsonData"></json-preview>就可以使用了，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
keep-alive是Vue中一个非常有用的特性,它可以帮助我们避免重复渲染和减少组件的渲染次数,从而提高应用程序的性能,本文给大家介绍keep-alive组件缓存的相关知识,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要介绍了Vue+ElementUI 实现分页查询-mysql数据，当数据库中数据比较多时,就每次只查询一部分来缓解服务器和页面压力。这里使用elementui的 Pagination 分页 组件,配合mysql的limit语句，实现分页查询mysql数据,下面来看看具体实现过程,希望对大家学习有所帮助2021-12-12
最近在做大屏展示需要在一开始播放引导视频,产生自动播放需求,下面这篇文章主要给大家介绍了关于Vue中video标签如何实现不静音自动播放的相关资料,需要的朋友可以参考下2023-01-01
默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成组件之间的样式冲突问题,本文就来介绍一下如何解决此问题,感兴趣的可以了解一下2023-12-12
最新评论