vue3 element plus按需引入最优雅的用法

全局导入下载安装element plus后,在入口文件配置一下并挂载,就能畅通无阻的使用了。但问题是这样有很多用不上的组件都被打包进来了,导致包的体积非常大。按需导入采用按需导入的方法,其实是用解构的方式,从element的包中解构出来,再挂载到app上面。这样开发中用到什么组件就打包什么确实很好,减少了包的体积。但是又有一个新的问题,就是每次想要使用新的组件的时候,都要去解构一下,并且挂载。操作起来非常繁琐。有什么办法能够像使用全局引入那样只配置一次,后面要用到什么组件,都会自己按需加载呢?vi
摘要由CSDN通过智能技术生成

全局导入

下载安装element plus后,在入口文件配置一下并挂载,就能畅通无阻的使用了。但问题是这样有很多用不上的组件都被打包进来了,导致包的体积非常大。

按需导入

采用按需导入的方法,其实是用解构的方式,从element的包中解构出来,再挂载到app上面。这样开发中用到什么组件就打包什么确实很好,减少了包的体积。但是又有一个新的问题,就是每次想要使用新的组件的时候,都要去解构一下,并且挂载。操作起来非常繁琐。

有什么办法能够像使用全局引入那样只配置一次,后面要用到什么组件,都会自己按需加载呢?

vite项目演示

需要用到两个插件vite-plugin-style-import、vite-plugin-components这两个插件。
先下载npmi 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(),
        //按需导入el
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值