如何在 VueJs 中初始化 NCForms 库

Question

我是 Vue CLI 的新手，我正在尝试构建一个小型应用程序。作为其中的一部分，我想生成一些表单。

我已经测试了几个库，并且 NCForms 似乎可以完成我需要做的所有事情。 （具体来说，我需要处理多个数组的捕获）。

我尝试按照文档中的说明初始化库 - 但在模板中失败，说它找不到某些 element-ui 组件。

我很确定我正确地遵循了说明 - 但我一定是遗漏了一些小东西。

我的 main.js 文件如下所示：

import 'ant-design-vue/lib/style/index.less' // antd core styles
import './@kit/vendors/antd/themes/default.less' // default theme antd components
import './@kit/vendors/antd/themes/dark.less' // dark theme antd components
import './global.scss' // app & third-party component styles

import Vue from 'vue'
import VuePageTitle from 'vue-page-title'
import NProgress from 'vue-nprogress'
import VueLayers from 'vuelayers'
import BootstrapVue from 'bootstrap-vue'
import VueFormulate from '@braid/vue-formulate'

// Form generator: Vue-Form-Generator: https://github.com/vue-generators/vue-form-generator
import VueFormGenerator from 'vue-form-generator'
import 'vue-form-generator/dist/vfg.css'

// Form generator: NCForms: https://github.com/ncform/ncform
import vueNcform from '@ncform/ncform'
// eslint-disable-next-line no-unused-vars
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import ncformStdComps from '@ncform/ncform-theme-elementui'

// REST Calls: Axios: https://github.com/axios/axios
import axios from 'axios'

// Local files
import App from './App.vue'
import router from './router'
import store from './store'
import { i18n } from './localization'
import './antd'
import './registerServiceWorker'

// mocking api
import './services/axios/fakeApi'

Vue.use(BootstrapVue)
Vue.use(VueLayers)
Vue.use(NProgress)
Vue.use(VuePageTitle, {
  prefix: 'Nedbank PhishTank | ',
  router,
})
// Form generator: Vue-Form-Generator
Vue.use(VueFormGenerator)
// Form generator: NCForms
Vue.use(vueNcform, { extComponents: ncformStdComps, lang: 'en' })
window.$http = Vue.prototype.$http = axios

Vue.use(VueFormulate)
Vue.config.productionTip = false
const nprogress = new NProgress({ parent: 'body' })
new Vue({
  router,
  store,
  nprogress,
  i18n,
  render: h => h(App),
}).$mount('#app')

我的模板如下所示：

<template>
  <div>
    <ncform :form-schema="formSchema" form-name="settings-form" v-model="item" @submit="submit()"></ncform>
    <el-button @click="submit()">Submit</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formSchema: {
        type: 'object',
        properties: {
          name: {
            type: 'string',
          },
        },
      },
      item: {
        name: 'Peter Pan',
      },
    }
  },
  methods: {
    submit () {
      this.$ncformValidate('settings-form').then(data => {
        if (data.result) {
          console.log(this.$data.formSchema.value)
          // do what you like to do
          alert('finally!!!')
        }
      })
    },
  },
}
</script>

错误是： 未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

我是否遗漏了注册单个组件之类的内容？我认为这行会处理它：Vue.use(vueNcform, { extComponents: ncformStdComps, lang: 'en' })

感觉我应该在“new Vue()”语句中加入一些东西——但我不确定是什么......

Answer 1

在main.js中，需要指定：Vue.use(Element);