Laravel + Vue 集成 Vuetify 不起作用

问题描述

我是 laravel + vue 的新手。我正在使用 metronic 模板。我完成了在 Laravel 项目中集成 Vue。但是我有一个问题，该应用程序可以工作，但它不读取 vuetify-component。浏览器控制台没有任何错误。有人知道我是如何解决问题的吗？

\resources\js\src\main.js

    import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    import store from "@/core/services/store";
    import ApiService from "@/core/services/api.service";
    import MockService from "@/core/mock/mock.service";
    import { VERIFY_AUTH } from "@/core/services/store/auth.module";
    import { RESET_LAYOUT_CONfig } from "@/core/services/store/config.module";
    
    Vue.config.productionTip = false;
    
    // Global 3rd party plugins
    import "popper.js";
    import "tooltip.js";
    import PerfectScrollbar from "perfect-scrollbar";
    window.PerfectScrollbar = PerfectScrollbar;
    import ClipboardJS from "clipboard";
    window.ClipboardJS = ClipboardJS;
    
    // Vue 3rd party plugins
    import i18n from "@/core/plugins/vue-i18n";
    import vuetify from "@/core/plugins/vuetify";
    import "@/core/plugins/portal-vue";
    import "@/core/plugins/bootstrap-vue";
    import "@/core/plugins/perfect-scrollbar";
    import "@/core/plugins/highlight-js";
    import "@/core/plugins/inline-svg";
    import "@/core/plugins/apexcharts";
    import "@/core/plugins/metronic";
    import "@mdi/font/css/materialdesignicons.css";
    
    // API service init
    ApiService.init();
    
    // Remove this to disable mock API
    MockService.init();
    
    router.beforeEach((to,from,next) => {
        // Ensure we checked auth before each page load.
        Promise.all([store.dispatch(VERIFY_AUTH)]).then(next);
    
        // reset config to initial state
        store.dispatch(RESET_LAYOUT_CONfig);
    
        // Scroll page to top on every route change
        setTimeout(() => {
            window.scrollTo(0,0);
        },100);
    });
    
    new Vue({
        router,store,i18n,vuetify,render: h => h(App)
    }).$mount("#app");

resources/js/src/App.vue

<template>
    <v-app>
        <router-view></router-view>
    </v-app>
</template>

<style lang="scss">
// 3rd party plugins css
@import "~bootstrap-vue/dist/bootstrap-vue.css";
@import "~perfect-scrollbar/css/perfect-scrollbar.css";
@import "~socicon/css/socicon.css";
@import "~@fortawesome/fontawesome-free/css/all.css";
@import "~line-awesome/dist/line-awesome/css/line-awesome.css";
@import "assets/plugins/flaticon/flaticon.css";
@import "assets/plugins/flaticon2/flaticon.css";
@import "assets/plugins/keenthemes-icons/font/ki.css";

// Main demo style scss
@import "assets/sass/style.vue";

// Check documentation for RTL css
// Update HTML with RTL attribute at public/index.html
/*@import "assets/css/style.vue.rtl";*/

@import "~vuetify/dist/vuetify.min.css";
@import url("https://fonts.googleapis.com/css?family=Material+Icons");
@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900");
@import url("https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css");
</style>

<script>
import { OVERRIDE_LAYOUT_CONfig } from "@/core/services/store/config.module";

export default {
    name: "MetronicVue",mounted() {
        /**
         * this is to override the layout config using saved data from localStorage
         * remove this to use config only from static json (@/core/config/layout.config.json)
         */
        // this.$store.dispatch(OVERRIDE_LAYOUT_CONfig);
    }
};
</script>

资源/app.js

require("./bootstrap");
require("./src/main.js");

app.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">
   <Meta name="csrf-token" value="{{ csrf_token() }}"/>
   <title>Laravel Vue</title>
   <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
   <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
   <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
</head>
<body>
   <div id="app">
   <v-app>
        <app></app>
    </v-app>
   </div>
   <script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>

有人有什么建议吗？我遵循了 Metronic Laraval+vue 集成文档的所有步骤。

解决方法

我终于解决了这个问题！我忘了在 app.js 中使用 vuetify

app.js

public static func updateStatusBarStyle(isLightBackground: Bool) {
  var statusBarStyle: UIStatusBarStyle
  if isLightBackground,#available(iOS 13.0,*) {
    statusBarStyle = .darkContent
  } else {
    statusBarStyle = isLightBackground ? .default : .lightContent
  }
  UIApplication.shared.setStatusBarStyle(statusBarStyle,animated: true)
}

app.blade.php

    import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "@/core/services/store";
import ApiService from "@/core/services/api.service";
import MockService from "@/core/mock/mock.service";
import { VERIFY_AUTH } from "@/core/services/store/auth.module";
import { RESET_LAYOUT_CONFIG } from "@/core/services/store/config.module";
import Vuetify from "vuetify";
Vue.config.productionTip = false;

// Global 3rd party plugins
import "popper.js";
import "tooltip.js";
import PerfectScrollbar from "perfect-scrollbar";
window.PerfectScrollbar = PerfectScrollbar;
import ClipboardJS from "clipboard";
window.ClipboardJS = ClipboardJS;

// Vue 3rd party plugins
import i18n from "@/core/plugins/vue-i18n";
import vuetify from "@/core/plugins/vuetify";
import "@/core/plugins/portal-vue";
import "@/core/plugins/bootstrap-vue";
import "@/core/plugins/perfect-scrollbar";
import "@/core/plugins/highlight-js";
import "@/core/plugins/inline-svg";
import "@/core/plugins/apexcharts";
import "@/core/plugins/metronic";
import "@mdi/font/css/materialdesignicons.css";

// API service init
ApiService.init();

// Remove this to disable mock API
MockService.init();

router.beforeEach((to,from,next) => {
    // Ensure we checked auth before each page load.
    Promise.all([store.dispatch(VERIFY_AUTH)]).then(next);

    // reset config to initial state
    store.dispatch(RESET_LAYOUT_CONFIG);

    // Scroll page to top on every route change
    setTimeout(() => {
        window.scrollTo(0,0);
    },100);
});
Vue.use(Vuetify);
new Vue({
    router,store,i18n,vuetify,render: h => h(App)
}).$mount("#app");

integration integration integration laravel laravel vue.js vuetify.js