安装VForm 3

方法一：

npm i vform3-builds

或yarn add vform3-builds

注意：VForm 3依赖Element Plus，需要先安装Element Plus。
npm i element-plus

或yarn add element-plus

方法二：

CDN引入，适合直接在HTML中使用组件。

  1. git克隆vform3-builds：https://gitee.com/vdpadmin/vform3-builds
  2. 把dist目录下4个文件上传到Web服务器或CDN；

  3. 在HTML中引入js和css，如下所示：

    1. 在HTML中使用表单设计器组件VFormDesigner ```html <!DOCTYPE html> 

  2.    2. 在HTML中使用表单渲染器组件VFormRender
  3. ```html
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  9.     <title>VForm 3 Render Demo</title>
  10.     <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
  11.     <link rel="stylesheet" href="render.style.css?t=20220202"> <!-- 根据Web服务器或CDN路径修改 -->
  12.     <style type="text/css">
  13.     </style>
  14. </head>
  15. <body>
  17.   <div id="app">
  18.       <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
  19.     </v-form-render>
  20.       <el-button type="primary" @click="submitForm">Submit</el-button>
  21.   </div>
  23. <script src="//unpkg.com/vue@next"></script>
  24. <script src="//unpkg.com/element-plus"></script>
  25. <script src="render.umd.js?t=20220202"></script> <!-- 根据Web服务器或CDN路径修改 -->
  26. <script>
  27.   const { createApp } = Vue;
  28.     const app = createApp({
  29.       data() {
  30.         return {
  31.           formJson: {"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}},
  32.           formData: {},
  33.           optionData: {}
  34.         }
  35.       },
  36.       methods: {
  37.         submitForm: function() {
  38.           this.$refs.vFormRef.getFormData().then( function(formData) {
  39.             // Form Validation OK
  40.             alert( JSON.stringify(formData) )
  41.           }).catch( function(error) {
  42.             // Form Validation Failed
  43.             alert(error)
  44.           })
  45.         }
  46.       }
  47.     });
  48.     app.use(ElementPlus).use(VFormRender).mount("#app");
  49. </script>
  50. </body>
  51. </html>

安装VForm 3 Pro

VForm 3 Pro相比VForm 3提供了子表单（sub-form）、数据表格（data-table）等高级组件，订阅源码更新服务后，即可获取到VForm 3 Pro源代码。立即订阅==>

Pro订阅用户获取到源码后，需要自己编译打包，具体方法参见《编译打包》。