FormMaking表单设计器的使用

在开发过程中有一个可以让客户自己来设计表单的需求，看了多个动态表单生成的，最后选择了FormMaking，主要是这个基于vue和elmenet-ui的一款表单设计器，跟我们的项目更贴合。

FormMaking官网：http://docs.form.making.link
FormMaking在线demo：http://form.making.link/basic-version/#/zh-CN/
FormMaking使用教程：http://docs.form.making.link/guide.html（教程很详细，按照教程一步一步来就好了）

我每次都喜欢先看下效果图是不是自己想要的，再去看别人发的内容，所以都先放下图啦~
一、动态生成表单图：

操作中遇到的问题：安装后发现页面一直什么都没有，后来发现是FormMaking用的span标签包裹的

动态生成表单图：
1）安装：npm install form-making -S
2）引入（在mian.js中引入）：

	import FormMaking from 'form-making'
	import {
		GenerateForm,
		MakingForm
	} from 'form-making'
	import 'form-making/dist/FormMaking.css'
	Vue.use(GenerateForm)
	Vue.use(MakingForm)
	Vue.use(FormMaking)

3）在页面中中调用

<template>
<div class="dynamicForm">
  <!--  高级定义和布局字段 我不需要就设置为空啦   :advance-fields = '[]'   :layout-fields = '[]'  -->
  <fm-making-form 
    ref="makingform" 
    style="height:800px;display: block;" 
    preview 
    :advance-fields = '[]'
    :layout-fields = '[]'
  >
  <!-- 头部内容自定义，添加提交按钮 -->
    <template slot="action">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
    </template>
  </fm-making-form>
</div>
</template>
<!-- 需要在设计器中预览代码需要引入ace.js库 (index.html中引入ace.js，可以预览生成的json或html，如果不引也可以生成，但没有解析格式样式。)-->
**<!-- 如何是不联网的话，可以参考下  https://www.jianshu.com/p/bb5109901132 ->**
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>
<script>
    export default {
        data(){
            return{
              formName:'',
            }
        },
        components:{  },
        methods:{