vite-plugin-vue-meta-layouts

vite 的 vue-router 的元信息布局系统

README 🦉

English | Chinese

动机 🤔

vite-plugin-vue-layouts 的重写版本，在最新版本的 vite 中有合理的 hmr ！！

使用 🦖

基础

安装

1npm i vite-plugin-vue-meta-layouts -D

1// vite.config.js
2import { defineConfig } from "vite";
3import Vue from "@vitejs/plugin-vue";
4import MetaLayouts from "vite-plugin-vue-meta-layouts";
5
6export default defineConfig({
7  plugins: [Vue(), MetaLayouts()],
8});

使用

1import { setupLayouts } from "virtual:meta-layouts";
2import { createRouter, createWebHistory } from "vue-router";
3
4const routes = setupLayouts([
5  {
6    // ... 页面路由配置
7  },
8]);
9
10const router = createRouter({
11  routes,
12  history: createWebHistory(),
13});

1. 创建 layouts/default.vue 默认布局，此时页面都会被应用该布局

1<template>
2  default
3  <router-view />
4  <!-- 视图出口 -->
5</template>

2. 当然你可以配置不同的的布局

例如创建 layouts/other.vue

1// 应用 layouts/default.vue 布局
2const home = {
3  path: "/",
4  component: () => import("./pages/home.vue"),
5};
6
7// 应用 layouts/other.vue 布局
8const about = {
9  path: "/about",
10  component: () => import("./pages/home.vue"),
11  meta: {
12    layout: "other", // 通过元信息来管理布局
13  },
14};
15
16const routes = setupLayouts([home, about]);

搭配文件路由

当然也支持文件路由哦 🤗

vite-plugin-pages

安装

1npm i vite-plugin-pages -D

1// vite.config.js
2import { defineConfig } from "vite";
3import Vue from "@vitejs/plugin-vue";
4import Pages from "vite-plugin-pages"; // 引入文件路由插件
5import MetaLayouts from "vite-plugin-vue-meta-layouts";
6
7export default defineConfig({
8  plugins: [
9    Vue(),
10    Pages(), // 配置文件路由插件
11    MetaLayouts(),
12  ],
13});

使用

1import fileRoutes from "~pages"; // 引入文件路由表
2import { setupLayouts } from "virtual:meta-layouts";
3import { createRouter, createWebHistory } from "vue-router";
4
5const router = createRouter({
6  routes: setupLayouts(fileRoutes), // 注册文件路由表
7  history: createWebHistory(),
8});

此时可以通过页面中的自定义块 route 的 meta 来做布局配置

1<!-- 你的页面 -->
2<template> 内容 </template>
3
4<route> { meta: { layout: 'other' } } </route>

unplugin-vue-router

安装

1npm i unplugin-vue-router -D

使用

1import { routes } from "vue-router/auto-routes"; // 引入文件路由表
2import { setupLayouts } from "virtual:meta-layouts";
3import { createRouter, createWebHistory } from "vue-router/auto";
4
5const router = createRouter({
6  routes: setupLayouts(routes), // 注册文件路由表
7  history: createWebHistory(),
8});

配置

1// vite.config.js
2import { defineConfig } from "vite";
3import Vue from "@vitejs/plugin-vue";
4import MetaLayouts from "vite-plugin-vue-meta-layouts";
5
6export default defineConfig({
7  plugins: [
8    Vue(),
9    MetaLayouts({
10      target: "src/layouts", // 布局目录，默认 src/layouts
11      defaultLayout: "default", // 默认布局，默认为 default
12      importMode: "sync", // 加载模式，支持 sync 和 async。默认为自动处理，SSG 时为 sync，非 SSG 时为 async
13      skipTopLevelRouteLayout: true, // 打开修复 https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/134，默认为 false 关闭
14      excludes: [], // 排除路径，仅接受 glob
15    }),
16  ],
17});

类型声明 🦕

如果你是 ts 项目，还可以在 tsconfig.json 中配置以下声明

1{
2  "compilerOptions": {
3    "types": ["vite-plugin-vue-meta-layouts/client"]
4  }
5}

route 代码提示 💡

使用 volar-plugin-vue-router 可以带来友好的代码提示.

注意

由于布局系统需要在最外层嵌套一层布局路由，所以可能会造成路由表的获取混乱，此时可以用辅助的函数 👇

1import { createGetRoutes } from "virtual:meta-layouts";
2
3const getRoutes = createGetRoutes(router);
4
5// 获取路由表但是不包含布局路由
6console.log(getRoutes());

实现 👀

布局实现思路来自 vite-plugin-vue-layouts。

但用了更简单方案 👉 虚拟文件 与 Glob 导入。

该方案可以自动地做合理的 hmr。

组织 🦔

欢迎关注 帝莎编程

• 官网
• Gitee
• Github
• 网易云课堂

License

Made with markthree

Published under MIT License.