如何将Vuetify.js项目导入Laravel 8.0.0项目中？

当然可以把Vuetify项目整合到新的Laravel项目中，针对你不知道怎么导入App.vue主布局的问题，我给你整理了一套清晰的步骤：

步骤1：调整Blade模板（welcome.blade.php） #

首先，你需要把原来直接写的<FeedbackForm></FeedbackForm>替换成Vue实例的挂载点，同时别忘了引入Vuetify的样式文件（这很关键，否则Vuetify组件会没有样式）。修改后的代码如下：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <!-- Vuetify 核心样式 -->
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <!-- Styles -->
    <style>
        /* 保留你原有的normalize.css和自定义样式 */
        /* ... 你的原有样式代码 ... */
        body { font-family: 'Nunito'; }
    </style>
</head>
<body class="antialiased">
    <!-- Vue 应用的根挂载节点 -->
    <div id="app"></div>

    <!-- 引入编译后的前端资源（Laravel Mix会生成该文件） -->
    <script src="{{ mix('js/app.js') }}"></script>
</body>

步骤2：修改app.js，导入App.vue作为根组件 #

原来的app.js是直接注册单个组件，现在我们要把App.vue作为整个Vue应用的根入口，这样你的主布局就能生效了。修改后的app.js代码：

require('./bootstrap');
import Vue from 'vue';
import Vuetify from "vuetify";
// 导入你的App.vue主布局文件
import App from './App.vue';

Vue.use(Vuetify);

const vuetify = new Vuetify({});

// 创建Vue实例，挂载到#app节点并渲染App.vue
new Vue({
    el: '#app',
    vuetify,
    render: h => h(App) // 通过render函数渲染根组件
});

步骤3：确保App.vue的结构规范 #

你的App.vue应该包含Vuetify的核心布局容器，示例结构如下：

<template>
    <v-app>
        <!-- 这里可以放置你的导航栏、侧边栏等全局布局元素 -->
        <v-main>
            <!-- 如果使用Vue Router，这里可以替换为<router-view />；否则直接引入组件 -->
            <FeedbackForm />
        </v-main>
    </v-app>
</template>

<script>
// 导入需要在主布局中使用的组件
import FeedbackForm from './components/FeedbackForm.vue';

export default {
    components: {
        FeedbackForm
    }
}
</script>

额外注意事项 #

• 确保依赖安装完整：如果还没安装Vuetify，执行npm install vuetify
• 编译前端资源：运行npm run dev或npm run watch让Laravel Mix编译你的Vue和JS文件
• 如果App.vue用到了Vue Router，记得在app.js中导入并配置路由规则

这样调整后，你的App.vue主布局就会被正确导入并渲染到Laravel的Blade模板中了～

内容的提问来源于stack exchange，提问作者Cookie