| | |
|---|
| | | - fetchers/（请求层目录） |
|---|
| | | - FName.js（请求集） |
|---|
| | | - pages/（界面层目录） |
|---|
| | | - pageGroup/ |
|---|
| | | - pageName/ |
|---|
| | | - cmpt/（页面子组件目录） |
|---|
| | | - pageGroup/（界面层分组目录） |
|---|
| | | - pageName/（界面层单页目录） |
|---|
| | | - cmpt/（界面子组件目录） |
|---|
| | | - CName.vue（子组件） |
|---|
| | | - cName.scss（组件样式） |
|---|
| | | - page.vue（页面） |
|---|
| | | - page.scss（页面样式） |
|---|
| | | - cName.scss（子组件样式） |
|---|
| | | - page.vue（界面） |
|---|
| | | - page.scss（界面样式） |
|---|
| | | - pilots/（数据控制层目录） |
|---|
| | | - _overall/（全局数据控制目录） |
|---|
| | | - pilotGroup/ |
|---|
| | | - pilotGroup/（数据控制层分组目录） |
|---|
| | | - mixin/（混合件目录） |
|---|
| | | - MName.js（混合件） |
|---|
| | | - PName.js（数据控制器） |
|---|
| | |
|---|
| | | |
|---|
| | | 当我们说组件的时候，就是指普通 Vue 组件 |
|---|
| | | |
|---|
| | | 当我们说业务页面的时候，则是由**页面层**和**数据控制层**两部分组成 |
|---|
| | | 当我们说业务页面的时候，则是由**界面层**和**数据控制层**两部分组成 |
|---|
| | | 同时页面层有子组件，数据层关联请求层，结构如下 |
|---|
| | | |
|---|
| | | * 业务页面： |
|---|
| | | - 页面层（root/src/pages/pageGroup/pageName/page.vue） |
|---|
| | | - 子组件（root/src/pages/pageGroup/pageName/cmpt/CName.vue） |
|---|
| | | - 界面层（root/src/pages/pageGroup/pageName/page.vue） |
|---|
| | | - 界面子组件（root/src/pages/pageGroup/pageName/cmpt/CName.vue） |
|---|
| | | - 数据控制层（root/src/pilots/pilotsGroup/PName.js） |
|---|
| | | - 请求层（root/src/fetchers/FName.js） |
|---|
| | | |
|---|
| | | ### 页面拆分 |
|---|
| | | |
|---|
| | | 一个业务页面的页面层和数据控制层，实际上是对一个 Vue 组件的拆分，最终运行的时候，还是会合二为一，还原成原本的 Vue 实例 |
|---|
| | | 因此，数据控制层其实是对这个 Vue 实例部分功能，进行拆分的一种转写，类似于语法糖 |
|---|
| | | 一个业务页面的界面层和数据控制层，实际上是对一个 Vue 组件的拆分，最终运行的时候，还是会合二为一，还原成原本的 Vue 实例 |
|---|
| | | 因此，数据控制层其实是对这个 Vue 实例部分功能的一种转写，类似于语法糖 |
|---|
| | | |
|---|
| | | #### 数据控制层写法 |
|---|
| | | |
|---|
| | |
|---|
| | | |
|---|
| | | 注意：数据控制器中不能使用 $name、$components、$methods 这三项，因为实际合并时会覆盖 |
|---|
| | | |
|---|
| | | ## 新页面模板 |
|---|
| | | ## 新页面示例 |
|---|
| | | |
|---|
| | | 新建页面时，可使用如下空白页面模板 |
|---|
| | | 新建页面时，页面初始内容，可参考如下空白示例 |
|---|
| | | |
|---|
| | | ### 页面层 |
|---|
| | | ### 界面层 |
|---|
| | | |
|---|
| | | #### H5 空白页面示例 |
|---|
| | | #### H5 空白界面示例 |
|---|
| | | |
|---|
| | | H5 页面需要 CPage、CContent、CNavBar 这三个基础页面组件 |
|---|
| | | H5 界面需要 CPage、CContent、CNavBar 这三个基础页面组件 |
|---|
| | | |
|---|
| | | ```html |
|---|
| | | /** |
|---|
| | |
|---|
| | | </script> |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | #### 小程序空白页面示例 |
|---|
| | | #### 小程序空白界面示例 |
|---|
| | | |
|---|
| | | ```html |
|---|
| | | /** |
|---|
| | |
|---|
| | | |
|---|
| | | ```js |
|---|
| | | /** |
|---|
| | | * FCommon |
|---|
| | | * FCommon - 公用请求集 |
|---|
| | | * @author 作者 |
|---|
| | | */ |
|---|
| | | |
|---|
