vite-plugin-ymir-layouts

使用 vite 为尤弥尔应用添加路由布局。

总览

布局是放在 /src/layouts 文件夹中的Vue组件，在布局组件中使用 <router-view> 插槽，在布局中显示路由页面内容。

不指定布局的页面将使用尤弥尔内置布局组件，或者使用 /src/layouts/default.vue 定义的默认布局（defualt.vue 优先级高）。

我们在定义页面时可以指定其他的布局。例如以下示例页面使用 /src/layouts/users.vue 布局。

<script setup lang="ts">
definePage({
  meta: {
    layout: 'users'
  },
})
</script>

如果页面不想应用任何布局，则可以这样定义：

<script setup lang="ts">
definePage({
  meta: {
    layout: false,
    // 或者：
    skipLayout: true,
  },
})
</script>

开始

安装布局插件：

pnpm install -D @ymir-labs/vite-plugin-ymir-layouts

然后在你的 vite.config.ts 中添加配置。如下所示：

import Vue from '@vitejs/plugin-vue'
import VueRouter from 'unplugin-vue-router/vite'
import Layouts from '@ymir-labs/vite-plugin-ymir-layouts'

export default {
  plugins: [Vue(), VueRouter(), Layouts()]
}

在 main.ts 中，可以获取到这些布局：

import { layouts } from 'virtual:generated-layouts'
import { setupApp } from '@ymir-labs/pro/setup'
import { routes as autoRoutes } from 'vue-router/auto-routes'
import App from './App.vue'

setupApp(App, { routes, layouts })

TypeScript 类型

如果你想要得到 virtual:generated-layouts 类型定义，将 @ymir-labs/vite-plugin-ymir-layouts/client 添加到 tscnofig.json 的 compilerOptions.types 中：

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

定义布局组件

布局组件放在 /src/layouts 目录中，组件名称与布局名称一致，如 /src/layouts/ohter.vue 定义了一个名为 other 布局。

在布局组件中，使用 <router-view> 插槽，显示路由对应的页面内容。

例如定义一个 other 布局，/src/layouts/other.vue 文件的内容示例：

<template>
  <div class="other-layout">
    <header>头部区域</header>
    <section>
      <router-view />
    </section>
    <footer>页脚区域</footer>
  </div>
</template>

如果需要添加页面切换动效，可以按照 vue-router 官网提供的方式实现。例如：

<template>
  <div class="other-layout">
    <header>头部区域</header>
    <section>
      <router-view v-slot="{ Component }">
        <transition>
          <component :is="Component" />
        </transition>
      </router-view>
    </section>
    <footer>页脚区域</footer>
  </div>
</template>