1. element-plus组件按需导入1.参考链接 https://element-plus.org/zh-CN/g

1.参考链接

2.按需导入配置

unplugin-auto-import自动导入api（全局变量）在有eslint的项目中，因为没有 import 导入api，直接使用，eslint会认为这个是没有定义的，因此需要告诉eslint这些变量我已经定义过了

// 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()],
    }),
    eslintrc: { enabled: true,globalsPropValue: true,}
  ],
})

如果只是按需引入，那么全局配置main.ts引入的相关组件就可以去掉了，只要配置vite.config.ts就完成了，插件会自动挂载处理。

Element Plus的样式默认是全局导入的，如果想按需加载样式，减少项目体积，可以用unplugin-element-plus插件

// 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'
import ElementPlus from 'unplugin-element-plus/vite'

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