Admin 项目实战（四）：约定编程¶

这是 Admin 练习项目的第四篇，练习如何通过约定优于配置的方式实现页面加载与插件加载。

什么是约定编程¶

“约定优于配置”是一种计算机编程中的原则，指的是使用约定而非配置的方法来管理系统或应用程序的行为。

这种原则在软件开发中非常常见，尤其是在框架和库的开发中。例如，许多JavaScript框架（如Vue.js和React）都使用约定来规定组件的命名和文件的结构，而不是通过配置文件来实现。这种方法可以使开发人员更加高效地编写代码，同时也可以降低代码的复杂性。

用约定编程加载页面¶

需求：在 pages 目录下添加新页面能够实现自动加载。

手工配置¶

当前 main.ts 中的配置：

    const router = createRouter({
      history: createWebHistory(),
      routes: [
        {
          path: "/",
          component: () => import("~/pages/index.vue"),
        },
        {
          path: "/login",
          component: () => import("~/pages/login.vue"),
        },
      ],
    });

约定编程¶

安装插件：

    pnpm i vite-plugin-pages

修改 vite.config.ts 加载插件：

    import Pages from "vite-plugin-pages";
    export default defineConfig({
      //...
      plugins: [
        //...
        Pages({
          extensions: ["vue"],
        }),
      ],
    });

更新 main.ts 的路由：

    import routes from "~pages";
    const router = createRouter({
      history: createWebHistory(),
      routes,
    });

这时，启动项目，可以正常访问 index 和 login。在 pages 目录新增页面，比如 abs.vue 也可以正常访问。

注意：默认情况下 typescript 编辑器会对 ～pages 报错，可以修改 tsconfig.json 中的 types 字段，增加为：

{
  "types": ["vite/client", "vite-plugin-pages/client"],
}

用约定编程加载组件¶

需求：在 modules 目录下添加新组件能够实现自动加载。

手工加载¶

在 main.ts 中逐个加载组件：

createApp(App).use(router).use(pinia).mount("#app");

下面以 Pinia 组件为例，介绍如何实现约定加载。

约定加载¶

编写 Pinia 组件¶

    // src/modules/pinia.ts
    import { createPinia } from "pinia";
    import type { UserModule } from "./types";

    export const install: UserModule = ({ app }) => {
      const pinia = createPinia();
      app.use(pinia);
    };

    // src/modules/types.ts
    import { App } from "vue";
    export type UserModule = (ctx: { app: App }) => void;

支持按照约定加载¶

遍历 modules 下所有的组件文件，执行 install 方法：

    // src/main.ts
    const app = createApp(App);
    app.use(router);
    Object.values(import.meta.globEager("./modules/*.ts")).forEach((i) =>
      i.install?.({ app })
    );
    app.mount("#app");

测试¶

使用 user store 进行测试，点击按钮可以正确增加计数值。

上一课

Admin 项目实战（五）：按需引入

凡本网注明"来源：XXX "的文/图/视频等稿件，本网转载出于传递更多信息之目的，并不意味着赞同其观点或证实其内容的真实性。如涉及作品内容、版权和其它问题，请与本网联系，我们将在第一时间删除内容！
作者: 勃纳什
来源： https://zhuanlan.zhihu.com/p/644430786