Vuetify 组件导入问题

Posted 2023-02-22

【中文标题】Vuetify 组件导入问题

【英文标题】：Vuetify components import issue

【发布时间】：2018-12-14 22:11:49

【问题描述】：

我正在尝试将 vuetify 导入现有的 vue 项目。 Laravel 用作后端。

Laravel-mix webpack.mix.js 文件：

let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')

基本 app.js：

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import App from './App'

Vue.use(Vuetify)

new Vue(
  el: '#app',
  router,
  render: h => h(App)
)

App.vue：

<template>
  <v-app>

  </v-app>
</template>

访问网页时vue会报错：

[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

---> <App> at /var/www/project/resources/assets/App.vue
       <Root>

所以看起来 vue 找不到 veutify vApp 组件，但是我看到 vuetify 代码及其组件代码包含在编译的 app.js 中。 可能是 webpack.mix.js 的配置错误。

请告知还应该检查什么，尤其是在 laravelmix-vue-vuetify 束方面？

【问题讨论】：

你能在主 vue 实例中找到 $vuetify 吗？

@AnkitKumarOjha 看起来是未定义的

【参考方案1】：

我没有专心。 vue 被导入了两次： 1. 在 html 中通过<script src> 2. 在 app.js 中通过 import

删除<script src> 后问题消失了。