gear is a framework developed by vue 2.0, you can produce ideas here and learn vue2, vuex, vue-router, webpack and so on!
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
config
data
dist
rollup
src
static
test
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.postcssrc.js
README.md
app.js
index.html
logo.psd
package.json

README.md

GEAR

Gear意为齿轮,本项目主要是从渲染层提供一种业务开发新思路。

前端框架有很多种,我自己将所有的前端框架分为两类:开发类框架和业务类框架。GEAR正是为业务而生。前端的生命线莫过于网页的加载与渲染。Gear主要从加载和渲染的角度来提供业务开发的工作流,它分为两种模式:制作页面和渲染页面。

制作页面模式: Gear会加载配置好的组件库,同时页面会进入编辑模式,用户可以编辑页面,可以改变展示形态。

渲染页面模式:Gear会加载设计好的数据模型展示渲染页面。这部分会对性能和接口做出对应优化。

Gear整体的思想是一种前端开发解决方案,采用它可以最大程度降低开发成本,提升开发效率,加速迭代业务的开发,这是一种整体的战略布局,借助Gear编辑和渲染一体化的平台,大家可以做的事情很多,前端开发同学可以一边歇歇了!

试用地址:http://gear.haomou.net/dist/#/project

GIT: https://github.com/chalecao/gear

喜欢给我点亮星星哦!

介绍

整体的设计思想:(Gear工作流程图如下)

项目中集成的思路,主要分两种:

  1. 直接集成到项目中,采用Gear来渲染项目页面
  2. 导出HTML/CSS/JavaScript代码到项目中,项目中保留原有渲染方式

上面这两种方式Gear都可以做到,我之前的思路也一直是导出代码的方式,例如我做的工具CMP(https://github.com/chalecao/cmp ),基本就是导出代码的思想,后来在实际工作中发现会有很多人工维护的工作成本,所以不建议采用这种导出代码的方式。

集成到项目中的使用方式比较推荐,有很多可以优化的工作,比如页面加载速度的提升,页面渲染效率的提升,甚至还支持页面热修复(妈妈再也不用担心我在半夜修bug了)。

用户群体

Gear面向用户群体:策划,交互,视觉,运营甚至是开发同学。Gear系统比较适合做运营活动、营销页面,支持线上即时修改、即时效果预览、即时发布等特性。

Gear的学习成本比较低,策划和交互基本不用学习就能用Gear做出交互原型,视觉可以在Gear平台上补充视觉内容,最后如果功能不是很复杂,运营同学只要学习如何补充业务逻辑(当然后端接口采用通用数据接口),然后发布上线就可以了。这个闭环是不是很漂亮,开发哥哥们都乐了。

基于Gear的工作流程如下:

直接在线使用,所有数据默认保存在本地,也可以将数据导出分享给他人或者备份。

约定

1.元素可编程属性

programTxt属性指定了可编程字段,格式: special.src

2.绑定事件 在action属性中操作,数据格式如下:

click@searchTerm(form-termId)>searchTable

其中:事件名: click

关联元素名称(kid): searchTerm

参数关联元素名称(kid): form-termId

回调数据处理接收关联元素: searchTable (根据可编程属性来关联返回值)

使用方法

可以参考dist目录中标准示例,默认不开启编辑模式,开启编辑模式方式:按住ctrl键 + body上点击鼠标左键,打开编辑模式的快捷键支持自定义。

todo list

  1. 单页系统由于Gear本身占用了HASH,所以SPA的支持采用HASH后面加query参数,这样需要Gear类处理这些参数

特性

  1. 新增Cache元素类型,用于处理请求
  2. 新增Action元素类型,用于处理数据,目前采用JS代码处理,类似管道操作,可以用于对接数据字段名称,是的接口的结果和关联元素的关联返回值一致。
  3. 新增函数类型,函数目前支持For和If,可以用来处理一些逻辑。
  4. 嵌套层级结构支持。
  5. 页面级别组件和通用组件支持。可以直接被引用。
  6. 增加单页(SPA)支持, 在页面组件栏目中可以创建多个page类型页面