vue3项目自动引入vue和elementplus组件库

概述：vue3项目自动引入vue api和elementplus组件库，包括vue，vue-router，element-plus组件，element-plus图标。

1、 vite版本：4.4.9；

        vue版本：3.2.37；

        element-plus：2.3.7

2、安装插件：

yarn add unplugin-auto-import@0.16.6 unplugin-vue-components@0.25.2 -D

unplugin-auto-import：

(1)、https://github.com/unplugin/unplugin-auto-import

(2)、在vite.config.ts文件中配置

AutoImport({
      imports: [
        "vue", // 自动引入vue内容
        "vue-router", // 自动引入vue-router内容
        {
          // 部分vue内容不能自动引入，可单独引入
          from: "vue",
          imports: ["UnwrapRef", "PropType"], 
          type: true,
        },
      ],
      dts: true, // 是否默认生成引入文件（auto-imports.d.ts）为字符串时可指定引入文件的路径
   }),

unplugin-vue-components

(1)、https://github.com/unplugin/unplugin-vue-components

快速开始 | Element Plus

(2)、element-plus官方文档中的说明如下

(3)、在vite.config.ts文件中配置

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

...
AutoImport({
      resolvers: [ElementPlusResolver()],
      imports: [
        "vue",
        "vue-router",
        {
          from: "vue",
          imports: ["UnwrapRef", "PropType"],
          type: true,
        },
      ],
      dts: true,
    }),
    Components({
      dts: true,
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass", // 用于指定项目所使用的样式扩展语言，默认值为css
        }),
      ],
      dirs: [], // 默认值为'src/components'，若未设为空数组，将自动引入项目文件src/components目录下的组件
    }),
...

(4)、注意：unplugin-vue-components插件可以自动引入Element Plus组件库，但是它不会自动引入图标和类型。这是因为unplugin-vue-components主要负责的是组件的引入，而图标和类型通常需要额外的配置。

(5)、引入element-plus图标库

如果你想要在项目中使用Element Plus的图标，你需要在你的主入口文件（通常是main.js或main.ts）中手动引入Element Plus的图标库。

import "element-plus/theme-chalk/index.css";
import "element-plus/dist/index.full";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

...
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
...

注意：在element-plus组件库官方文件中，在按钮或其他组件中使用图标时，通常会使用 的格式，自动引入图标库之后，若在vue文件中删除原本的图标引入语句之后，需将图标使用格式修改为，避免将Edit解析为变量，而提示未引入或未定义等报错信息。

(6)、element-plus组件库中的类型需要在对应vue文件单独引入，否则将报错。（也可使用其他方式统一引入，因时间问题未实现）