vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程

一个常见的需求是，同模块的若干页面需要使用同一种布局，比如俱乐部相关的页面的顶部需要展示俱乐部的名称，其他页面顶部需要展示网站名称。

通常实现的方法是，将俱乐部的名称和网站名称定义成公共组件，在每个页面都书写置顶的布局，并引入响应的公共组件。

显然这是非常低效的，通过全局布局 vite-plugin-vue-layouts 可以帮你解决这个麻烦！

友情提示：
vite-plugin-vue-layouts 通常是配合 unplugin-vue-router 一起使用的！

使用流程

1. 安装 vite-plugin-vue-layouts

npm i -D vite-plugin-vue-layouts

2. vite 配置中导入

vite.config.ts

import Layouts from 'vite-plugin-vue-layouts'

plugins 中添加 Layouts

  plugins: [// VueRouter  必须在 vue() 之前VueRouter({}),Layouts({layoutsDirs: 'src/layouts', // 指定布局文件的目录路径defaultLayout: 'default' // 指定默认布局文件的名称}),vue(),vueJsx(),vueDevTools()],

3. 添加类型声明

env.d.ts

/// <reference types="vite-plugin-vue-layouts/client" />

4. 改造路由配置

• 引入 setupLayouts
• 用 setupLayouts() 包裹原路由

src/router/index.ts 的最终效果如下：

import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes'
import { setupLayouts } from 'virtual:generated-layouts'const router = createRouter({history: createWebHistory(),routes: setupLayouts([...routes,// 自定义配置路由 /test ，访问文件 src/views/test.vue{path: '/test',component: () => import('@/views/test.vue')}])
})
export default router

5. 创建布局模板

新建文件 src/layouts/default.vue

<template><div>网站标题</div><router-view></router-view>
</template>

新建文件 src/layouts/ECclub.vue

<template><div>EC编程俱乐部</div><router-view></router-view>
</template>

6. 页面中指定布局模板

src/pages/about.vue

<template><div>关于EC俱乐部</div>
</template><route lang="yaml">
meta:layout: ECclub
</route>

• 在目标页面底部参考上方范例新增 route 标签
• layout 的值设定为目标布局模板名称即可！

因在配置中，指定了默认布局模板为 default，所以所有未指定布局模板的页面，都会使用 src/layouts/default.vue 中的布局。

最终效果如下：

• 路由 /

网站标题
首页

• 路由 /about

EC编程俱乐部
关于EC俱乐部

更多配置和用法见官网

https://www.npmjs.com/package/vite-plugin-vue-layouts