Блог

Я новичок в Vue CLI, и я пытаюсь создать небольшое приложение. В рамках этого я хочу сгенерировать несколько форм.

Я протестировал несколько библиотек, и NCForms, похоже, делает все, что мне нужно. (в частности, мне нужно обработать захват нескольких массивов).

Я попытался инициализировать библиотеку, как описано в документации, но в шаблоне произошел сбой, в котором говорилось, что он не может найти некоторые компоненты пользовательского интерфейса.

Я почти уверен, что правильно следовал инструкциям, но, должно быть, я упускаю что-то маленькое.

Мой 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 amp; 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 ()», но я не уверен, что именно….

В main.js , вам необходимо указать: Vue.use(Element);