---
|
description:
|
globs:
|
alwaysApply: true
|
---
|
|
# 项目介绍
|
|
## 工程介绍
|
|
这是一套Web前端开发的工程文档，用于指导移动端（H5网页、混合App、小程序等）的开发
|
|
## 技术栈
|
|
- 语法框架：Vue（v2.5.0）
|
- 工程框架：Taro（v3.2.13）
|
- 显示框架：Taro-UI-Vue（v1.0.0-beta.10）
|
- 样式：Sass
|
|
说明：使用时，优先使用公共组件库的组件，其次是 Taro-UI-Vue 的组件，最后才是 Taro 本身的基础元素组件
|
|
## 工程目录结构
|
|
工程主要目录及其用途
|
|
- root/（根目录）
|
- public/（静态资源目录）
|
- src/（开发源码目录）
|
- components/（公共资源目录）
|
- bases/（公共基类目录）
|
- common/（公共工具目录）
|
- forms/（公共表单组件目录）
|
- layout/（公共排版组件目录）
|
- plugins/（公共复杂组件目录）
|
- fetchers/（请求层目录）
|
- FName.js（请求集）
|
- pages/（界面层目录）
|
- pageGroup/（界面层分组目录）
|
- pageName/（界面层单页目录）
|
- cmpt/（界面子组件目录）
|
- CName.vue（子组件）
|
- cName.scss（子组件样式）
|
- page.vue（界面）
|
- page.scss（界面样式）
|
- pilots/（数据控制层目录）
|
- _overall/（全局数据控制目录）
|
- pilotGroup/（数据控制层分组目录）
|
- mixin/（混合件目录）
|
- MName.js（混合件）
|
- PName.js（数据控制器）
|
|
### 目录解释
|
|
- **公共资源目录**：移动端所有项目公用，使用 git 子模块跨项目同步
|
- **界面层**：包含界面和子组件，界面子组件是对整个逻辑流程的单个节点的封装（TODO：界面拆分原理）
|
- **数据控制层**：包含数据控制器和混合件，混合件是数据控制器代码片段共享的一种设计（非vue混入）
|
- **请求层**：请求层中的单个文件是请求集，一个请求集存放某个类型业务的所有请求的集合
|
|
### 短路径映射
|
|
工程资源引用时，通常使用更短的引用路径：
|
|
* `@components` 代表 `root/src/components`
|
* `@fetchers` 代表 `root/src/fetchers`
|
* `@pages` 代表 `root/src/pages`
|
* `@pilots` 代表 `root/src/pilots`
|
|
例如：'@components/layout/h5Page' 实际引用的是 'root/src/components/layout/h5Page'
|
|
|
## 页面构成
|
|
### 页面定义
|
|
当我们说页面的时候，不是普通的 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 实例部分功能的一种转写，类似于语法糖
|
|
**数据控制层写法**
|
|
例如：
|
|
```js
|
// 数据控制器
|
export class PIndex extends Pilot {
|
$data() {
|
return {
|
a: 1,
|
};
|
}
|
$computed = {
|
a2() {},
|
};
|
$mounted() {}
|
onOpenSelector() {}
|
}
|
```
|
|
会转换成
|
|
```js
|
// 标准 Vue
|
const Component = Vue.extend({
|
data() {
|
return {
|
a: 1,
|
};
|
},
|
computed: {
|
a2() {},
|
},
|
methods: {
|
onOpenSelector() {},
|
},
|
mounted() {},
|
});
|
```
|
