如何在VueJs中初始化NCForms库

Question

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

我测试了几个库，NCForms似乎做了我需要做的一切。(具体来说，我需要处理多个数组的捕获)。

我试图像文档中描述的那样初始化这个库--但是它在模板中失败了，说它找不到一些元素-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>

错误是:未知的自定义元素：-正确注册组件吗？对于递归组件，请确保提供"name“选项。

我是不是遗漏了一些东西，比如注册各个组件？我想这行会处理它: Vue.use(vueNcform，{ extComponents: ncformStdComps，lang：'en‘})

我觉得我应该在“新Vue()”语句中放点什么--但我不知道.

Answer 1

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