快站是营销团队赋能业务团队快速搭建页面的内部工具。业务无需掌握技术，通过简单拖动和信息填写即可完成网页制作。
功能强大而又兼顾灵活性的页面制作平台，快站有许多精妙的设计和约定。这也给开发入门带来了一定挑战，如果不能从全局理解它的运作过程，就容易陷入盲人摸象的境地。这里根据自己开发两个组件的经历和理解做简单梳理，如有不对还请斧正。
从整体结构看，项目主要有两部分组成：admin和freemarker——admin也叫编辑器，面向页面制作者（生产者，后台，对内），用来在PC端拼出页面；freemarker面向页面的访问者（消费者，前台，对外），一般在客户端打开。开发一个组件，一般要同时开发两个部分。
从技术选型看，admin部分使用vue技术栈，freemarker部分使用freemarker模板引擎和vue。
开发一个组件，最重要了解的是编辑器（editor）部分。也是这里着重介绍的部分。组件分为基础组件、业务组件和组合组件。灵活度依次递减、复杂度递增。
admin部分
从左侧组件面板选择组件拖入中间的编辑面板，就在页面中增加一个组件。点击选中组件，右边的属性面板就会出现该组件可以设置的所有属性。
组件（widget）
每个组件对应 \admin\src\pages\editor\widgets 下的一个目录，里面包含组件的所有代码，是组件开发的主战场。快站已经帮我们实现了大量共用功能，把特定部分抽离出来，独立成组件的形式，这样通过简单的配置和业务逻辑代码编写，就可以完成对组件功能的描述。但这同时也是大量约定和隐喻的开始…
最常见的组件由init.js、index.vue和validate.js文件组成，
- init.js 描述组件有哪些属性字段、和默认值（右侧属性面板）
- index.vue 描述组件的结构，可视化效果（中间的编辑面板）
- validate.js 定义格式校验规则
admin中实时预览的实现，是通过右边属性面板调节config中各属性字段的值，驱动编辑面板的视图改变，可见init.js是很重要的一环，它连接了数据和视图。
本想把init.js配置文件的字段意义整理成文档，但目前数据结构变动还比较大，所以只梳理关键字段：
1 | { |
除了暴露默认的配置对象外，init.js 还暴露dependence用于描述组件依赖，和rules用于描述简单的（非空、格式校验）校验规则，更为复杂的（业务逻辑相关）自定义校验，则可以在validate.js中暴露的validator方法来定义。
属性单元（type）
type是设置属性值的最小单元，比如颜色选择器、数值选择器，如果这些基础的type无法满足要求，比如有联动的属性，也可以自定义type。文件目录在 admin\src\pages\editor\types
从某种意义上可以将属性控制单元（types）视作controler，组件目录内的init.js视作model、index.vue视作view。
使用admin通过组件拼装好页面后，将各个组件的config放入数组，保存数据库中，后续可以返回给admin继续编辑，或者供freemarker渲染页面。
freemarker部分
Freemarker是一个java模板引擎，快站用它来实现服务端页面渲染。更合适的方案可能是VUE的SSR模块，但由于目前服务端还没使用NodeJS，这部分工作还是由后端完成。
这部分的约定主要是*.pure.(html|js|css)的文件，是不含freemarker语法，可以压缩的，所以出于性能优化和语法高亮考虑，应该考虑尽量把代码写到pure文件中。
案例展示
截止目前，快站已经输出许多活动页面，感兴趣可以通过 热门活动查看 ，其中URL以 https://b.pingan.com.cn/kuaizhan 开头的页面，由快站制作。
