build: 📦️ 拆分vite插件

src/typings/auto-imports.d.ts

@@ -4,6 +4,8 @@
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 /**
+ * unplugin-auto-import 用于自动导入模块，提高开发效率。
+ *
  * 这个文件是一个声明全局变量的 TypeScript 文件。
  * 它使用了 declare global 来声明全局命名空间，然后导出了一系列常用的 Vue 和 Pinia 相关的函数和类型。
  * 这些导出的函数和类型可以在项目中被其他模块引入和使用。
@@ -106,7 +108,8 @@ declare global {
  Directive,
  DirectiveBinding,
  App,
- CSSProperties
+ CSSProperties,
+ ElRef
  } from "vue";
  import("vue");
 }

src/typings/components.d.ts

@@ -4,10 +4,70 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // https://juejin.cn/post/7012446423367024676
+// unplugin-vue-components 则用于自动注册 Vue 组件。
+// 原理是全量导入组件，但它会在编译时进行按需引入。
 export {}
 
 declare module "vue" {
  export interface GlobalComponents {
- ProTable: (typeof import("./../components/ProTable/index.vue"))["default"];
+ ECharts: (typeof import("./src/components/ECharts/index.vue"))["default"];
+ ElAside: (typeof import("element-plus/es"))["ElAside"];
+ ElAutocomplete: (typeof import("element-plus/es"))["ElAutocomplete"];
+ ElBadge: (typeof import("element-plus/es"))["ElBadge"];
+ ElBreadcrumb: (typeof import("element-plus/es"))["ElBreadcrumb"];
+ ElBreadcrumbItem: (typeof import("element-plus/es"))["ElBreadcrumbItem"];
+ ElButton: (typeof import("element-plus/es"))["ElButton"];
+ ElColorPicker: (typeof import("element-plus/es"))["ElColorPicker"];
+ ElContainer: (typeof import("element-plus/es"))["ElContainer"];
+ 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"];
+ ElFooter: (typeof import("element-plus/es"))["ElFooter"];
+ ElForm: (typeof import("element-plus/es"))["ElForm"];
+ ElFormItem: (typeof import("element-plus/es"))["ElFormItem"];
+ ElHeader: (typeof import("element-plus/es"))["ElHeader"];
+ ElIcon: (typeof import("element-plus/es"))["ElIcon"];
+ ElInput: (typeof import("element-plus/es"))["ElInput"];
+ ElMain: (typeof import("element-plus/es"))["ElMain"];
+ ElMenu: (typeof import("element-plus/es"))["ElMenu"];
+ ElMenuItem: (typeof import("element-plus/es"))["ElMenuItem"];
+ ElPopover: (typeof import("element-plus/es"))["ElPopover"];
+ ElScrollbar: (typeof import("element-plus/es"))["ElScrollbar"];
+ ElSubMenu: (typeof import("element-plus/es"))["ElSubMenu"];
+ ElSwitch: (typeof import("element-plus/es"))["ElSwitch"];
+ ElTabPane: (typeof import("element-plus/es"))["ElTabPane"];
+ ElTabs: (typeof import("element-plus/es"))["ElTabs"];
+ ElTag: (typeof import("element-plus/es"))["ElTag"];
+ ElTooltip: (typeof import("element-plus/es"))["ElTooltip"];
+ ErrorPage: (typeof import("./src/components/ErrorPage/index.vue"))["default"];
+ Grid: (typeof import("./src/components/Grid/index.vue"))["default"];
+ GridItem: (typeof import("./src/components/Grid/components/GridItem.vue"))["default"];
+ Img: (typeof import("./src/components/Upload/Img.vue"))["default"];
+ Imgs: (typeof import("./src/components/Upload/Imgs.vue"))["default"];
+ ImportExcel: (typeof import("./src/components/ImportExcel/index.vue"))["default"];
+ Kbd: (typeof import("./src/components/Kbd/index.vue"))["default"];
+ Loading: (typeof import("./src/components/Loading/src/Loading.vue"))["default"];
+ Pagination: (typeof import("./src/components/ProTable/components/Pagination.vue"))["default"];
+ Popover: (typeof import("./src/components/popover/index.vue"))["default"];
+ ProTable: (typeof import("./src/components/ProTable/index.vue"))["default"];
+ RouterLink: (typeof import("vue-router"))["RouterLink"];
+ RouterView: (typeof import("vue-router"))["RouterView"];
+ SearchForm: (typeof import("./src/components/SearchForm/index.vue"))["default"];
+ SearchFormItem: (typeof import("./src/components/SearchForm/components/SearchFormItem.vue"))["default"];
+ SelectFilter: (typeof import("./src/components/SelectFilter/index.vue"))["default"];
+ SelectIcon: (typeof import("./src/components/SelectIcon/index.vue"))["default"];
+ SvgIcon: (typeof import("./src/components/SvgIcon/index.vue"))["default"];
+ SwitchDark: (typeof import("./src/components/SwitchDark/index.vue"))["default"];
+ TableColumn: (typeof import("./src/components/ProTable/components/TableColumn.vue"))["default"];
+ TreeFilter: (typeof import("./src/components/TreeFilter/index.vue"))["default"];
+ VirtualScroll: (typeof import("./src/components/VirtualScroll/index.vue"))["default"];
+ WangEditor: (typeof import("./src/components/WangEditor/index.vue"))["default"];
+ }
+ export interface ComponentCustomProperties {
+ vLoading: (typeof import("element-plus/es"))["ElLoadingDirective"];
+ ProTable: (typeof import("./src/components/ProTable/index.vue"))["default"];
  }
 }

src/typings/global.d.ts

@@ -76,3 +76,11 @@ declare const __APP_INFO__: {
 declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;
 
 declare type Nullable<T> = T | null;
+
+import { ProTable } from "@/components/ProTable/index.vue";
+declare type ProTableType = InstanceType<typeof ProTable>;
+// declare module "@vue/runtime-core" {
+// interface ComponentCustomProperties {
+// ProTable: ProTableType;
+// }
+// }

src/views/system/menuMange/index.vue

@@ -24,10 +24,9 @@
 import { ColumnProps } from "@/components/ProTable/interface";
 import { Delete, EditPen, CirclePlus } from "@element-plus/icons-vue";
 import authMenuList from "@/assets/json/authMenuList.json";
-import ProTable from "@/components/ProTable/index.vue";
-
-const proTable = ref();
+// import ProTable from "@/components/ProTable/index.vue";
 
+const proTable = ref<ProTableType>();
 const menuData = ref(authMenuList.data);
 
 // 表格配置项

vite.config.ts

@@ -2,7 +2,7 @@ import { defineConfig, loadEnv, ConfigEnv, UserConfig } from "vite";
 import { resolve } from "path";
 import { wrapperEnv } from "./build/getEnv";
 import { createProxy } from "./build/proxy";
-import { createVitePlugins } from "./build/plugins";
+import { createVitePlugins } from "./vite/plugins";
 import pkg from "./package.json";
 import dayjs from "dayjs";
 

build/auto-import.ts → vite/plugins/auto-import.ts

@@ -3,7 +3,8 @@ import autoImport from "unplugin-auto-import/vite";
 export default function createAutoImport() {
  return autoImport({
  imports: ["vue", "vue-router", "pinia"],
- dts: "./src/types/auto-imports.d.ts"
+ //配置文件位置
+ dts: "./src/typings/auto-imports.d.ts"
  // dirs: ["./src/**"]
  });
 }

vite/plugins/components.ts

@@ -0,0 +1,9 @@
+import components from "unplugin-vue-components/vite";
+
+export default function createComponents() {
+ return components({
+ dirs: ["src/components"],
+ include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/],
+ dts: "./src/typings/components.d.ts"
+ });
+}