快速上手

本节通过一个简单的例子介绍如何快速上手。Demo

1. 首先引入 Vue、Vuex、lodash、jsonschema-form-vue

npm install vue vuex lodash jsonschema-form-vue

2. 编写组件

<template>
  <vue-form
    :schema="schema"
    :model="model"
  >
  </vue-form>
</template>

<script>
export default {
  data () {
    return {
      schema: {
        title: 'basic',
        type: 'object',
        properties: {
          name: {
            type: 'string',
            title: '姓名'
          },
          phone: {
            type: 'string',
            title: '手机',
            pattern: '^1[3578]\\d{9}$',
            description: '请输入正确的手机号码'
          }
        },
        required: ['name', 'phone']
      },
      model: {
        name: '王昌彬'
      }
    }
  }
}
</script>

3. 挂载初始化

import Vue from 'vue'
import Vuex from 'vuex'
import _ from 'lodash'
import VueForm from 'jsonschema-form-vue'
import { store } from 'jsonschema-form-vue'
import App from './basic.vue'

Vue.config.productionTip = false
Vue.use(Vuex)
Vue.use(VueForm)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store: new Vuex.Store(store),
  components: { App },
  template: '<App ref="app"/>'
})

4. 渲染结果