element-plus按需导入和完整配置

1.安装对应依赖

npm i element-plus

//unplugin-auto-import自动导入需要的模块
//unplugin-element-plus自动导入 Element Plus 组件和样式，会自动根据代码中使用到的组件，从 Element Plus 中找到对应的组件并导入，然后将其注册为组件
//unplugin-icons自动根据模板中使用到的图标名称，从已安装的图标集合中找到对应的图标并导入，然后将其注册为组件
//unplugin-vue-components自动注册组件，无需手动导入和注册。它可以通过扫描项目中使用到的组件，自动生成相应的全局注册代码，从而实现自动注册的功能
npm install -D  unplugin-auto-import unplugin-element-plus unplugin-icons unplugin-vue-components

2.在vite.config.ts新增配置

//依赖引入
import AutoImport from "unplugin-auto-import/vite";
import Icons from "unplugin-icons/vite";
import Components from "unplugin-vue-components/vite";
import IconsResolver from "unplugin-icons/resolver";
import ElementPlus from "unplugin-element-plus/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

plugins: [
      // Vue模板文件编译插件
      vue(),
      // jsx文件编译插件
      vueJsx(),
      // 开启ElementPlus自动引入CSS
      ElementPlus({}),
      // 自动导入组件
      AutoImport({
        resolvers: [ElementPlusResolver(), IconsResolver()],
        dts: fileURLToPath(
          new URL("./types/auto-imports.d.ts", import.meta.url),
        ),
      }),
      // 自动注册组件
      Components({
        resolvers: [ElementPlusResolver(), IconsResolver()],
        dts: fileURLToPath(new URL("./types/components.d.ts", import.meta.url)),
      }),
      Icons({
        autoInstall: true,
      }),
    ],

自动配置生成.d.ts的生成目录
如果不配置下面的部分：

dts: fileURLToPath(
  new URL("./types/auto-imports.d.ts", import.meta.url),
),

生成的auot-imports.d.ts默认在项目的根目录下面