vite-plugin-vue-meta-layouts

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

README 🦉

English | Chinese

动机 🤔

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

使用 🦖

$3

#### 安装

``shell
npm i vite-plugin-vue-meta-layouts -D
`

`ts
// vite.config.js
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import MetaLayouts from "vite-plugin-vue-meta-layouts";

export default defineConfig({
plugins: [Vue(), MetaLayouts()],
});
`

#### 使用

`ts
import { setupLayouts } from "virtual:meta-layouts";
import { createRouter, createWebHistory } from "vue-router";

const routes = setupLayouts([
{
// ... 页面路由配置
},
]);

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

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

`html

`

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

例如创建 layouts/other.vue

`ts
// 应用 layouts/default.vue 布局
const home = {
path: "/",
component: () => import("./pages/home.vue"),
};

// 应用 layouts/other.vue 布局
const about = {
path: "/about",
component: () => import("./pages/home.vue"),
meta: {
layout: "other", // 通过元信息来管理布局
},
};

const routes = setupLayouts([home, about]);
`

$3

当然也支持文件路由哦 🤗

#### vite-plugin-pages

##### 安装

`shell
npm i vite-plugin-pages -D
`

`ts
// vite.config.js
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import Pages from "vite-plugin-pages"; // 引入文件路由插件
import MetaLayouts from "vite-plugin-vue-meta-layouts";

export default defineConfig({
plugins: [
Vue(),
Pages(), // 配置文件路由插件
MetaLayouts(),
],
});
`

##### 使用

`ts
import fileRoutes from "~pages"; // 引入文件路由表
import { setupLayouts } from "virtual:meta-layouts";
import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
routes: setupLayouts(fileRoutes), // 注册文件路由表
history: createWebHistory(),
});
`

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

`html



{ meta: { layout: 'other' } }
`






#### unplugin-vue-router

##### 安装

`shell
npm i unplugin-vue-router -D
`

##### 使用

`ts
import { routes } from "vue-router/auto-routes"; // 引入文件路由表
import { setupLayouts } from "virtual:meta-layouts";
import { createRouter, createWebHistory } from "vue-router/auto";

const router = createRouter({
routes: setupLayouts(routes), // 注册文件路由表
history: createWebHistory(),
});
`

$3

`ts
// vite.config.js
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import MetaLayouts from "vite-plugin-vue-meta-layouts";

export default defineConfig({
plugins: [
Vue(),
MetaLayouts({
target: "src/layouts", // 布局目录，默认 src/layouts
defaultLayout: "default", // 默认布局，默认为 default
importMode: "sync", // 加载模式，支持 sync 和 async。默认为自动处理，SSG 时为 sync，非 SSG 时为 async
skipTopLevelRouteLayout: true, // 打开修复 https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/134，默认为 false 关闭
excludes: [], // 排除路径，仅接受 glob
metaName: "layout", // meta 名称，默认是 layout
}),
],
});
`

$3

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

`json
{
"compilerOptions": {
"types": ["vite-plugin-vue-meta-layouts/client"]
}
}
`

$3

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

$3

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

`ts
import { createGetRoutes } from "virtual:meta-layouts";

const getRoutes = createGetRoutes(router);

// 获取路由表但是不包含布局路由
console.log(getRoutes());
`

实现 👀

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

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

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

组织 🦔

欢迎关注 帝莎编程

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

License

Made with markthree

Published under MIT License.