组件自动导入到全局的插件

unplugin-vue-components

1、安装

 pnpm install -D unplugin-vue-components

2、vite.config.ts 配置

import { defineConfig } from 'vite'
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 { resolve } from "path";

// https://vite.dev/config/
const pathSrc = resolve(__dirname, "src");
export default defineConfig({
  plugins: [
    vue(),  
    // 自动导入配置 https://github.com/sxzz/element-plus-best-practices/blob/main/vite.config.ts
    AutoImport({
      // 导入 Vue 函数，如：ref, reactive, toRef 等
      imports: ["vue", "@vueuse/core", "pinia", "vue-router", "vue-i18n"],
      resolvers: [
        // 导入 Element Plus函数，如：ElMessage, ElMessageBox 等
        ElementPlusResolver(),
      ],
      eslintrc: {
        enabled: false,
        filepath: "./.eslintrc-auto-import.json",
        globalsPropValue: true,
      },
      vueTemplate: true,
      // 导入函数类型声明文件路径 (false:关闭自动生成)     
       // 导入组件类型声明文件路径 (false:关闭自动生成)      
      dts: false,
      // dts: "src/types/auto-imports.d.ts",
    }),
    Components({
      resolvers: [
        // 导入 Element Plus 组件
        ElementPlusResolver(),
      ],  
       // 指定自定义组件位置(默认:src/components)
      dirs: ["src/components", "src/**/components"],   
      // 导入组件类型声明文件路径 (false:关闭自动生成)
      dts: false,
      // dts: "src/types/components.d.ts",
    }),   
  ],
  resolve: {
    alias: {
      "@": pathSrc,
    },
  },
})

3、tsconfig.json配置  components.d.ts路径

4、component.d.ts文件

我的是手动调用，不是自动生成d.ts文件的

/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}

