跳转至

Admin 项目实战（六）：可配置布局管理

这是 Admin 练习项目的第六篇，练习如何进行布局管理，并给出第一版布局示例。

效果

Login

登陆页面布局简单，效果如下图：

Dashboard

dashboard 页面包含了 navbar、sidemenu、footer，页面中间会加载其它的 component，如下图：

Exception

通过配置，可以指定异常时加载的组件，如下图：

project-practice-layout-configurable-man_23Sep22181245482179_1.jpeg

实现

安装布局插件

1
    pnpm i vite-plugin-vue-layouts

在 vite.config.ts中加入插件配置： 

1
2
3
4
5
6
7
8
    import Layouts from "vite-plugin-vue-layouts";
    export default defineConfig({
      //...
      plugins: [
        //...
        Layouts(),
      ],
    });

修改 tsconfig.json为编辑器提供支持： 

1
2
3
4
5
6
7
8
9
{
  "compilerOptions": {
    "types": [
      "vite/client",
      "vite-plugin-pages/client",
      "vite-plugin-vue-layouts/client"
    ],
  }
}

配置路由

修改 main.ts 中修改路由配置。

修改前

1
2
3
4
5
    import routes from "~pages";
    const router = createRouter({
      history: createWebHistory(),
      routes
    });

修改后

1
2
3
4
5
6
7
8
    import { setupLayouts } from "virtual:generated-layouts";
    import generatedRoutes from "virtual:generated-pages";

    const routes = setupLayouts(generatedRoutes);
    const router = createRouter({
      history: createWebHistory(),
      routes
    });

路由过滤

这里需要注意的是，有一些组件 url 不需要暴露出来，需要在 vite.config.ts中进行配置： 

1
2
3
4
5
6
7
8
9
    import Layouts from "vite-plugin-vue-layouts";
    export default defineConfig({
      plugins: [
        Pages({
          extensions: ["vue"],
          exclude: ["**/components/*.vue"],
        }),
      ],
    });

上面的配置中，所有 components 文件夹下的 vue 文件都不会向外提供路由。

配置布局

Login 布局

1
2
3
4
    <!--src/layouts/login.vue-->
    <template>
      <router-view />
    </template>

Default 布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
    <!--src/layouts/default.vue-->
    <template>
      <main>
        <div class="pt-14 xl:pl-60">
          <div class="bg-white text-base dark:bg-gray-800 dark:text-gray-100">
            <navbar></navbar>
            <side-menu></side-menu>
            <router-view></router-view>
            <footer-content></footer-content>
          </div>
        </div>
      </main>
    </template>

在页面中使用布局

可以添加下面的脚本： 

1
2
3
4
    <route lang="yaml">
    meta:
      layout: login
    </route>

注意：这里根据需要指定模具的名称，对于使用默认布局的页面可以不添加。

实现组件

组件代码可参考：https://github.com/smarty-team/smarty-admin

这里需要介绍如何进行配置。

新建 layouts 目录，提供 login 和 default 两种布局：

配置组件目录

项目级别的组件，包括 navbar、sidemenu、footer 都存放在 components 目录，需要在 vite.config.ts中进行配置： 

1
2
3
4
5
6
7
8
9
    import Layouts from "vite-plugin-vue-layouts";
    export default defineConfig({
      Components({
          dirs: ["src/components", "src/pages/**/components"],
          extensions: ["vue"],
          include: [/\.vue$/],
          dts: "src/components.d.ts",
        }),
    });

上面的代码中，指定了 src/components 目录。

配置页面下的组件

对于复杂的页面，比如 dashboard ，会包含很多自己的组件，还是利用上面的配置，指定了 src/pages/**/components 目录。

配置异常处理页面

这里需要新建特殊的文件，例如 [...all].vue 

1
2
3
4
5
6
7
    <template lang="">
      <div>Exception Page</div>
    </template>
    <script>
    export default {};
    </script>
    <style lang=""></style>

上一课

Admin 项目实战（七）：i18n 国际化

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