时间戳

首页 > 解决方案 > - 您是否正确注册了组件？

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

问题描述

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

标签： vue.jsvuetify.js

解决方案

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

  • 使用以下内容导入 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通过修改文件删除“点菜”导入：

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

推荐阅读