当我尝试导入 Vuestrap 时在控制台中收到"unknown custom element"警告

Question

我是Vue的新手，我尝试导入和使用Vuestrap输入组件，如下所示。

这就是我的组件的外观（build-ui-x在node_modules下）：

<template>
  <div class="container">
    <div class="card">
      <div class="items-wrapper">
        <bs-input v-model="input"
                  label="Username"
                  help="Only allows lowercase letters and numbers."
                  error="Insert username"
                  placeholder="Username can't start with a number."
                  pattern="^[a-z][a-z0-9]+$"
                  :mask="mask"
                  minlength="5"
                  readonly
                  required
                  icon
        ></bs-input>
      </div>
    </div>
  </div>
</template>
<script>
  import * as BuiInput from 'build-ui-x/src/Input.vue';
  export default {
    name: 'buildPrimaryCard',
    data: function() {
      return {
        rdHeaderNames: ['SIN', 'Item', 'Rev'],
        input: ""
      }
    },
    computed: {
    },
    methods: {
      mask: function (value) {
        // change to lowercase, remove up to the first letter,
        // and then remove all other unsuported characters
        return value.toLowerCase().replace(/^[^a-z]+/,'').replace(/[^a-z0-9]/g,'');
      }
    },
    mounted () {
    },
    components: {
      BuiInput
    }
  }
</script>

build-ui-X只是Vuestrap的包装纸。github链接到此处的输入组件。

我在控制台上看到的错误：

vue.esm.js?65d7:571 [Vue warn]: Unknown custom element: <bs-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <BuildPrimaryCard> at D:workspacemyRebwebweb-rebsrccomponentsbuildBuildPrimaryCard.vue
       <Home> at D:workspacemyRebwebweb-rebsrccomponentsbuildBuild.vue
         <App> at D:workspacemyRebwebweb-rebsrcApp.vue
           <Root>

和build.vue：

<template>
  <div class="container">
    <div class="button-three-group">
      <button class="btn btn-primary">Save as draft</button>
      <button class="btn btn-primary">Output to PDF</button>
      <button class="btn btn-primary">Issued</button>
    </div>

    <build-primary-card></build-primary-card>
    <build-model-card></build-model-card>
    <build-revision-history-card></build-revision-history-card>
  </div>
</template>
<script>
import * as PrimaryCard from './BuildPrimaryCard.vue'
import * as ModelCard from './BuildModelCard.vue'
import * as RevisionHistoryCard from './BuildRevisionHistoryCard.vue'
export default {
  name: 'build',
  computed: {},
  methods: {},
  mounted () {},
  components: {
    'build-primary-card' : PrimaryCard,
    'build-model-card' : ModelCard,
    'build-revision-history-card' : RevisionHistoryCard
  }
}
</script>

我试图在输入文件中找到关键字" bs-Input"，但是没有什么比它。如果我在模板上使用它，应该有这样的参考？

Answer 1

我以前从未使用过vuestrap，但是查看代码，您应该导入输入组件，例如：

import bsInput from 'vue-strap/src/Input'

将其添加到组件

components: {
    BuiInput,
    bsInput
}