视图骨架

App/Layouts/Page 三者设定与关系

Oiyo 提供三大视图结构，让定义视图的能力最大化！

根层（App.vue）

Oiyo 让 App.vue 作为入口，使得每一个路由都会拥有其 模板（template） 的内容。

src/App.vue

<template>
  <view>
    <text>hey there! love from oiyo ❤</text>
    <OiyoPage />
  </view>
</template>

了解更加深入的根层指南

布局是嵌套在根层下的共享容器，作为承载页面的骨架，负责包裹并统一各业务页面的公共视图。与组件相同，其通过组件来显示页面内容的，默认情况下将使用 src/layouts/default.vue 文件。支持通过可以设置为页面元数据进行配置。

<template>
  <view>
    <text>hey there! love from oiyo ❤</text>
    <OiyoLayout>
      <OiyoPage />
    </OiyoLayout>
  </view>
</template>

<template>
  <view>
    <DefaultNavbar />
    <slot />
  </view>
</template>

<template>
  <view>
    <text>对喽！这就是主页</text>
  </view>
</template>

如果你只有单一布局，并且功能较为简单，我们更加推荐直接放在 src/App.vue

了解更多关于布局的使用

页面代表每个路由的视图。src/pages/ 目录中的每个 Vue 文件都代表一个不同的路由，Oiyo 会自动注册这些路由，支持多层文件夹。

src/pages/index.vue

<template>
  <view>
    <text>没错！这儿就是主页</text>
  </view>
</template>

了解更多关于路由的信息

配置

Oiyo 配置内部已设定了合理的默认配置，开箱即用

页面路由

基于文件系统的路由视图层