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

我已经安装了vuetify但仍然是错误的.有解决方案吗

更新 :

如果我导入vuetify,我得到另一个错误:由于preventFullImport设置导入整个模块vuetify不允许

Answer 1

如果您使用了vue-cli-3,您可能会在某个时候选择"点菜"或完全导入.您可以使用它导入所需的组件或删除"点菜":

• 使用以下内容导入vcard组件src/plugins/vuetify.js:

  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文件删除"àlacarte"导入:

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