what is development-render ?

development render is a library that dynamically parses virtual DOMS and functional scripts based on the development environment. This library is developed based on vue.js and provides online debugging. its data structure is based entirely on vue-designer-online. It mainly expands the operation and debugging functions under the development environment on the basis of static design.

how to use development-render ?

• install it by yarn

 yarn add development-render

or install it by npm

 yarn add development-render

• register it on Vue

import developmentRender from 'development-render'
import Vue from 'vue'

Vue.use(developmentRender)

• call through the instance of Vue

    this.$developmentRender.render({
      vnodes: vnodes,
      methods: methods,
      model: model,
      views: views,
      el: '#app',
      options: {
        $global: {
          env: 'runtime'
        }
      }
    })

  • vnodes：node data set of virtual DOM, data structure reference vnode of vue-desginer-online
  • views: object data set of view layer, data structure reference view of vue-desginer-online
  • methods：data set of functional script
    • content: function body script string
    • name: function name
    • descript: function description
    • type: function type, its aviriable value has 'callback','init','event','normal'
    • reference: component information referencing this function
      • ref: component referrence handle
      • handle: property reference handle
      • component: reference component name
  • model: data model objects, its a normal json object.
  • el: its point to a html dom where the development app will be mounted.
  • options:
    • $global
      • env: default value is 'runtime', identifies the runtime environment