FcDesigner Pro

Appearance

快速上手 ​

本文将帮助你快速上手使用 fcDesignerPro，从安装、引入到实际使用，逐步指导你如何在项目中集成并利用该工具

开源版

开源版文档

安装 ​

package.png

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

标准集成:

  1. 创建目录：在你的项目根目录下，创建一个名为 fcDesignerPro 的文件夹。

  2. 解压并复制：解压下载的代码包，将 dist 目录复制到刚刚创建的 fcDesignerPro 目录中。

源码集成（可选）:

  1. 将解压后的 src/ 目录全部内容复制到 fcDesignerPro 文件夹

  2. 将源码包内 package.json 的 dependencies 字段合并到项目的 package.json

  3. 重新运行 npm install 安装依赖

注意

源码方式集成后若进行二次开发，后续直接覆盖更新会导致自定义修改丢失，建议通过版本管理工具（如git）进行差异合并更新。

编译文件说明 ​

├─dist 编译文件目录
│ │//完整包: 包含PC端设计器+移动端自适应预览,需要安装vant和@form-create/vant
│ ├─index.[es|umd].js 
│ │//PC端设计器: 不包含移动端自适应预览,无需安装vant和@form-create/vant
│ ├─pc/index.[es|umd].js 
│ │//移动端runtime环境的渲染器, 无需导入设计器
│ ├─render/vant/form-create.[es|umd].js 
│ │//PC端runtime环境的渲染器, 无需导入设计器
│ ├─render/element-plus/form-create.[es|umd].js

注意: 如果仅需在 PC 端使用，可直接导入 dist/pc/index.[es|umd].js 文件，无需额外安装移动端 Vant 依赖包。

引入 ​

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

通过 Node.js 引入 ​

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

1. 安装依赖：

shell
npm install @form-create/element-ui@^3
npm install element-plus
#如只在 PC 端使用，直接引入 dist/pc/index.[es|umd].js 即可，无需执行下方安装命令。
npm install @form-create/vant@^3
npm install vant

如已安装旧版本渲染器，请执行以下命令更新至最新版：

shell
npm update @form-create/element-ui@^3
npm update @form-create/vant@^3

2. 引入并挂载：

js
import FcDesigner from '/path/to/fcDesignerPro/dist/index.es.js'
// 此版本仅适用于 PC 端，不包含移动端自适应样式。使用时直接引入即可，无需安装 vant 和 @form-create/vant。
// import FcDesigner from '/path/to/fcDesignerPro/dist/pc/index.es.js'
import ElementPlus from 'element-plus'
import vant from 'vant';
import 'element-plus/dist/index.css';
import 'vant/lib/index.css';


// 挂载 ElementPlus
app.use(ElementPlus)
// 挂载 Vant
app.use(vant)
// 挂载 fcDesignerPro 组件
app.use(FcDesigner)
// 挂载 formCreate
app.use(FcDesigner.formCreate)

通过 CDN 引入 ​

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

html
<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"></link>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"></link>


<!-- 引入 Vue 及所需组件 -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.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/element-ui@^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({});
    // 挂载 ElementPlus
    app.use(ElementPlus);
    // 挂载 vant
    app.use(vant);
    // 挂载 fcDesignerPro 组件
    app.use(FcDesigner);
    // 挂载 formCreate
    app.use(FcDesigner.formCreate);
    // 挂载 Vue 应用
    app.mount('#app');
</script>

使用 ​

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

html
<fc-designer ref="designer" height="100vh"/>

命令说明 ​

开发环境要求：Node.js 需使用 v18 版本，包管理器工具采用 pnpm。

开发环境

sh
pnpm run dev

打包设计器

sh
pnpm run build

打包多语言文件

sh
pnpm run build:locale

打包PC端渲染器

sh
pnpm run build:elm

打包移动端渲染器

sh
pnpm run build:mobile

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

sh
pnpm run build:preview

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