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

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

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

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import axios from 'axios'  //如果需要axios，请引入
  5. import ElementPlus from 'element-plus'  //引入element-plus库
  6. import VForm3 from 'vform3-builds'  //引入VForm3库
  8. import 'element-plus/dist/index.css'  //引入element-plus样式
  9. import 'vform3-builds/dist/designer.style.css'  //引入VForm3样式
  11. const app = createApp(App)
  12. app.use(ElementPlus)  //全局注册element-plus
  13. app.use(VForm3)  //全局注册VForm3(同时注册了v-form-designe、v-form-render等组件)
  15. /* 注意：如果你的项目中有使用axios，请用下面一行代码将全局axios复位为你的axios！！ */
  16. window.axios = axios
  17. app.mount('#app')

醒目提示：你如果的Vue 3项目使用TS(TypeScript)，则应该增加如下配置内容： 在项目src目录下新建types目录，新增一个index.d.ts，文件内容仅一行：
declare module “vform3-builds”

2. 在Vue模板中使用组件

  1. <template>
  2.   <v-form-designer></v-form-designer>
  3. </template>
  5. <script setup>
  6. </script>
  8. <style lang="scss">
  9. body {
  10.   margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
  11. }
  13. </style>

3. 指定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’

4. 设计器样式复位

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