Блог

Главная - Вопросы по программированию - Неперехваченная ошибка ссылки: Vuetify не определен

Неперехваченная ошибка ссылки: Vuetify не определен

#javascript #laravel #vue.js #vuetify.js

#javascript #laravel #vue.js #vuetify.js

Вопрос:

Я устанавливаю vuetify с помощью npm install vuetify , а затем добавляю npm install sass sass-loader deepmerge -D , затем использую php artisan serve , и на сайте ничего нет, а в консоли появляется ошибка Uncaught ReferenceError: Vuetify is not defined .Также я добавляю vue add vuetify, и был создан файл плагина и добавлены зависимости. ничего не происходит.Пожалуйста, помогите мне исправить эту проблему. mainapp.vue

 <template>

  <v-app >
    
        <Navbar />

      
        <v-main>
              <router-view/>
        </v-main>

        <Footer />

    
         </v-app>

 
</template>

<script>
//import HelloWorld from './HelloWorld'
 import Navbar from './pages/navbar'
 import Footer from './pages/footer'


export default {
  components: { Navbar,Footer },
  name: 'App',
  // components: {
  //   HelloWorld
  // },
  data () {
    return {
      //
    }
  }
}
</script>

app.js

 require('./bootstrap');
window.Vue=require('vue');
import router from './router';
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
 Vue.use(Vuetify);

 Vue.component('mainapp',require('./components/mainapp.vue').default);
 const app=new Vue(
     {
         el: '#app',
         vuetify: new Vuetify(),
         router,
        
     }
 )

welcome.blade.php

 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
    <title>Fullstack Blog</title> 
          <link rel="stylesheet" href="/css/all.css">
          <!-- to show icons -->
          
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.8.95/css/materialdesignicons.css">  
         <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="app">
    <mainapp></mainapp>
       </div>
    </body>
    <script src="{{mix('/js/app.js')}}"></script>
</html>

Комментарии:

1. Я попытался воспроизвести проблему с моей стороны. Единственной проблемой, которую я обнаружил, был пакет маршрутизатора. попробуйте использовать пакет «vue-router» вместо «router»

2. Это означает, что изменить импорт маршрутизатора из ‘./ router’; импортировать vue-router из ‘./ router’;

3. Нет, вам необходимо установить пакет vue-router. И используйте import router из ./’vue-router’