## 相关视频
* B站视频:[模块前端异步加载策略](https://www.bilibili.com/video/BV1pd4y1Q76z/?vd_source=8a2b870d6d5dc83f8f4b973c95613fd8)
* B站视频:[前端页面跳转](https://www.bilibili.com/video/BV1Hd4y1S7Pj/?vd_source=8a2b870d6d5dc83f8f4b973c95613fd8)
* B站视频:[页面结构与页面打开方式](https://www.bilibili.com/video/BV1d34y1J7kS/?vd_source=8a2b870d6d5dc83f8f4b973c95613fd8)
* B站视频:[前端组件异步使用](https://www.bilibili.com/video/BV1rG411H7Qz/?vd_source=8a2b870d6d5dc83f8f4b973c95613fd8)
## 介绍
EggBornJS的`页面组件`也是`组件Component`,除了拥有`组件Component`的全部特性之外,对组件的Dom结构进行了约定:
1. 页面组件的根节点必须是`eb-page`,这是实现`pc=mobile+pad`跨端自适应布局的基石
## 页面组件定义
请参考`Vue组件`的用法
``` html
```
## Dom节点
| 名称 | 是否必须 | 说明 |
|----|----|----|
| eb-page | 是 | 页面组件的根节点,是实现`pc=mobile+pad`跨端自适应布局的基石 |
| eb-navbar | 否 | 页面组件的导航节点 |
| f7-nav-right | 否 | 在导航节点的后侧渲染内容,一般是`按钮`或者`链接` |
* eb-page:在Framework7的f7-page组件的基础上改造而来,参见:[f7-page](https://v5.framework7.io/vue/page)
* eb-navbar:在Framework7的f7-navbar组件的基础上改造而来,参见:[f7-navbar](https://v5.framework7.io/vue/navbar)
## meta元数据
`页面组件`可提供`meta`元数据,以便标示`页面组件`的行为
``` javascript
meta: {
size: 'small',
sizeFixed: false,
title: 'page title',
},
```
| 名称 | 缺省值 | 说明 |
|----|----|----|
| size | small | 页面组件的显示尺寸,有三种选择:`small/medium/large` |
| sizeFixed | false | 页面组件设置的`size`一般作为参考尺寸,也就是说,系统会根据页面的实际尺寸对`size`做调整。如果要将`size`固定,就需要将`sizeFixed`设置为`true` |
| title | | 页面组件的标题,主要用于`PC`模式下顶部`Tabs导航栏`的文本显示。一般不用设置,系统会自动从`eb-navbar`节点获取标题 |
## 如何创建页面组件
可以使用Cli命令创建页面组件,并且自动添加页面组件的路由记录
``` bash
$ cd /path/to/project
# 创建.vue页面
$ npm run cli :create:page
# 创建.jsx页面
$ npm run cli :create:pagex
```