应用骨架

在 App.vue 中组织应用外壳、布局入口和页面渲染入口

应用骨架指 App.vue 中的顶层结构，负责组合应用外壳、布局入口和页面渲染入口，不负责页面业务逻辑和布局细节。

能力定位

在 Oiyo 项目中通常负责：

  • 放置当前页面渲染入口。
  • 挂载布局系统入口。
  • 组织所有页面共享的应用外壳。
  • 承载少量应用级展示区域。
  • 作为根上下文的定义位置。

应用骨架

应用骨架决定页面渲染在哪里发生，以及页面外层有哪些所有页面共享的结构。

页面入口

OiyoPage 作为渲染当前页面的入口组件：

src/App.vue
<template>
  <OiyoPage />
</template>

共用布局

OiyoLayout 是当前布局组件的渲染入口，通常把 OiyoPage 放进 OiyoLayout 中：

src/App.vue
<template>
  <OiyoLayout>
    <OiyoPage />
  </OiyoLayout>
</template>
了解布局如何选择、布局文件如何定义、页面如何声明布局。

应用级区域

可以放少量应用级展示区域以及应用级共享状态，例如应用标题、应用主题、应用弹窗等。

src/App.vue
<template>
  <ConfigProvider>
    <NavBar />
    <OiyoLayout>
      <OiyoPage />
    </OiyoLayout>
    <TabBar />
   
    <Toast v-if="isShow" />
  </ConfigProvider>
</template>

应用骨架模板中使用的变量和方法应来自根上下文。

了解根上下文的定义和使用。

不应该放什么

不建议在 App.vue 中放：

  • 单个页面的业务逻辑。
  • 单个页面的局部状态。
  • 某类页面才需要的布局结构。
  • 页面自己的生命周期逻辑。
  • 复杂业务状态。

这些内容应该分别放到页面或布局中。

验证可用

检查：

  1. App.vue 是否存在 <OiyoPage />。
  2. 使用布局系统时，<OiyoPage /> 是否放在 <OiyoLayout> 内部。
  3. 应用级 UI 是否处于页面渲染入口外部。

全局页面配置

用 definePagesConfig 维护 pages.json 全局性的页面默认配置

根上下文

用 defineRootContext 和 useRootContext 共享和使用根状态