Laravel 和 Vuetify 未知的自定义元素

Question

我在 Laravel 中遇到了一些这样的错误。

[Vue warn]: Unknown custom element: <v-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <AdminComponent> at resources/js/components/AdminComponent.vue
       <Root>

所有自定义元素都是未知的。 这是我的错误说明。

My error

js/app.js

require('./bootstrap');

// Vue
import Vue from 'vue'

// Vuetify
import Vuetify from 'vuetify/lib'
import colors from 'vuetify/es5/util/colors'

// Vue-Router
import router from './router/index.js'

Vue.use(Vuetify, {
  theme: {
    light: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black,
        error: colors.red.accent3,
      }
  }
});

import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

// Main app
const app = new Vue({
    el: '#app',
    router,
});

此文件用于路由器。

js/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

//
import admin_component   from '../components/AdminComponent.vue'
import r_link            from '../components/RouterLink.vue'

//
Vue.component('admin-component', admin_component);

Vue.component('r-link', r_link)

//
import home              from '../components/HomeComponent.vue'
import admin_user        from '../components/Admin/UserComponent.vue'

export default new Router({
  mode: 'history',
  routes: [
    { path: '/',             name: 'home',          component: home,          meta: {name: 'home',   icon: 'home'}},
    { path: '/admin/user',   name: 'admin_user',    component: admin_user,    meta: {name: 'management', icon: 'supervisor_account'}},
  ],
})

这个组件有关于 vuetify 的错误。

js/components/AdminComponent.vue

<template>
  <v-app id="app">
    A lot of custom element
  </v-app>
</template>

<script>
  export default {
    name: 'AdminComponent',

    props: {
      name: String,
      logout: String,
    },

    data: () => ({
      drawer: false,
      footer: 'foo-----footer',
      title: 'tit------title',
    }),
  }
</script>

这是我的 package.json

{
  "dependencies": {
    "css-loader": "^3.2.0",
    "material-design-icons-iconfont": "^5.0.1",
    "vue-router": "^3.1.3",
    "vuetify": "^2.1.1"
  },
  "devDependencies": {
    "axios": "^0.18",
    "bootstrap": "^4.0.0",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^5.0.0",
    "lodash": "^4.17.5",
    "popper.js": "^1.12",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.22.12",
    "sass-loader": "^8.0.0",
    "vue": "^2.5.7",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.2.2"
  }
}

我的 laravel 版本是 5.7

php artisan --version

Laravel 框架 5.7.28

如何为 AdminComponent 注册组件？ 请有人帮忙...

Answer 1

差不多了...将您的 vuetify 实例传递到您的 vue 选项中。 在此处查看引导：https://vuetifyjs.com/en/getting-started/quick-start#bootstrapping-the-vuetify-object

const app = new Vue({
    el: '#app',
    router,
    vuetify
});