<v-card> - 您是否正确注册了组件？

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
        }
      }
    ]
  ]

<v-card> - 您是否正确注册了组件？

<v-card> - did you register the component correctly?

vue.js

vuetify.js