README.zhCN.md

vite-plugin-slots-layouts

Vite 中 Vue 3 的基于插槽的布局系统 WIP

English | 简体中文

安装

pnpm i -D vite-plugin-slots-layouts

使用

// vite.config.ts
import { defineConfig } from "vite";
import Layout from "vite-plugin-slots-layouts";

export default defineConfig({
  plugins: [Layout()],
});

在 main.ts 中需要导入生成的代码并调用 app.use()

// main.ts
import App from "./App.vue";
import layouts from "virtual:slots-layouts";
const app = createApp(App);

app.use(layouts);

客户端类型

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

配置

查看 types.ts

布局块

使用布局块可以设置页面的布局

<layout name="blog" disabled lang="jsonc">
{
  ":isPost": false,
  "v-bind": "obj",
  "@change": "handleLayoutChange"
}
</layout>

属性

• name: 设置布局
• disabled: 禁用布局

内容

内容是 JSON 字符串, 可以使用 Vue 支持的模板语法

<layout-blog
  :isPost="false"
  v-bind="obj"
  @change="handleLayoutChange"
></layout-blog>

原理

注册 layout 文件夹的组件

• blog/index.vue
  • component: <layout-blog/>
  • layout: blog
• blog/header-and-footer.vue
  • component: <layout-blog-header-and-footer/>
  • layout: blogHeaderAndFooter

读取页面中的 layout-block

<layout name="blog"></layout>

替换页面的 template 并使用布局组件包裹

之前:

<!-- default.vue -->
<template>
  <slot />
  <slot name="footer"> default footer </slot>
</template>

<!-- page.vue -->
<template>page</template>
<template #footer>footer</template>
<script lang="ts" setup>
  ...
</script>

之后:

<template>
  <layout-default>
    <template #default>page</template>
    <template #footer>footer</template>
  </layout-default>
</template>
<script lang="ts" setup>
  ...
</script>

这意味着你可以完全灵活地使用插槽 API。