vue.js - Laravel Vue Cli 项目中未检测到所有 vuetify 组件

Question

我将 vuetify 添加到我的 laravel cli vue 项目中，但未检测到它的所有组件

下面是我项目中相关文件的内容：

index.js

require("./bootstrap");
require("bootstrap");
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import i18n from "./i18n";
import store from "./store";
import Vuelidate from "vuelidate";
import "v-slim-dialog/dist/v-slim-dialog.css";
import vuetify from "../../src/plugins/vuetify";
import Notification from "vue-notification";

Vue.use(Notification);
Vue.use(Vuelidate);
Vue.component("navbar", require("./vue/navbar.vue").default);
Vue.component("footer-commponent", require("./vue/footer.vue").default);

Vue.config.productionTip = false;

new Vue({
    router,
    store,
    vuetify,
    i18n,
    render: h => h(App)
}).$mount("#app");

Vuetify.js

import Vue from 'vue';
// import Vuetify from 'vuetify/lib/framework';
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify({});

lib.d.js

declare module 'vuetify/lib' {
  // eslint-disable-next-line import/no-duplicates
  import { VueConstructor, DirectiveOptions } from 'vue'
  import Vuetify from 'vuetify'
  import { Colors } from 'vuetify/lib/util/colors'

  export default Vuetify

  const colors: Colors

   .....
   
  }

应用程序.vue

<template>
    <v-app>
        <app-bar v-if="isLogged" />
        <v-main>
            <notification />
            <v-container
                fluid
                style="background-color: #F5F5F5; min-height: 90vh;"
                class="pa-0 ma-0"
            >
                <navbar></navbar>
                <router-view></router-view>
                <footer-commponent/>
            </v-container>
        </v-main>
    </v-app>
</template>

<script>
import appBar from "./component/app-bar";
import notification from "./component/notification";
import axios from "./../../src/plugins/api";

export default {
    name: "App",

    components: {
        notification,
        "app-bar": appBar,
    },

    data: () => ({
        //
    }),
    created() {
        if (this.$store.state.auth.token) {
            axios.defaults.headers.common["Authorization"] =
                "Bearer " + this.$store.state.auth.token;
        }
        if (localStorage.getItem("locale"))
            this.$i18n.locale = localStorage.getItem("locale");
    },

    computed: {
        isLogged() {
            return this.$store.getters["auth/isSignedIn"];
        }
    }
};
</script>
<style lang="scss">
 @import "./../../src/sass/app.scss";
</style>

包.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "dependencies": {
        "@chenfengyuan/vue-carousel": "^1.0.6",
        "@mdi/js": "^5.9.55",
        "@popperjs/core": "^2.9.1",
        "@vue/compiler-sfc": "^3.0.7",
        "bootstrap": "^5.0.0-beta2",
        "bootstrap-float-label": "^3.0.1",
        "cross-env": "^7.0.3",
        "google-maps": "^4.3.3",
        "jquery": "^3.6.0",
        "js-cookie": "^2.2.1",
        "promise": "^8.1.0",
        "qs": "^6.10.1",
        "v-slim-dialog": "0.0.10",
        "vee-validate": "^4.2.3",
        "vue": "^2.6.12",
        "vue-i18n": "^8.24.1",
        "vue-notification": "^1.3.20",
        "vue-recaptcha": "^1.3.0",
        "vue-router": "^3.5.1",
        "vuelidate": "^0.7.6",
        "vuetify": "^2.5.0",
        "vuex": "^3.6.2",
        "vuex-map-fields": "^1.4.1",
        "vuex-map-state": "^1.0.0",
        "yup": "^0.32.9"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "@tailwindcss/typography": "^0.3.0",
        "alpinejs": "^2.7.3",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "node-sass": "^5.0.0",
        "postcss": "^8.1.14",
        "postcss-import": "^12.0.1",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.8",
        "sass-loader": "^10.1.1",
        "tailwindcss": "^2.0.1",
        "vue-cli-plugin-vuetify": "~2.4.0",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.12",
        "vuetify-loader": "^1.7.0"
    }
}

所有页面中的错误

请帮助我，我尝试删除节点模块文件夹并重新安装它（npm install），但它仍然无法正常工作。