当咱们须要对一些 结构复杂，或内容较多的JSON 进行批改配置的时候，极易容易出错。于是，就想着是否能通过表单模式进行批改，保留。最初，发现了几个JSON 编辑器。
1，Vue JSON Schema Form

2，Vue-Json-Edit

3，json-editor

这里采纳的是，第一个 Vue JSON Schema Form 插件。上面，就介绍一下，在nuxt 中，如何应用。

1，装置

该命令是 装置 vue2 + elementUI 版本的。其余版本的装置命令能够查阅官网。
npm install --save @lljj/vue-json-schema-form

2，应用

2.1 在 plugins 下新增 json-schema.js 文件，调用组件

import Vue from "vue";import VueForm from "@lljj/vue-json-schema-form";Vue.component("VueForm", VueForm);

2.2，在所需的中央，应用 VueForm 组件

<template>  <div>    <VueForm      v-model="formData"      :schema="config.schema"      :form-props="{        layoutColumn: 2,      }"       @on-submit="handlerSubmit"       @on-cancel="handleCancel"    >    </VueForm>  </div></template><script>import config from "@/config/config_form_schema";export default {  data() {    return {      config,      formData: {},    };  },  methods: {    handleCancel(){      // 勾销操作。    },    handlerSubmit() {      // 提交操作。      console.log('formData后果：',this.formData)    },  },};</script>

当须要解决简单JSON文件时，能够采纳导入的形式，赋值给schema
schema 的格局编写，可参考：配置 schema 和 JSON Schema 标准

2.3，表单输入。
2.3.1，具体的输入后果能够在 官网提供的案例链接 里查看 formData 的内容。
2.3.2，formData 的输入是对象。
2.3.3，在理论的开发中，只有解决 formData 即可。