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

最新推荐文章于 2024-08-19 18:04:39 发布

web18296061989

最新推荐文章于 2024-08-19 18:04:39 发布

阅读量221

点赞数

分类专栏：前端 html 文章标签： javascript css html

本文链接：https://blog.csdn.net/web18296061989/article/details/123227255

版权

本文介绍了如何优雅地在Vue3项目中按需引入Element Plus。全局导入虽然方便，但会导致包体积过大。通过按需导入可以解决这个问题，但每次使用新组件都需要手动解构和挂载。通过在Vite项目中使用vite-plugin-style-import和vite-plugin-components插件，可以实现仅配置一次，后续自动按需加载组件，从而简化流程并优化包体积。

摘要由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