一、引入Vant
npm i vant -S
二、因为vform使用的是vite，所以直接配置vite相关内容
// 引入vite-plugin-style-import插件，方便自动按需引入组件样式
npm i vite-plugin-style-import@1.4.1 -D
// 配置插件
vite.config.js
import styleImport, { VantResolve } from 'vite-plugin-style-import';
plugins: [
styleImport({
resolves: [VantResolve()],
}),
],
三、引入组件
main.js
import { createApp } from 'vue';
import { Button } from 'vant';
const app = createApp();
app.use(Button);
四、定义组件
- extension的samples文件夹中新建组件，注意名称必须携带-widget，因为之后的拖拽加载是通过component的:is=“{{type}}-widget”
- 参照alert-widget书写非容器组件（字段组件）代码
- 参照card-widget书写容器组件代码
- 配置属性扩展，extension-schema.js中，根据组件属性进行配置，
属性说明：
type：必须是新建组件的名称，例如组件名为cell-widget.vue，type必须为cell。原因参照（1），i18通过type显示容器名称。需要在lang的en-US_extension.js和zh-CN_extension.js的widgetLabel中配置type对应的名称。
category：容器类型，container容器组件，其他为字段组件
icon: 容器中显示的图标，可通过iconfont.cn进行下载引入展示
formItemFlag：是否嵌套el-form-item组件内，因为不使用elment，所以写false
options：为组件属性，配置属性后可在组件类中通过field.options.xxxx进行绑定 - 引入组件，并加载属性编译器extension-loader.js
（1）引入组件属性扩展
import {cellSchema} from "@/extension/samples/extension-schema"
（2）引入组件
import CellWidget from '@/extension/samples/vantwidget/cell/cell-widget'
（3）引入SFC配置（在‘6’中说明SFC代码配置）
import {cellTemplateGenerator} from '@/extension/samples/extension-sfc-generator'
（4）加载属性扩展
addCustomWidgetSchema(cellSchema) //加载组件Json Schema
（5）注册组件
app.component(CellWidget.name, CellWidget)
（6）注册主页面右侧属性配置器
PERegister.registerCPEditor(app, 'cell-title', 'cell-title-editor',
PEFactory.createInputTextEditor('title', 'extension.setting.title'))
方法说明：propertyRegister.js property-editor-factory.js
registerCPEditor: 注册常见属性对应的属性编辑器
createInputTextEditor：注册输入框属性编辑器
createBooleanEditor：注册Boolean属性编辑器
……
更多配置参照：propertyRegister.js property-editor-factory.js
（7）注册SFC代码生成器
registerFWGenerator('cell', cellTemplateGenerator)
- 编辑SFC代码生成器 extension-sfc-generator.js
export const cellTemplateGenerator = function (fw, formConfig) {
// 重新编译属性（固定属性）
const wop = fw.options
const titleAttr = `:title="${wop.title}"`
const valueAttr = `:value="${wop.value}"`
const labelAttr = `:label="${wop.label}"`
const sizeAttr = `:size="${wop.size}"`
const iconAttr = `:icon="${wop.icon}"`
const borderAttr = `:border="${wop.border}"`
const islinkAttr = `:is-link="${wop.islink}"`
const requiredAttr = `:required="${wop.required}"`
const centerAttr = `:center="${wop.center}"`
const arrowDirectionAttr = `:arrow-direction="${wop.arrowDirection}"`
const clickAttr = `@click="${wop.onClick}"`
/**
* 重新编译属性（form动态属性）
* 参照sfc-generator.js的getFlAttrs()方法，新增form属性可在该方法进行配置
*/
// const {vModel, readonly, disabled, size, type, showPassword, placeholder, clearable,
// minlength, maxlength, showWordLimit, prefixIcon, suffixIcon, appendButtonChild, value} = getElAttrs(fw, formConfig)
// return `<el-input ${vModel} ${readonly} ${disabled} ${size} ${type} ${showPassword} ${placeholder} ${clearable}
// ${minlength} ${maxlength} ${showWordLimit} ${prefixIcon} ${suffixIcon}>${appendButtonChild}</el-input>`
// SFC支持导出任意组件
const cellTemplate =
`<van-cell ${value}></van-cell>`
// 导出template，提供给extension-loader.js中进行SFC加载
return cellTemplate
}
至此vForm3中引入vant组件功能（字段组件）完全实现
五、其他类功能说明，（看到哪里更新到哪里）
1、src->extension自定义组件主要文件夹
extension—>samples组件生成，属性配置，sfc配置文件夹
samples—>extension-schema.js 属性配置器
samples—>extension-sfc-generator.js sfc配置器
extension—>extension-helper.js 公共方法引入
extension—>extension-loader.js 自定义组件配置主要类，加载属性编译器，引入组件，配置sfc等功能
2、src->utils 公共属性配置文件夹
utils—>sfcgenerator.js sfc属性及组件配置
registerFWGenerator 注册字段组件的代码生成器
3、src—>form-designer 主工程编译器
form-designer—>index.vue 页面配置，左侧容器，中间组价配置器，右侧属性配置器
form-designer—>form-widget 组件主控制类
form-widget —>container-widget默认配置的容器组件
form-widget —>field-widget默认配置的字段组件
form-widget —>index.vue拖拽以后显示组件控制器，通过component is加载组件
form-designer—>setting-panel 组件属性控制
setting-panel—>index.vue 组件属性生成类，Boolean、select、input等
form-designer—>toolbar-panel 顶部工具类
toolbar-panel—>index.vue 主页面工具类实现，PC、Pad、H5、清空等功能
form-designer—>widget-panel 左侧组件类型配置器
