Element UI 版本PC端表单设计器

FcDesigner Pro版是一款基于Vue2.7的低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。

---

本项目采用 Vue2.7 和 Element UI 进行页面构建，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。

安装

首先，你需要下载并解压 fcDesignerPro，然后将其集成到你的项目中。

1. 创建目录：在你的项目根目录下，创建一个名为 fcDesignerPro 的文件夹。
2. 解压并复制：解压下载的代码包，将 dist 目录复制到刚刚创建的 fcDesignerPro 目录中。

引入

接下来，你可以通过 CDN 或 Node.js 方式引入 fcDesignerPro 到你的项目中。

通过 CDN 引入

如果你希望通过 CDN 直接引入库文件，请按照以下步骤操作：

<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></link>
<link rel="stylesheet" href="https://unpkg.com/vant@2/lib/index.css"></link>


<!-- 引入 Vue 及所需组件 -->
<script src="https://unpkg.com/vue@2.7/dist/vue.min.js"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<script src="https://unpkg.com/vant@2/lib/vant.min.js"></script>


<!-- 引入 form-create 及 fcDesignerPro -->
<script src="https://unpkg.com/@form-create/element-ui@^2.7/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@^2.7/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>
    // 挂载 fcDesignerPro 组件
    Vue.use(FcDesigner);
    // 挂载 formCreate
    Vue.use(FcDesigner.formCreate);
    // 挂载 Vue 应用
    new Vue({
        el: '#app'
    });
</script>

通过 Node.js 引入

如果你正在使用 Node.js 作为包管理器，你可以按照以下步骤安装并引入相关依赖：

1. 安装依赖：

npm install @form-create/element-ui@super
npm install @form-create/vant@super
npm install element-ui
npm install vant@2

2. 引入并挂载：

import Vue from 'vue';
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 ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vant from 'vant';
import 'vant/lib/index.css';


// 挂载 ElementUI
Vue.use(ElementUI)
// 挂载 Vant
Vue.use(vant)
// 挂载 fcDesignerPro 组件
Vue.use(FcDesigner)
// 挂载 formCreate
Vue.use(FcDesigner.formCreate)

使用

成功引入 fcDesignerPro 后，你可以在模板中使用 fc-designer 组件，如下所示：

<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/element-plus/form-create.[es|umd].js PC端runtime环境的渲染器, 无需导入设计器
│

命令说明

运行开发环境

pnpm run dev

完整打包设计器

pnpm run build

打包多语言文件

pnpm run build:locale

打包PC端渲染器

pnpm run build:elm

打包移动端渲染器

pnpm run build:mobile

打包预览页面,输出 index.html

pnpm run build:preview

通过以上步骤，你现在已经成功在项目中集成了 fcDesignerPro，并且可以开始使用它来构建和设计表单。