全局注册组件

src/assets/styles/common.css

@@ -18,6 +18,7 @@ body {
 body,
 ul,
 h1,
+h2,
 h3,
 h4,
 p,

src/components/TableBox/index.vue

@@ -0,0 +1,34 @@
+<script setup lang='ts'>
+const props = defineProps<{
+    total: Number
+}>()
+
+</script>
+<template>
+    <div class="table box_shadow">
+        <h3>
+            <slot name="header"></slot>
+        </h3>
+        <slot></slot>
+        <div class="page">
+            <el-pagination background :total="props.total" />
+        </div>
+    </div>
+</template>
+<style scoped>
+.table {
+    margin-top: 20px;
+
+    h3 {
+        display: flex;
+        justify-content: space-between;
+        font-weight: 100;
+        padding: 20px 15px;
+        border-bottom: 1px solid #ddd;
+    }
+
+    .page {
+        padding: 20px 15px;
+    }
+}
+</style>

src/components/index.ts

@@ -0,0 +1,14 @@
+// 导入所有组件
+const modules = import.meta.glob("./**/*.vue", {
+  import: "default",
+  eager: true,
+});
+export default {
+  install(app: any) {
+    // 全局注册组件
+    Object.keys(modules).forEach((item) => {
+      const itemName = item.split("/")[1];
+      app.component(itemName, modules[item]);
+    });
+  },
+};

src/main.ts

@@ -8,6 +8,8 @@ import zhCn from "element-plus/es/locale/lang/zh-cn";
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 import "@/assets/font/iconfont.css";
 import * as echarts from "echarts";
+import Components from "@/components";
+
 const app = createApp(App);
 // 全局挂载echarts
 app.config.globalProperties.$echarts = echarts;
@@ -16,4 +18,5 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component);
 }
 app.use(router);
+app.use(Components);
 app.use(ElementPlus, { locale: zhCn }).mount("#app");