厌倦了写活动页？快来撸一个页面生成器吧！
前言
如果你经常接触一些公司的活动页，可能会经常头疼以下问题：这些项目周期短，需求频繁，迭代快，技术要求不高，成长空间也小。但是我们还是马不停蹄的赶着产品提来的一个个需求，随着公司规模的增加，我们不可能无限制的增加人手不断地重复着这些活动。这里我就不具体介绍一些有的没的的一些概念了，因为要介绍的概念实在太多了，作为一个前端的我们，直接上代码撸就好了！！！！
想要了解更多，也欢迎访问：
目标
我们的目标是实现一个页面制作后台，在后台中我们可以对页面进行 组件选择 --> 布局样式调整 --> 发布上线 --> 编辑修改这样的流程操作。
架构设计
首先是要能提供组件给用户进行选择，那么我们需要一个组件库，然后需要对选择的组件进行布局样式调整，所以我们需要一个页面编辑后台接着我们需要将编辑产出的数据渲染成真实的页面，所以我们需要一个node服务和用于填充的template 模板。发布上线，这个直接对接各个公司内部的发布系统就好了，这里我们不做过多阐述。最后的编辑修改功能也就是针对配置的修改，所以我们需要一个数据库，这里我选择的是用了mysql。当然你也可以顺便做做权限管理，页面管理....等等之类的活。
啰嗦了这么长，我们来画个图，了解下大概的流程：
<img src="https://user-gold-cdn.xitu.io...;h=942&f=png&s=121824">
开撸
组件的实现
首先我们来实现组件这一部分，因为组件关联着后台编辑的预览和最后发布的使用。组件设计我们应该尽量保持组件的对外一致性，这样在进行渲染的时候，我们可以提供一个统一的对外数据接口。这里我们的技术选型是基于 Vue 的，所以下面的代码部分也主要是基于 Vue 的，但是万变不离其宗，其他语言也类似。
根据上图，我们的组件是会被一个个拆分单独发布到 npm仓库的，为什么这么设计呢？其实之前也考虑过设计成一个组件库，所有组件都包含在一个组件库内，这样只需要发布一个组件库包，用的时候按需加载就好了。后来在实践的过程中发现这样并不合适协同开发，其他前端如果想贡献组件，接入的改造成本也很大。举个