Vuetify 中的未知自定义元素

Posted

技术标签:

【中文标题】Vuetify 中的未知自定义元素【英文标题】：Unknown custom element in Vuetify 【发布时间】：2020-09-16 15:11:07 【问题描述】：

我是 Vuetify 和 vue 的新手。我正在使用 vue 和 vuetify 但由于某种原因我无法打开我的页面。运行项目时出现的错误：

[Vue 警告]：未知的自定义元素：- 你是否注册了 组件正确吗？对于递归组件，请确保提供 “名称”选项。

发现于

--->在资源/js/components/appContainer.vue

我的代码：

appContainer.vue

<template>
  <v-app id="inspire">
    <v-navigation-drawer
      v-model="drawer"
      app
    >
      <v-list dense>
        <v-list-item link>
          <v-list-item-action>
            <v-icon>mdi-home</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Home</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item link>
          <v-list-item-action>
            <v-icon>mdi-contact-mail</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Contact</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar
      app
      color="indigo"
      dark
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>

    <v-content>
      <v-container
        class="fill-height"
        fluid
      >
        <v-row
          align="center"
          justify="center"
        >
          <v-col class="text-center">
            <v-tooltip left>
              <template v-slot:activator=" on ">
                <v-btn
                  :href="source"
                  icon
                  large
                  target="_blank"
                  v-on="on"
                >
                  <v-icon large>mdi-code-tags</v-icon>
                </v-btn>
              </template>
              <span>Source</span>
            </v-tooltip>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
    <v-footer
      color="indigo"
      app
    >
      <span class="white--text">&copy; 2019</span>
    </v-footer>
  </v-app>
</template>

<script>
  export default 
    props: 
      source: String,
    ,
    data: () => (
      drawer: null,
    ),
  
</script>

app.js

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue'

import Vuetify from './plugins/vuetify'

Vue.use(Vuetify);

Vue.component('app-container', require('./components/appContainer.vue').default);

const app = new Vue(
    Vuetify,
    Vue,
    el: '#app',
);

spa.blade.php

<!doctype html>
<html lang=" str_replace('_', '-', app()->getLocale()) ">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content=" csrf_token() ">

    <title> config('app.name', 'Laravel') </title>

    <!-- Scripts -->
    <script src=" asset('js/app.js') " defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

    <!-- Styles -->
    <link href=" asset('css/app.css') " rel="stylesheet">
</head>
<body>
    <div id="app">
        <app-container></app-container>

    </div>
</body>
</html>

vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = 

export default new Vuetify(opts)

【问题讨论】：

【参考方案1】：

您似乎没有为您的 app-container 元素指定导出名称。试试下面的。

appContainer.vue

<template>
  ...
</template>
<script>
  export default 
    name: 'app-container'
    props: 
      source: String,
    ,
    data: () => (
      drawer: null,
    ),
  
</script>

【讨论】：

【参考方案2】：

尝试将抽屉从null改为false：

data: () => (
    drawer: false,
),

【讨论】：

【参考方案3】：

请将您的组件名称设为驼峰式。 像 Vue.component('appContainer',require('./components/apContainer.vue').default);

【讨论】：

以上是关于Vuetify 中的未知自定义元素的主要内容，如果未能解决你的问题，请参考以下文章

Vuetify Jest 未知自定义元素 <v-*>

vuetify 插件 2021 上的未知自定义元素 Vue Jest 测试 - Vue Cli 2

Vue/Vuetify - 未知的自定义元素：<v-app> - 您是不是正确注册了组件？

未知的自定义元素：使用 vuetify 组件时的 <v-app>

Vuetify 错误：未知的自定义元素：<v-app-bar> - 您是不是正确注册了组件？

SimulatedGreg Electron-Vue-Vuetify 错误消息：[Vue 警告]：未知自定义元素：<v-app> - 您是不是正确注册了组件？