@pluginarch/create-parch/templates/app/src/pages/canvasEditor/js/init.js

this is way to create a ui project

/**
 * osp调用入口函数
 * @param {Object} attrs 属性对象
 * @param {String} dom 绑定的dom节点名称
 * @param {String} qtScript qt脚本字符串
 */
function initRender(attrs, dom, qtScript) {
  const elementId = attrs.attrMap.id
  const { script, events } = scriptFormat(elementId, attrs, qtScript)
  const componentName = 'nusp-' + attrs.tag.toLocaleLowerCase()
  const $attr = {}
  for (key in attrs.attrMap) {
    $attr[`_${key}`] = attrs.attrMap[key]
  }
  let debugscript = script
  if (window.GScriptDebug && window.GScriptDebug === 1) {
    const pos = script.indexOf('{');
    if (pos > -1) {
      debugscript = script.slice(0, pos + 1) + '\n debugger;' + script.slice(pos + 1);
    }
  }
  $attr['_vue_script'] = debugscript
  const renderstr = `return _c('${componentName}',{attrs:${JSON.stringify(
    $attr
  )},on:${events}})}`
  vueInit(elementId, renderstr, dom, debugscript)
}

function initRenderMethod(attrs, qtScript) {
  const elementId = attrs.attrMap.id;
  let { script, events } = scriptFormat(elementId, attrs, qtScript);
  if (window.GScriptDebug && window.GScriptDebug === 1) {
    const pos = script.indexOf('{');
    if (pos > -1) {
      script = script.slice(0, pos + 1) + '\n debugger;' + script.slice(pos + 1);
    }
  }
  try {
    var __vue_script__ = new Function(`return {
      methods:{
	${script}
      }
    }`)
  } catch (err) {
    console.error(id, 'param formatter error', err)
  }
  methodsBind(elementId, __vue_script__());
}

function vueInit(id, renderStr, dom, script) {
  try {
    var __vue_render__ = new Function(`return function() {
      var _vm = this
      var _h = _vm.$createElement
      var _c = _vm._self._c || _h
      ${renderStr}`)

    var __vue_script__ = new Function(`return {
      methods:{
	${script}
      }
    }`)
  } catch (err) {
    console.error(id, 'param formatter error', err)
  }
  try {
    var vm = new Vue({
      render: h =>
        h(__vue_normalize__({ render: __vue_render__() }, __vue_script__())),
      mounted() {
        if (this.$children[0]
          && this.$children[0].$children[0]
          && this.$children[0].$children[0].itemComplete
          && typeof this.$children[0].$children[0].itemComplete === 'string'
          && this.$children[0].$children[0].itemComplete != '') {
          this.$children[0][this.$children[0].$children[0].itemComplete]();
        }
      }
    });


    vm.$mount(dom)
  } catch (err) {
    console.error('vue instance init error', err)
  }
  methodsBind(id, __vue_script__())
}

function __vue_normalize__(template, script) {
  var component = (typeof script === 'function' ? script.options : script) || {}
  component.render = template.render
  component.staticRenderFns = template.staticRenderFns || []
  component._compiled = true
  return component
}

/**
 * 将script标签中的自定义函数绑定到对应的实例中
 * @param {*} id
 * @param {*} funObj
 */
function methodsBind(id, funObj) {
  if (Object.prototype.toString.call(window[id]) === '[object Object]') {
    Object.assign(window[id], funObj.methods)
  }
}

