ElementPlus按需自动引入配置详解

在项目中使用 Element Plus，目前有3种主流方法：

全局配置：有很多插件没用上，浪费资源，打包会更大

按需配置：用什么引用什么，操作冗余

按需自动引入：用到什么就引入什么，只需要简单配置，灵活机动，无疑是最优的

因此本文主要介绍按需自动引入

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

没安装也没关系，我已经给你整理好对应的教程了

安装和配置unplugin-vue-components请点击下方链接

vue3项目配置按需自动引入自定义组件unplugin-vue-componentshttps://blog.csdn.net/rear0312/article/details/136166471?spm=1001.2014.3001.5501

安装和配置unplugin-auto-import请点击下方链接

vue3项目配置按需自动导入API组件unplugin-auto-importhttps://blog.csdn.net/rear0312/article/details/136173815?spm=1001.2014.3001.5501

2.在vite.config.ts中进行配置

将专为 Element Plus 设计的解析器放到解析器配置项即可

完整代码如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//自定义组件的自动引入
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'//按需自动加载API插件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'//element-plus按需引入

import path from 'path'


// https://vite.dev/config/
export default defineConfig({
  base: "./",
  lintOnSave: false,//关闭语法检查
  resolve: {
    alias: {
      "@": path.resolve(__dirname, './src')
    }
  },

  plugins: [vue(),
  Components({
    resolvers: [ElementPlusResolver()],
  }),
  AutoImport({
    imports: ["vue", "vue-router"],
    resolvers: [ElementPlusResolver()],
  })],
})

补充一下示例代码的一些版本信息，仅供参考