vue3.2 vite element-plus组件按需引入

用到的依赖插件，需要npm install xxx安装

组件相关：@vitejs/plugin-vue、unplugin-auto-import、unplugin-vue-components，
图标相关：unplugin-icons

下面是项目代码，用不到的可以忽略

vite.config.ts

import { defineConfig} from "vite";
import { resolve } from "path";
//按需引入需要的依赖
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// 图标
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";

export default defineConfig(({ command }) => {
  return {
    resolve: {
      alias: {
        "@": resolve(__dirname, "src")
      },
      extensions: [".js", ".json", ".ts"], // 导入时想要省略的后缀名，.vue等自定义文件不建议省略，影响IDE识别和提示
    },
	
    plugins: [
      vue(),
      // 按需引入
      AutoImport({
        resolvers: [
          ElementPlusResolver({ importStyle: "sass" }), // 自动导入图标组件
          IconsResolver({
            prefix: "Icon",
          }),
        ],
      }),
      Components({
        resolvers: [
          ElementPlusResolver({ importStyle: "sass" }),
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ["ep"],
          }),
        ],
      }),
      Icons({
        autoInstall: true,
      }),
    ],
  };
});

此时直接在页面内使用组件就可以，根目录下components.d.ts文件会动态引入使用的文件。
但是一些全局组件，弹框、对话框等直接在js里调用的，并不会被引入，需要手动引入到全局

main.ts

import 'element-plus/es/components/message/style/css'
import 'element-plus/es/components/message-box/style/css'

xxx.vue，页面内使用

<script setup lang="ts">
	import { ElMessage } from "element-plus";
	ElMessage.warning("warnning");
</script>

图标的使用也需要手动引入，不然会提示找不到组件

xxx.vue，图标使用

<template>
	<el-icon><Right /></el-icon>
</template>
<script setup lang="ts">
	import { Right } from "@element-plus/icons-vue";
</script>