function initRenderBatch(dom, componentArr) {
  /*
  const vm = new Vue({
  el: "#app",
  render(h){
      return h("div",{
    class:"box",
      },[
    h("span","我是一个span标签"),
    h("input",{
        attrs:{
      type:"button",
      value:"按钮"
        }
    })
      ])
  }
    })
  */
  const elementarr = []
  for (let i = 0; i < componentArr.length; i++) {
    const json = { 'elementId': '', 'renderStr': '', 'script': '', 'divInfo': '' }
    let attrs = componentArr[i].props
    let qtScript = componentArr[i].script
    json.elementId = attrs.attrMap.id
    const { script, events } = scriptFormat(json.elementId, attrs, qtScript)
    const componentName = 'nusp-' + attrs.tag.toLocaleLowerCase()
    const $attr = {}
    for (key in attrs.attrMap) {
      $attr[`_${key}`] = attrs.attrMap[key]
    }
    json.renderStr = `return _c('${componentName}',{attrs:${JSON.stringify(
      $attr
    )},on:${events}})}`
    let debugscript = script
    if (window.GScriptDebug && window.GScriptDebug === 1) {
      const pos = script.indexOf('{');
      if (pos > -1) {
        debugscript = script.slice(0, pos + 1) + '\n debugger;' + script.slice(pos + 1);
      }
    }
    json.script = debugscript
    json.divInfo = componentArr[i].divInfo
    elementarr.push(json)
  }
  vueInitBatch(dom, elementarr)
}
function calDivScope(str) {
  //  if(str) {
  //    str = Number(str) * commonGraphVar.dockBoxZoomPara * commonGraphVar.ratioCB
  //  }
  return str
}
function vueInitBatch(dom, elementarr) {
  // new Vue({
  //  render: (h)=>{
  //   return h("div",{
  //     class:"box",
  //   },[
  //     h("span","我是一个span标签"),
  //     h("div",{
  //         attrs:{
  //             type:"button",
  //             value:"按钮"
  //         }
  //     })
  //   ])
  // }
  // }).$mount(dom);
  const components = []
  for (let i = 0; i < elementarr.length; i++) {
    try {
      var __vue_render__ = new Function(`return function() {
	  var _vm = this
	  var _h = _vm.$createElement
	  var _c = _vm._self._c || _h
	  ${elementarr[i]['renderStr']}
	`)

      var __vue_script__ = new Function(`return {
	  methods:{
	    ${elementarr[i]['script']}
	  }
	}`)
    } catch (err) {
      console.error(elementarr[i].elementId, 'param formatter error', err)
    }
    components.push({ '__vue_render__': __vue_render__, '__vue_script__': __vue_script__, '_divInfo_': elementarr[i].divInfo, 'elementId': elementarr[i].elementId })
  }
  const extendDivStyle =
  {
    'position': 'absolute',
    'padding': '0px',
    'margin': '0px',
    'z-index': '10000'
  }
  try {
    new Vue({
      render: h =>
        //   h(__vue_normalize__({ render: __vue_render__() }, __vue_script__()))
        h('div', { style: { width: '100%', height: '100%', left: 0, top: 0, position: 'absolute' }, attrs: { id: 'overallDrawingDiv' } },
          //	 h('div',{style:{'flex':'1','z-index':'2','background-color':'rgba(0,0,0,0)','width':'100%','height':'100%','left':'0','top':'0','position':'absolute'},attrs:{id:'editorDiv'}},
          components.map(function (json) {
            return h('div', { attrs: { id: json._divInfo_.id }, class: json._divInfo_.className, style: Object.assign({}, extendDivStyle, { top: calDivScope(json._divInfo_.top), left: calDivScope(json._divInfo_.left), width: calDivScope(json._divInfo_.width), height: calDivScope(json._divInfo_.height), opacity: json._divInfo_.opacity }) },
              [h(__vue_normalize__({ render: json.__vue_render__() }, json.__vue_script__()))]
            )
          })
        )
    }).$mount(dom)
    var editorDiv = graphCommonFunction.isFragment() ? commonGraphVar.fragment : document.getElementById('editorDiv')
    if (document.querySelector('#overallDrawingDiv')) {
      editorDiv.appendChild(document.querySelector('#overallDrawingDiv'))
    }
    for (let i = 0; i < components.length; i++) {
      methodsBind(components[i].elementId, components[i].__vue_script__())
    }
  } catch (err) {
    console.error('vue instance init error', err)
  }

}