banboshi_V2/HalftoneWeb/node_modules/vite-plugin-vue-meta-layouts

vite-plugin-vue-meta-layouts

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

README 🦉

English | Chinese

动机 🤔

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

使用 🦖

基础

安装

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

// 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()]
})

使用

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 默认布局，此时页面都会被应用该布局

<template>
	default
	<router-view />
	<!-- 视图出口 -->
</template>

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

例如创建 layouts/other.vue

// 应用 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])

搭配文件路由

当然也支持文件路由哦 🤗

vite-plugin-pages

安装

npm i vite-plugin-pages -D

// 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()
	]
})

使用

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 来做布局配置

<!-- 你的页面 -->
<template> 内容 </template>

<route> { meta: { layout: 'other' } } </route>

unplugin-vue-router

安装

npm i unplugin-vue-router -D

使用

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

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

配置

// 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
		})
	]
})

类型声明 🦕

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

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

注意

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

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.