FormMaking V3
FormMaking V3 是 Vue 3.x 升级版本，基于 Vue 3.x 和 Element Plus 开发的可视化/低代码表单设计器，可以生成 Element 和 Antd 样式的表单。
安装
下载 FormMaking V3
点击这里 ↗ 下载产品（选择V3版本），下载后将其解压到项目中。
TIP
可以放于项目任何位置上，本文档以项目根目录为例，其他位置只需要修改引入路径即可
Import 引入
javascript
import FormMakingV3 from 'form-making-v3/dist/form-making-v3.es.js'
import 'form-making-v3/dist/index.css'浏览器引入
直接通过浏览器的 script 和 link 标签导入 FormMaking V3，就可以使用全局变量 FormMakingV3 了。
html
<link rel="stylesheet" href="form-making-v3/dist/index.css">
<script src="form-making/dist/form-making-v3.umd.js"></script>引入 Element Plus
bash
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus在 Vue 项目中使用
Vue 配置
如果需要使用 自定义组件 字段进行表单的配置，需要在项目中使用 Vue 的完整版本（同时包含编译器和运行时的版本）。
js
// vite.config.js
resolve: {
alias: {
'vue': 'vue/dist/vue.esm-bundler.js'
}
}js
// vue.config.js
chainWebpack: config => {
config.resolve.alias.set('vue$', 'vue/dist/vue.esm-bundler.js')
}完整引入
js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import FormMakingV3 from '@/form-making-v3'
import '@/form-making-v3/dist/index.css'
import App from './App.vue'
createApp(App).use(ElementPlus).use(FormMakingV3).mount('#app')引入部分组件
js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import {
MakingForm,
GenerateForm
} from '@/form-making-v3'
import '@/form-making-v3/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.use(MakingForm)
app.use(GenerateForm)
app.mount('#app')开始使用
vue
<template>
<fm-making-form
ref="makingform"
style="height: 500px;"
preview
generate-code
generate-json
>
</fm-making-form>
</template>TIP
使用时需要设置设计器的高度，默认情况高度是根据父元素 100% 来渲染。
使用 Ant Design Vue
提醒
如果项目中没有用到 Ant Design Vue 组件库，可以忽略这里。
安装 Ant Design Vue
bash
# NPM
$ npm install ant-design-vue --save
# Yarn
$ yarn add ant-design-vue
# pnpm
$ pnpm install ant-design-vueTIP
从 3.7.0 版本开始，我们已经更新到 ant-design-vue@4.x，如果需要使用 3.x 版本，可以使用之前版本。
引入Ant Design Vue
js
import Antd from 'ant-design-vue'
import { Form } from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'
app.use(Antd)
// 需要提供 useInjectFormItemContext 依赖，以便表单能实时校验
app.provide('useInjectFormItemContext', Form.useInjectFormItemContext)开始使用
vue
<template>
<fm-making-form
ref="makingform"
style="height: 500px;"
:use-antd-form="true"
>
</fm-making-form>
</template>TIP
3.7.0 版本后，设计器默认将不开启 Antd 的渲染，如果需要预览查看 Antd 样式的表单 ，需要将 use-antd-form 属性设置为 true。
在 Html 文件中使用
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css">
<link rel="stylesheet" href="form-making-v3/dist/index.css">
<style>
html,body,#app{
height: 100%;
}
</style>
</head>
<body >
<div id="app" >
<fm-making-form preview generate-code generate-json>
</fm-making-form>
</div>
</body>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@next/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
<script src="form-making-v3/dist/form-making-v3.umd.js"></script>
<script>
Vue.createApp({}).use(ElementPlus).use(FormMakingV3).mount('#app')
</script>
</html>