快速上手
@silver-formily/json-schema 是 Silver Formily 在 JSON Schema 开发模式里的协议层。当前文档将表单开发分为 Markup Schema、JSON Schema 和 JSX Components 三种模式；其中 Markup Schema 和 JSON Schema 都依赖 @silver-formily/json-schema 提供的协议能力。@silver-formily/json-schema 使用一份普通对象来描述表单结构、组件映射与联动逻辑，使得递归渲染成为可能。
简单来说不同库的负责功能如下：
@silver-formily/core负责 Form 实例、字段状态、校验与副作用@silver-formily/json-schema负责 Schema 协议、表达式编译与 Schema 类能力- 前端框架绑定库（如：
@silver-formily/vue） 负责把 Schema 递归渲染成组件树。
安装
bash
pnpm add @silver-formily/vue @silver-formily/core @silver-formily/json-schema @silver-formily/reactive @silver-formily/reactive-vue @silver-formily/shared@silver-formily/json-schema 本身不负责渲染 UI。要在 Vue 中把 Schema 变成真正的表单，还需要 @silver-formily/core 和 @silver-formily/vue（或者其他前端框架绑定库）。
最小可运行示例
一个最小示例通常只有 4 步：
- 调用
createForm()创建表单实例 - 调用
createSchemaField()注册 Schema 中会用到的组件 - 编写一份
schema，通过type、properties、x-component描述字段 - 用
FormProvider和SchemaField完成渲染
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { createSchemaField, FormConsumer, FormProvider } from '@silver-formily/vue'
import { InputBox, TextAreaBox } from './shared'
const { SchemaField } = createSchemaField({
components: {
InputBox,
TextAreaBox,
},
})
const schema = {
type: 'object',
properties: {
nickname: {
'type': 'string',
'title': '昵称',
'required': true,
'x-component': 'InputBox',
'x-component-props': {
placeholder: '例如：Silver',
},
},
bio: {
'type': 'string',
'title': '简介',
'x-component': 'TextAreaBox',
'x-component-props': {
rows: 4,
placeholder: '简单介绍一下你自己',
},
},
},
}
const form = createForm({
values: {
nickname: 'Silver',
bio: 'Hello Silver',
},
})
</script>
<template>
<FormProvider :form="form">
<SchemaField :schema="schema" />
<FormConsumer>
<template #default="{ form: currentForm }">
<pre style="margin-top: 10px; white-space: pre-wrap;">{{ JSON.stringify(currentForm.values, null, 2) }}</pre>
</template>
</FormConsumer>
</FormProvider>
</template>{
"nickname": "Silver",
"bio": "Hello Silver"
}查看源码
上面的示例里有几个关键点：
createSchemaField({ components })决定了x-component可以使用哪些组件名schema.properties.nickname和schema.properties.bio描述了两个字段x-component-props会原样传给目标组件FormConsumer只是为了展示当前值，业务代码里可以换成提交、校验或联动逻辑