Vue-form-builder 插件兼容ant-design-pro-vue

Vue-form-builder插件兼容ant-design-pro-vue

https://www.bilibili.com/read/cv15920558

ant design pro 版本为3.0.2 ：https://github.com/vueComponent/ant-design-vue-pro

参考资料：

官方文档：https://openfext.github.io/docs/vue-form-builder/intro.html

Vue-form-builder源码：https://github.com/openfext/vue-form-builder

演示网站：https://openfext.github.io/vue-admin-next/#/form/form-builder

演示网站项目源码：https://github.com/openfext/vue-admin-next

下载package.json的包以及版本号 ：npm install

“@fext/vue-form-builder”: “2.1.0”,

“@fext/vue-use”: “^0.1.0”,

“@vue/composition-api”: “^0.5.0”,

“@ant-design/pro-form”: “^1.59.3”,

“deepmerge”: “^4.2.2”,

“vue-form-builder”: “0.0.1”,

“vee-validate”: “^3.0.11”,

使用步骤

一、main.js中注册使用

import VueCompositionApi from ‘@vue/composition-api’

import {ValidationProvider} from ‘vee-validate/dist/vee-validate.full’

Vue.component(‘ValidationProvider’, ValidationProvider);

Vue.use(VueCompositionApi)

二、测试组件例子（ExampleType等：从Vue-form-builder中拿 https://github.com/openfext/vue-form-builder）

放入想要放置的位置（引入的时候注意路劲即可）

三、Vue文件组件使用from builder (一些自定义Example字段组件需要引入)

如：Analysis.vue

三、ant design pro vue 要关闭严格模式。（不然写代码很麻烦）

在vue.config.js文件中设置 lintOnSave

lintOnSave: false

四、测试结果 作者：Eddie-Luo https://www.bilibili.com/read/cv15920558 出处：bilibili