效果：在 vue 应用中通过拖拉拽，生成一个 html 页面
相关技术：
- 前端:：vue，ejs，webpack
- 后端：eggjs，mongo
- 部署：docker
流程：用户在落地页配置后台，选择组件并进行组件的属性配置 json，通过 webpack 打包结合模板引擎，生成出各种复杂的页面。
V1.0
模板渲染
ejs 模板+数据 = html 网页
落地页后台：用户配置组件信息，生成 json 数据
node 后端：模板加对应 json 数据，生成静态 html
优点：
- seo 友好
- 纯 html，性能较好
缺点：
- ejs 模板管理复杂，难以模块化分离
- 开发组件，需要同时维护后台和模板两份代码
- 只适合简单页面，不适合页面逻辑、交互复杂场景
art-template
art-template 完全兼容 ejs 语法，并进行了更多扩展，类似于 typescript 和 JavaScript 关系，性能测试和接近原生 ejs
用于拆分组件，如把 button、img 等拆分为单独一个文件，在主模板中引入，并可传入变量:
// index.html 引入 img 组件。并传入变量
{{include './components/img.html' toChildData}}
// img.html
{{set pros= $data}}
<div class="img-item">
<img src="{{pros.url}}">
</div>
V2.0
Vue 生成简单 Vue 应用
通俗的话来讲就是，在 vue 后台配置，通过 webpack 打包，生成一个简单的 vue 应用
ejs 拼接方式打包一个简易 vue 应用
通过 webpack 打包 engine.js、plugins.js，通过 ejs 模板插值方式，嵌入到页面中，注意资源引用顺序，plugins.js 在前面是因为需要提前注册号组件，不然 engine.js 会报错
1. engine.js
导入 engine 模板，并挂载早 #app 上
2. plugins.js
通过 require.context 引入模板文件，并通过 window 挂载出去，给下一步 engine.vue 使用
3. engine.vue
通过 window 可以拿到注入到页面上的页面数据，用通过 component 动态组件，渲染出配置的组件
4. webpack-dev-server
在生产环境，是按需打包组件的，每次生成页面都会进行一次打包生成具体的 html 文件
在预览环境，即用户编辑模式，是没有必要每次都打包的，可以通过 webpack-dev-server ，结合模板引擎，实时急速的渲染页面
V3.0(规划中)
Vue 生成复杂 Vue 应用
1. ssr
因为打包出的是一个 vue 应用，seo 较不友好，puppeteer 预请求渲染页面是一种方案，但性能不是很好且很多坑。终极方案还是得 ssr
2. 组件嵌套
所有组件都可嵌套开发和维护会非常复杂，想法是单独开一个容器组件，只对该容器组件进行嵌套相关处理
3. 页面状态
复杂页面场景：如登录完后跳转其他页面，目前处理只是简单的组件隐藏，数据管理很复杂。引入 vuex，router 应该是终极方案
