vue3使用element-plus并实现自动按需引入

最新推荐文章于 2025-05-20 22:53:36 发布

发飙的狗头人

最新推荐文章于 2025-05-20 22:53:36 发布

阅读量1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_50961467/article/details/137616964

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue3项目中使用Vite构建工具和unplugin系列插件来安装并配置ElementPlus，实现自动导入组件，同时提供打包体积监控的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

npm install element-plus --save

自动导入

首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

在vite.config.ts添加如下配置

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

然后直接在项目中就可以随便使用element-plus的组件了，打包时候会自动按需引入的

具体想看打包的各个插件体积可以查看这篇文章：vue3+Ts+vite 打包体积分析插件 rollup-plugin-visualizer-CSDN博客