全局引入logger

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
     "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "plugin:vue/vue3-recommended",
     "prettier",
+    "./.eslintrc-auto-import.json",
   ],
   rules: {
     "@typescript-eslint/no-explicit-any": "off",

.gitignore

@@ -24,4 +24,7 @@ dist-ssr
 *.sw?
 
 # not sure why it's necessary, but it's really annoying
-src/types/components.d.ts
+src/types/components.d.ts
+src/types/auto-imports.d.ts
+
+.eslintrc-auto-import.json

package.json

@@ -41,6 +41,7 @@
     "postcss": "^8.4.7",
     "prettier": "^2.5.1",
     "typescript": "^4.5.5",
+    "unplugin-auto-import": "^0.6.1",
     "unplugin-vue-components": "^0.17.21",
     "vite": "^2.8.4",
     "vue-eslint-parser": "^8.3.0",

pnpm-lock.yaml

@@ -23,6 +23,7 @@ specifiers:
   tailwindcss: ^3.0.23
   typescript: ^4.5.5
   ua-parser-js: ^1.0.2
+  unplugin-auto-import: ^0.6.1
   unplugin-vue-components: ^0.17.21
   vfonts: ^0.0.3
   vite: ^2.8.4
@@ -59,6 +60,7 @@ devDependencies:
   postcss: 8.4.7
   prettier: 2.5.1
   typescript: 4.5.5
+  unplugin-auto-import: 0.6.1_vite@2.8.4
   unplugin-vue-components: 0.17.21_vite@2.8.4+vue@3.2.31
   vite: 2.8.4
   vue-eslint-parser: 8.3.0_eslint@8.10.0
@@ -72,6 +74,10 @@ packages:
       '@types/throttle-debounce': 2.1.0
     dev: true
 
+  /@antfu/utils/0.5.0:
+    resolution: {integrity: sha512-MrAQ/MrPSxbh1bBrmwJjORfJymw4IqSHFBXqvxaga3ZdDM+/zokYF8DjyJpSjY2QmpmgQrajDUBJOWrYeARfzA==}
+    dev: true
+
   /@babel/code-frame/7.16.7:
     resolution: {integrity: sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==}
     engines: {node: '>=6.9.0'}
@@ -2262,6 +2268,28 @@ packages:
     resolution: {integrity: sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==}
     dev: false
 
+  /unplugin-auto-import/0.6.1_vite@2.8.4:
+    resolution: {integrity: sha512-rSukyyROmSkqL9tjkA88oLhpG4tXYkk2rTpqGaYKjXRNktHEKf03pit8bamPt95KPVfMLjT0+TPKi6ju0toOIw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@vueuse/core': '*'
+    peerDependenciesMeta:
+      '@vueuse/core':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.5.0
+      '@rollup/pluginutils': 4.1.2
+      local-pkg: 0.4.1
+      magic-string: 0.25.7
+      resolve: 1.22.0
+      unplugin: 0.3.2_vite@2.8.4
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+    dev: true
+
   /unplugin-vue-components/0.17.21_vite@2.8.4+vue@3.2.31:
     resolution: {integrity: sha512-jkXksUF6zkNbzHQbw1DdrsQyVoMZGESRZDIGd9x7nUP+65nHdpBCY/JmlxSjKbuTrOwfMsk6FQFa0RpRueOCKg==}
     engines: {node: '>=14'}

src/features/UserLogin/UserLogin.vue

@@ -2,6 +2,8 @@
 import { loginApi } from "@/api/login";
 import { store } from "@/store/store";
 
+logger({ cnl: ["console"], pgu: "登录页面" });
+
 const accountType = $ref("STUDENT_CODE");
 const accountValue = $ref("");
 const password = $ref("");

src/utils/logger.ts

@@ -0,0 +1,21 @@
+// type x =
+type LogDetail = {
+  level?: "debug" | "log" | "warn" | "error";
+  /** channels. 往哪些渠道放日志？ */
+  cnl?: ("console" | "local" | "server" | "bd")[];
+  /** page url */
+  pgu?: string;
+  /** statck 错误信息的stack，单条信息也放此处 */
+  stk?: string;
+  /** detail 详细信息 */
+  dtl?: string;
+  /** 扩展字段的集合。TODO: 消除这里的any */
+  ext?: any;
+};
+/** 记录重要日志到多个source */
+export default function (detail: LogDetail) {
+  const newDetail = Object.assign({ level: "log" }, detail);
+  if (newDetail.cnl?.includes("console")) {
+    console.log(newDetail);
+  }
+}

vite.config.ts

@@ -1,7 +1,8 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import ViteComponents from "unplugin-vue-components/vite";
+import Components from "unplugin-vue-components/vite";
 import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
+import AutoImport from "unplugin-auto-import/vite";
 
 const SERVER_URL = "https://192.168.10.39";
 const path = require("path");
@@ -12,10 +13,28 @@ export default defineConfig({
     vue({
       reactivityTransform: true,
     }),
-    ViteComponents({
+    Components({
       resolvers: [NaiveUiResolver()],
       dts: "src/types/components.d.ts",
     }),
+    AutoImport({
+      // targets to transform
+      include: [
+        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+        /\.vue$/,
+        /\.vue\?vue/, // .vue
+      ],
+      resolvers: [(name) => name === "logger" && "@/utils/logger"],
+      dts: "src/types/auto-imports.d.ts",
+
+      // Generate corresponding .eslintrc-auto-import.json file.
+      // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
+      eslintrc: {
+        enabled: true, // Default `false`
+        filepath: "./.eslintrc-auto-import.json", // Default `./.eslintrc-auto-import.json`
+        globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
+      },
+    }),
   ],
   server: {
     port: 3000,