vite按需引入element-plus一个插件搞定

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {
            return `element-plus/lib/theme-chalk/${name}.css`;
          },
          resolveComponent: (name) => {
            return `element-plus/lib/${name}`;
          },
        }
      ]
    })
  ]
})

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);

/* or
 * app.use(ElButton)
 * app.use(ElSelect)
 */

yarn add element-plus -S
yarn add sass -D
yarn add vite-plugin-components -D

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
+import ViteComponents, { ElementPlusResolver } from "vite-plugin-components";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
+    ViteComponents({
+      customComponentResolvers: [ElementPlusResolver({ importStyle: true })],
+    }),
  ],
});

import "element-plus/packages/theme-chalk/src/base.scss";