<v-card>- 您是否正确注册了组件? [英] <v-card> - did you register the component correctly?

问题描述

我是 Vuetify 和 Vue.js 的新手.

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

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

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

当我运行时出现错误:

vue.runtime.esm.js?2b0e:587 [Vue 警告]:未知自定义元素:<v-card>- 您是否正确注册了组件?对于递归组件，请确保提供名称"选项.在发现---><登录>在 src/views/Login.vue<VApp><应用程序>在 src/App.vue<根>

<块引用>

我已经安装了 vuetify 但仍然出错.有什么解决办法吗?

更新:

<块引用>

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

解决方案

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

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

  从vue"导入Vue；进口 {Vuetify，应用程序，电子卡，/* 其他进口... */来自vuetify"；导入vuetify/src/stylus/app.styl"；Vue.use(Vuetify, {成分: {应用程序，电子卡，/* 其他进口 */},/* 主题选项 */});

• 通过修改 /babel.config.js 文件删除à la carte"导入:

  插件:[[转换进口"，{验证:{转换:vuetify/es5/components/${member}"，/* 将 preventFullImport 属性更改为 false */防止完全导入:true}}]]

I'm new in Vuetify and Vue.js.

I try to make v-card layout but failed.

Be honest i copy paste this code :

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

And when i run i get error :

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 ?

Updated :

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

解决方案

If you used the vue-cli-3, you probably had the choice at some point to choose between "à la carte" or full import. You can either, use it to import the components you need or remove "à la carte" :

• Import vcard component in src/plugins/vuetify.js with something like :

  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 */
  });
  

• Remove the "à la carte" import by modifying the /babel.config.js file :

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

这篇关于&lt;v-card&gt;- 您是否正确注册了组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！