VFormDesigner为VForm的表单设计器组件，用于生成表单JSON对象。

1. 引入并全局注册VForm组件

修改vue项目的main.js，如下所示（包含注释的6行代码）：

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import axios from 'axios'  //如果需要axios，请引入
  5. import ElementUI from 'element-ui'  //引入element-ui库
  6. import VForm from 'vform-builds'  //引入VForm库
  8. import 'element-ui/lib/theme-chalk/index.css'  //引入element-ui样式
  9. import 'vform-builds/dist/VFormDesigner.css'  //引入VForm样式
  11. Vue.config.productionTip = false
  13. Vue.use(ElementUI)  //全局注册element-ui
  14. Vue.use(VForm)  //全局注册VForm(同时注册了v-form-designe、v-form-render等组件)
  15. /* 注意：如果你的项目中有使用axios，请用下面一行代码将全局axios复位为你的axios！！ */
  16. window.axios = axios
  18. new Vue({
  19.   render: h => h(App),
  20. }).$mount('#app')

2. 在Vue模板中使用组件

  1. <template>
  2.   <v-form-designer></v-form-designer>
  3. </template>
  5. <script>
  6.   export default {
  7.     data() {
  8.       return {
  9.       }
  10.     }
  11.   }
  12. </script>
  14. <style lang="scss">
  15. body {
  16.   margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
  17. }
  19. </style>

3. 添加Vue项目静态资源文件

为加速页面首次加载速度，富文本组件(Vue2Editor)采用了懒加载方式，即表单中包含富文本组件时由浏览器动态加载所需js文件，该文件为”node_modules\vform-builds\dist\VFormDesigner.umd.min.1.js”。

在开发阶段，需要将该文件复制到Vue项目的静态资源目录（通常为public目录），复制后路径为：

项目根目录\public\js\VFormDesigner.umd.min.1.js

4. 指定AceEditor的动态加载路径

代码编辑器组件AceEditor大量使用了动态按需加载js技术，仅当需要时才动态加载所需js、css文件，目前AceEditor库文件部署在VForm官方的CDN服务器上，如果你要在生产环境使用VForm，建议私有部署AceEditor。

私有部署方法：将node_modules\ace-builds\src-min-noconflict目录下的所有文件上传到web服务器或CDN。
image.png

私有部署AceEditor后，需要同步修改utils/config.js文件如下一行代码：

export const ACE_BASE_PATH = ‘部署后的ace打包库文件URL’

5. 设计器样式复位

当设计器嵌入其他项目（如Admin Web类框架），设计器的样式可能会被外部样式污染，导致显示错位、美观度降低。出现这种情况时，只需在v-form-designer之外包裹一个div容器，并在该div上进行样式复位。具体需要复位哪些样式，可跟VForm Demo演示版本进行对比找出。