declare module "vue" {
  export interface GlobalComponents {
    Aside: (typeof import("./../layout/base/aside.vue"))["default"];
    MgHeader: (typeof import("./../components/MgHeader/index.vue"))["default"];
    Breadcrumb: (typeof import("./../components/Breadcrumb/index.vue"))["default"];
    CopyButton: (typeof import("./../components/CopyButton/index.vue"))["default"];
    CURD: (typeof import("./../components/CURD/index.vue"))["default"];
    Dict: (typeof import("./../components/Dict/index.vue"))["default"];
    DictLabel: (typeof import("./../components/Dict/DictLabel.vue"))["default"];
    ElBacktop: (typeof import("element-plus/es"))["ElBacktop"];
    ElBreadcrumb: (typeof import("element-plus/es"))["ElBreadcrumb"];
    ElBreadcrumbItem: (typeof import("element-plus/es"))["ElBreadcrumbItem"];
    ElButton: (typeof import("element-plus/es"))["ElButton"];
    ElCard: (typeof import("element-plus/es"))["ElCard"];
    ElCheckbox: (typeof import("element-plus/es"))["ElCheckbox"];
    ElCheckboxGroup: (typeof import("element-plus/es"))["ElCheckboxGroup"];
    ElCol: (typeof import("element-plus/es"))["ElCol"];
    ElColorPicker: (typeof import("element-plus/es"))["ElColorPicker"];
    ElConfigProvider: (typeof import("element-plus/es"))["ElConfigProvider"];
    ElDatePicker: (typeof import("element-plus/es"))["ElDatePicker"];
    ElDialog: (typeof import("element-plus/es"))["ElDialog"];
    ElDivider: (typeof import("element-plus/es"))["ElDivider"];
    ElDrawer: (typeof import("element-plus/es"))["ElDrawer"];
    ElDropdown: (typeof import("element-plus/es"))["ElDropdown"];
    ElDropdownItem: (typeof import("element-plus/es"))["ElDropdownItem"];
    ElDropdownMenu: (typeof import("element-plus/es"))["ElDropdownMenu"];
    ElForm: (typeof import("element-plus/es"))["ElForm"];
    ElFormItem: (typeof import("element-plus/es"))["ElFormItem"];
    ElIcon: (typeof import("element-plus/es"))["ElIcon"];
    ElImage: (typeof import("element-plus/es"))["ElImage"];
    ElInput: (typeof import("element-plus/es"))["ElInput"];
    ElInputNumber: (typeof import("element-plus/es"))["ElInputNumber"];
    ElLink: (typeof import("element-plus/es"))["ElLink"];
    ElMenu: (typeof import("element-plus/es"))["ElMenu"];
    ElMenuItem: (typeof import("element-plus/es"))["ElMenuItem"];
    ElOption: (typeof import("element-plus/es"))["ElOption"];
    ElPagination: (typeof import("element-plus/es"))["ElPagination"];
    ElPopover: (typeof import("element-plus/es"))["ElPopover"];
    ElRadio: (typeof import("element-plus/es"))["ElRadio"];
    ElRadioGroup: (typeof import("element-plus/es"))["ElRadioGroup"];
    ElRow: (typeof import("element-plus/es"))["ElRow"];
    ElScrollbar: (typeof import("element-plus/es"))["ElScrollbar"];
    ElSelect: (typeof import("element-plus/es"))["ElSelect"];
    ElStatistic: (typeof import("element-plus/es"))["ElStatistic"];
    ElSubMenu: (typeof import("element-plus/es"))["ElSubMenu"];
    ElSwitch: (typeof import("element-plus/es"))["ElSwitch"];
    ElTable: (typeof import("element-plus/es"))["ElTable"];
    ElTableColumn: (typeof import("element-plus/es"))["ElTableColumn"];
    ElTag: (typeof import("element-plus/es"))["ElTag"];
    ElText: (typeof import("element-plus/es"))["ElText"];
    ElTooltip: (typeof import("element-plus/es"))["ElTooltip"];
    ElTree: (typeof import("element-plus/es"))["ElTree"];
    ElTreeSelect: (typeof import("element-plus/es"))["ElTreeSelect"];
    ElUpload: (typeof import("element-plus/es"))["ElUpload"];
    ElWatermark: (typeof import("element-plus/es"))["ElWatermark"];
    ElSkeleton: (typeof import("element-plus/es"))["ElSkeleton"];
    FileUpload: (typeof import("./../components/Upload/FileUpload.vue"))["default"];
    Form: (typeof import("./../components/CURD/Form.vue"))["default"];
    Fullscreen: (typeof import("./../components/Fullscreen/index.vue"))["default"];
    GithubCorner: (typeof import("./../components/GithubCorner/index.vue"))["default"];
    Hamburger: (typeof import("./../components/Hamburger/index.vue"))["default"];
    IconSelect: (typeof import("./../components/IconSelect/index.vue"))["default"];
    LangSelect: (typeof import("./../components/LangSelect/index.vue"))["default"];
    MenuSearch: (typeof import("./../components/MenuSearch/index.vue"))["default"];
    MultiImageUpload: (typeof import("./../components/Upload/MultiImageUpload.vue"))["default"];
    LayoutSelect: (typeof import("./../layout/components/Settings/components/LayoutSelect.vue"))["default"];
    PageContent: (typeof import("./../components/CURD/PageContent.vue"))["default"];
    PageForm: (typeof import("./../components/CURD/PageForm.vue"))["default"];
    PageModal: (typeof import("./../components/CURD/PageModal.vue"))["default"];
    PageSearch: (typeof import("./../components/CURD/PageSearch.vue"))["default"];
    Pagination: (typeof import("./../components/Pagination/index.vue"))["default"];
    RouterLink: (typeof import("vue-router"))["RouterLink"];
    RouterView: (typeof import("vue-router"))["RouterView"];
    Settings: (typeof import("./../layout/components/Settings/index.vue"))["default"];
    Sidebar: (typeof import("./../layout/components/Sidebar/index.vue"))["default"];
    SidebarLogo: (typeof import("./../layout/components/Sidebar/components/SidebarLogo.vue"))["default"];
    SidebarMenu: (typeof import("./../layout/components/Sidebar/components/SidebarMenu.vue"))["default"];
    SidebarMenuItem: (typeof import("./../layout/components/Sidebar/components/SidebarMenuItem.vue"))["default"];
    SidebarMenuItemTitle: (typeof import("./../layout/components/Sidebar/components/SidebarMenuItemTitle.vue"))["default"];
    SidebarMixTopMenu: (typeof import("./../layout/components/Sidebar/components/SidebarMixTopMenu.vue"))["default"];
    SizeSelect: (typeof import("./../components/SizeSelect/index.vue"))["default"];
    SvgIcon: (typeof import("./../components/SvgIcon/index.vue"))["default"];
    TableSelect: (typeof import("./../components/TableSelect/index.vue"))["default"];
    TagsView: (typeof import("./../layout/components/TagsView/index.vue"))["default"];
    ThemeColorPicker: (typeof import("./../layout/components/Settings/components/ThemeColorPicker.vue"))["default"];
    SingleImageUpload: (typeof import("./../components/Upload/SingleImageUpload.vue"))["default"];
    WangEditor: (typeof import("./../components/WangEditor/index.vue"))["default"];
  }
  export interface ComponentCustomProperties {
    vLoading: (typeof import("element-plus/es"))["ElLoadingDirective"];
  }
}