这篇文章将为大家详细讲解有关vue3 element plus如何按需引入,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。全局导入下载安装element plus后,在入口文件配置一下并
这篇文章将为大家详细讲解有关vue3 element plus如何按需引入,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
下载安装element plus后,在入口文件配置一下并挂载,就能畅通无阻的使用了。但问题是这样有很多用不上的组件都被打包进来了,导致包的体积非常大。
采用按需导入的方法,其实是用解构的方式,从element的包中解构出来,再挂载到app上面。这样开发中用到什么组件就打包什么确实很好,减少了包的体积。但是又有一个新的问题,就是每次想要使用新的组件的时候,都要去解构一下,并且挂载。操作起来非常繁琐。
有什么办法能够像使用全局引入那样只配置一次,后面要用到什么组件,都会自己按需加载呢?
需要用到两个插件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')
这样只配置一次,每次使用组件的时候,都会自己自动导入。完美达成目标。
在使用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如何按需引入”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
--结束END--
本文标题: vue3 element plus如何按需引入
本文链接: https://www.lsjlt.com/news/324523.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
一口价域名售卖能注册吗?域名是网站的标识,简短且易于记忆,为在线用户提供了访问我们网站的简单路径。一口价是在域名交易中一种常见的模式,而这种通常是针对已经被注册的域名转售给其他人的一种方式。
一口价域名买卖的过程通常包括以下几个步骤:
1.寻找:买家需要在域名售卖平台上找到心仪的一口价域名。平台通常会为每个可售的域名提供详细的描述,包括价格、年龄、流
443px" 443px) https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294.jpg https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294-768x413.jpg 域名售卖 域名一口价售卖 游戏音频 赋值/切片 框架优势 评估指南 项目规模
0