如何在VueJs中初始化NCForms库

Question

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

我测试了一些库，NCForms似乎完成了我需要做的所有工作(特别是，我需要处理多个数组的捕获(。

我试图按照文档中的描述初始化库，但在Template中失败了，因为它找不到一些元素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'｝(

感觉我应该在"；new Vue(("；声明——但我不确定是什么。。。。

Answer 1

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