一般项目分成三种开发模式：
第一种是单页面单路由开发，不涉及路由改变，前后端分离与否都没关系，常见于简单活动页开发
第二种是多页面前后端不分离的，适用旧项目，常见于复杂的活动页开发
第三种是多页面前后端分离的，建议引入 react-router , mobx 做管理，常见于APP内嵌的大型产品页
该工具支持前两种模式开发。
为了能在多个项目内更好的共享该工具的必需插件部分，使用 npm run ui 能把 react, react-dom, babel-polyfill, whatwg-fetch 和 sanyuequi 打包到 /dev/common去，该文件大约在 300K 左右，通过 gzip 压缩大约在 100K 左右。建议把该文件放置在 CDN 上，把线上链接填写在 config.json 的 common 字段去。
由于该工具�是面向传统的前后端不分离项目的，因此在 config.json 的 routers 字段可以配置多个路由信息，其中 name 表示该页面的 title ，而 template 是里面组件的类名，所以命名规则必须符合 javaScript 的规范，但没必要开头字母大写（会自动开头字母大写），同时该字段还是路由名字，可以通过该路由名字在开发的时候查看当前页面的情况�。
通过 npm run router 能�为了检测开发目录下 /app/router 是否创建了该路由的相关工程文件，没有的话会自动创建。
当执行 npm run dev 的话，会自动执行npm run router 的功能，�然后�会�打开 当前IP: 8080 的网址。可以通过在 config.js 里面
template 字段来查看不同页面的实时开发情况。
在 /app/router/�xxx 下，每一个路由都会有四个文件。
index.js 是入口程序，�一般不用修改。
index.html 是�和后端对接的 html 文件，如果有什么需要和后端一开始就需要获取的数据，这样在这里设置一个全局变量让后端通过模版泻进来。
css.css 和 router.js 用于编写页面代码。
而通用的配置文件应该放在 app/config 下。
当执行 npm run dep 的话，会先删除旧的 build目录，创建新的build目录，并且把打包文件写进去。
整个框架的基础，所有元素都可以用它来替代。
在CSS上对它进行了一些设置，这些设置都是移动端上不需要的：禁止了选择，使用合理的盒子模型以及取消了点击高亮的情况。
user-select: none;
box-sizing: border-box;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);在JS上也进行了一些封装。使用它的时候很简单只需要传入以下属性去使用即可
| 参数名字 | 值类型 | 默认值 | 说明 | 是否必需 |
|---|---|---|---|---|
| className | string | null | 该组件的样式类名 | 否 |
| id | string | null | 节点ID属性 | 否 |
| style | object | null | 该组件的样式属性 | 否 |
| tap | func | null | 点击事件 | 否 |
| touchStart | func | null | 触摸开始事件 | 否 |
| touchMove | func | null | 触摸移动事件 | 否 |
| touchEnd | func | null | 触摸结束事件 | 否 |
| touchCancel | func | null | 触摸取消事件 | 否 |
| transitionEnd | func | null | 过渡动画结束事件 | 否 |
| animationStart | func | null | CSS 动画开始事件 | 否 |
| animationIteration | func | null | CSS 动画重复播放事件 | 否 |
| animationEnd | func | null | CSS 动画结束事件 | 否 |
| getRef | func | null | 获取DOM节点 | 否 |
| contextMenu | func | null | 上下文菜单事件 | 否 |
整个 App 组件是覆盖我们浏览器的可视窗口并且是不可滚动的，该组件是整个页面的 root ，使用这个组件会对浏览器作出一些限制和帮助。
为了统一所有浏览器下的滚动以及避免一些浏览器下原生滚动的一些缺陷，我们舍弃了浏览器原生的滚动，这意味着你需要引入我们提供的 ScrollView ： 舍去原生的滚动功能，引入用一个相对耗费性能的组件来取代，这样我们能更好的滚动以及更好的控制滚动。
| 参数名字 | 值类型 | 默认值 | 说明 | 是否必需 |
|---|---|---|---|---|
| noSysScroll | bool | true | 是否禁止系统的滚动 | 否 |
引入了 App 组件之后，我们可以使用一些预设的提示样式，只要访问全局对象 window.Qapp 即可使用。（需要注意的是，这些预设函数涉及到 dom 节点的生成，所以必须在 componentDidMount 下使用）
由 showLoad(object) 和 hideLoad()来控制出现和消失。
object 参数
| 名字 | 值类型 | 默认值 | 说明 | 是否必需 |
|---|---|---|---|---|
| content | string | "加载中" | 加载遮罩提示文字 | 否 |
| maskColor | string | 'rgba(0, 0, 0, 0)' | 遮罩层背景颜色 | 否 |
由 window.Qapp.showToast(object) 来控制出现，在指定时间之后消失。
object 参数
| 名字 | 值类型 | 默认值 | 说明 | 是否必需 |
|---|---|---|---|---|
| content | string | null | 提示文字 | 是 |
| theme | number | 0 | 主体（黑底白字 0/白底黑字 1） | 否 |
| time | number | 2000 | 指定xx毫秒消失时间 | 否 |
由 window.Qapp.showAlert(object) 来控制出现，在用户操作后消失。
object 参数
| 名字 | 值类型 | 默认值 | 说明 | 是否必需 |
|---|---|---|---|---|
| content | string | null | 提示文字 | 是 |
| title | string | null | 标题 | 否 |
| maskColor | string | 'rgba(0, 0, 0, 0)' | 遮罩层背景颜色 | 否 |
| rightButton | object | {event: null,name: '确认',color: '#09BB07'} | 右边按钮 | 否 |
| leftButton | object | null | 左边按钮 | 否 |
该组件是为了更好的滚动而存在的，在使用它之前请确认根组件是 noSysScroll:true 的 App 组件。
需要注意的是该组件，必须设定宽高（横向滚动需要设置宽度，纵向滚动需要设置高度）。
由于 ScrollView 继承 View 所以View组件的属性，它都可以使用，以下列举的是它自身独有的属性。
| 参数名字 | 值类型 | 默认值 | 说明 | 是否必需 |
|---|---|---|---|---|
| scrollbars | bool | true | 是否出现滚动条 | 否 |
| direction | string | 'column' | 滚动方向(row/column) | 否 |
| bounce | bool | true | 滚动到边界回弹 | 否 |
| beforeScrollStart | func | null | 滚动开始前执行事件 | 否 |
| scrollStart | func | null | 滚动开始执行事件 | 否 |
| scroll | func | null | 滚动中执行事件 | 否 |
| scrollEnd | func | null | 滚动结束执行事件 | 否 |
| scrollCancel | func | null | 滚动取消执行事件 | 否 |
| getScrollControl | func | null | 返回一个可控制滚动的函数 | 否 |
| mustScroll | bool | false | 和bounce配合使用，在子元素不满一页的情况下是否还能启用滚动 | 否 |
ListView 为 ScrollView 的拓展。主要是为了需要使用下拉刷新，到底加载更多这些功能而存在的。目前只支持 column 方向。
| 参数名字 | 值类型 | 默认值 | 说明 | 是否必需 |
|---|---|---|---|---|
| Item | node | null | 子节点组件 | 是 |
| itemProp | object | null | 子节点组件属性 | 否 |
| itemKey | any | null | 子节点组件 key 属性 | 是 |
| dataSource | array | null | 数据源 | 是 |
| topRefreshControl | object | null | 下拉刷新组件样式 | 否 |
| topRefresh | func | null | 下拉刷新执行事件 | 否 |
| bottomRefresh | func | null | 上拉到底执行事件 | 否 |
| bottomRefreshControl | object | null | 上拉到底组件样式 | 否 |
| Header | node | null | 头部组件 | 否 |
| headerProp | object | null | 头部组件属性 | 否 |
| layoutClassName | string | null | 列表层样式类名 | 否 |
| className | string | null | 滚动层样式类名 | 否 |
Text和View很像，但是它不会响应任何事件，只是用于文字的展示，而且也不能嵌套使用。但如果需要长按复制的文字，就使用Text标签。（注：部分安卓浏览器无法禁止长按复制文字）
继承自 View组件，为了方便点击时候样式切换而存在的。
| 参数名字 | 值类型 | 默认值 | 说明 | 是否必需 |
|---|---|---|---|---|
| tapClassName | string | null | 点击时候样式 | 否 |
#开发规范
- 每个组件的简单使用
ScrollView的几种排列样式- 传统多页面开发
- 单页面开发
- Swiper
- Image