vue.js - - 您是否正确注册了组件？

Question

我是 Vuetify 和 Vue.js 的新手。

我尝试制作 v-card 布局但失败了。

老实说，我复制粘贴这段代码:

https://github.com/vuetifyjs/vuetifyjs.com/blob/master/src/examples/layouts/centered.vue

当我运行时出现错误:

vue.runtime.esm.js?2b0e:587 [Vue warn]: Unknown custom element: <v-card> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Login> at src/views/Login.vue
       <VApp>
         <App> at src/App.vue
           <Root>

I already install vuetify but still error. Any solution ?

更新:

If i import the vuetify, i get another error : import of entire module vuetify not allowed due to preventFullImport setting

Answer 1

如果您使用 vue-cli-3，您可能在某些时候可以选择“点菜”或完全导入。您可以使用它来导入您需要的组件或删除“点菜”:

• 在 src/plugins/vuetify.js 中导入 vcard 组件，例如:

  import Vue from "vue";
  import {
      Vuetify,
      VApp,
      VCard,
      /* other imports ... */
  } from "vuetify";
  import "vuetify/src/stylus/app.styl";
  
  Vue.use(Vuetify, {
      components: {
          VApp,
          VCard,
         /* other imports */
      },
      /* theme option */
  });
  

• 通过修改 /babel.config.js 文件移除“单点”导入:

  plugins: [
      [
        "transform-imports",
        {
          vuetify: {
            transform: "vuetify/es5/components/${member}",
            /* change the preventFullImport property to false */
            preventFullImport: true
          }
        }
      ]
    ]