uniapp 中使用 layout 页面

Vite 下 uni-app 的可定制布局框架

此插件必须配合 上文提供的 uni-pages 否则单独使用不管用

安装

pnpm i -D @uni-helper/vite-plugin-uni-layouts

配置

vite.config.ts 或者.js

// vite.config.ts
import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import uni from "@dcloudio/vite-plugin-uni";
import UniPages from "@uni-helper/vite-plugin-uni-pages";
import UniLayouts from "@uni-helper/vite-plugin-uni-layouts";
// https://vitejs.dev/config/
export default async () => {
  const UnoCSS = (await import("unocss/vite")).default;
  return defineConfig({
    plugins: [
      uni(),
      UnoCSS(),
      UniPages(),
      UniLayouts(),
      AutoImport({
        imports: ["vue", "uni-app", "pinia"],
        dts: true,
        eslintrc: { enabled: true },
      }),
    ],
  });
};

布局

创建 src/layouts 目录

• 然后在下面创建两个文件

(1) default.vue

(2) demo.vue

这两个作为布局容器

使用

在 pages 页面里面指定页面用哪个 layout

• 指定 demo

<route type="page" lang="json">
{
  "style": { "navigationBarTitleText": "侧腰" },
  "layout": "demo"
}
</route>

• 指定 default

<route type="home" lang="json">
{
  "style": { "navigationBarTitleText": "首页" },
  "layout": "default"
}
</route>