AntDesignVue 版本PC端表单设计器
FcDesigner Pro版是一款基于Vue3.0的低代码可视化表单设计器工具,通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。
本项目采用 Vue3.0 和 Ant Design Vue 进行页面构建,内置多语言解决方案,支持二次扩展开发,支持自定义组件扩展。
安装
首先,你需要下载并解压 fcDesignerPro,然后将其集成到你的项目中。
- 创建目录:在你的项目根目录下,创建一个名为
fcDesignerPro
的文件夹。 - 解压并复制:解压下载的代码包,将
dist
目录复制到刚刚创建的fcDesignerPro
目录中。
引入
接下来,你可以通过 CDN 或 Node.js 方式引入 fcDesignerPro 到你的项目中。
通过 CDN 引入
如果你希望通过 CDN 直接引入库文件,请按照以下步骤操作:
html
<link rel="stylesheet" href="https://unpkg.com/ant-design-vue@4/dist/reset.css"></link>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"></link>
<!-- 引入 Vue 及所需组件 -->
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/ant-design-vue@4/dist/antd.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
<!-- 引入 form-create 及 fcDesignerPro -->
<script src="https://unpkg.com/@form-create/ant-design-vue@^3/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@^3/dist/form-create.min.js"></script>
<script src="/path/to/fcDesignerPro/dist/index.umd.js"></script>
<div id="app">
<fc-designer height="100vh"></fc-designer>
</div>
<!-- 挂载组件 -->
<script>
// 创建 Vue 应用实例
const app = Vue.createApp({});
// 挂载 AntDesignVue
app.use(antd);
// 挂载 fcDesignerPro 组件
app.use(FcDesigner);
// 挂载 formCreate
app.use(FcDesigner.formCreate);
// 挂载 Vue 应用
app.mount('#app');
</script>
通过 Node.js 引入
如果你正在使用 Node.js 作为包管理器,你可以按照以下步骤安装并引入相关依赖:
1. 安装依赖:
shell
npm install @form-create/ant-design-vue@^3
npm install @form-create/vant@^3
npm install ant-design-vue
npm install vant
2. 引入并挂载:
js
import FcDesigner from '/path/to/fcDesignerPro/dist/index.es.js'
// 不包含移动端自适应预览,无需安装 vant 和 @form-create/vant
// import FcDesigner from '/path/to/fcDesignerPro/dist/pc/index.es.js'
import Antd from 'ant-design-vue';
import vant from 'vant';
import 'ant-design-vue/dist/reset.css';
import 'vant/lib/index.css';
// 挂载 Ant Design Vue
app.use(Antd)
// 挂载 Vant
app.use(vant)
// 挂载 fcDesignerPro 组件
app.use(FcDesigner)
// 挂载 formCreate
app.use(FcDesigner.formCreate)
使用
成功引入 fcDesignerPro 后,你可以在模板中使用 fc-designer 组件,如下所示:
html
<fc-designer ref="designer" height="100vh"/>
编译文件说明
├─dist 编译文件目录
│ ├─index.[es|umd].js 完整包,包含PC端设计器+移动端自适应预览,需要安装vant和@form-create/vant
│ ├─pc/index.[es|umd].js PC端设计器,不包含移动端自适应预览,无需安装vant和@form-create/vant
│ ├─render/vant/form-create.[es|umd].js 移动端runtime环境的渲染器, 无需导入设计器
│ ├─render/ant-design-vue/form-create.[es|umd].js PC端runtime环境的渲染器, 无需导入设计器
│
命令说明
运行开发环境
sh
npm run dev
完整打包设计器
sh
npm run build
打包多语言文件
sh
npm run build:locale
打包PC端渲染器
sh
npm run build:antdv
打包移动端渲染器
sh
npm run build:mobile
打包预览页面,输出 index.html
sh
npm run build:preview
通过以上步骤,你现在已经成功在项目中集成了 fcDesignerPro,并且可以开始使用它来构建和设计表单。