Vue JSON Form是一個基于Vue.js的動態(tài)表單生成庫，它可以根據(jù)JSON schema生成各種類型的表單。它的使用非常簡單，只需導入包并在Vue組件中使用即可。

首先，通過npm安裝Vue JSON Form:

npm install @admin-bro/vue-json-form

然后在Vue組件中引入庫并定義JSON schema和初始值:

import vueJsonForm from '@admin-bro/vue-json-form'
import '@admin-bro/vue-json-form/styles/main.css'
export default {
data() {
return {
schema: {
properties: {
name: {
type: 'string',
title: 'Name'
},
email: {
type: 'string',
title: 'Email'
},
age: {
type: 'integer',
title: 'Age'
},
gender: {
type: 'string',
title: 'Gender',
enum: ['Male', 'Female']
}
}
},
value: {
name: '',
email: '',
age: null,
gender: ''
}
}
},
components: {
vueJsonForm
}
}

最后在模板中使用組件:

<template>
<div>
<vue-json-form
:schema="schema"
v-model="value"
/>
</div>
</template>

vue-json-form組件會自動根據(jù)JSON schema生成表單元素，我們可以定義各種屬性和約束規(guī)則來控制表單的生成和驗證。