ASP.NET MVC中Vue.js 3 CDN环境下集成Vuetify的方法咨询

你当前代码的核心问题是Vuetify 2.x 仅兼容Vue 2，而你引入的是Vue 3（vue@next），必须切换到Vuetify 3.x版本才能正常工作。以下是完整的修正步骤和代码示例：

1. 替换Vuetify的CDN资源 #

将原有的Vuetify 2.x CSS链接替换为Vuetify 3.x的CSS和JS资源，放在Vue的CDN之后：

<link href="https://cdn.jsdelivr.net/npm/vuetify@3.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.x/dist/vuetify.min.js"></script>

2. 修改Vue应用初始化代码 #

需要在Vue应用中安装Vuetify插件，并确保挂载目标#app存在于页面中：

完整的_Layout.cshtml代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"] - MVCAndVue</title>
    <!-- Vuetify 3 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/vuetify@3.x/dist/vuetify.min.css" rel="stylesheet">
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@next"></script>
    <!-- Vuetify 3 JS -->
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.x/dist/vuetify.min.js"></script>
</head>
<body>
    <!-- Vue挂载容器 -->
    <div id="app" class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    @await RenderSectionAsync("Scripts", required: false)

    <script>
        // 初始化Vuetify
        const vuetify = new Vuetify()

        // 定义Vue应用
        const App = {
            setup() {
                const message = Vue.ref('Hello Vuetify + Vue 3!')
                return { message }
            },
            template: `
                <v-app>
                    <v-main>
                        <v-container>
                            <v-card>
                                <v-card-title>{{ message }}</v-card-title>
                                <v-card-actions>
                                    <v-btn color="primary" @click="message = 'Button clicked!'">点击测试</v-btn>
                                </v-card-actions>
                            </v-card>
                            <!-- 渲染View页面内容 -->
                            <div>@RenderBody()</div>
                        </v-container>
                    </v-main>
                </v-app>
            `
        };

        // 创建并挂载Vue应用，注入Vuetify插件
        const app = Vue.createApp(App)
        app.use(vuetify)
        app.mount("#app");
    </script>
</body>
</html>

3. 页面View示例（如Index.cshtml） #

在具体View中可以直接编写Vuetify组件：

@{
    ViewData["Title"] = "Home Page";
}

<v-alert type="success" border="top">
    这是来自Index页面的Vuetify提示组件
</v-alert>

<v-list>
    <v-list-item title="列表项1"></v-list-item>
    <v-list-item title="列表项2"></v-list-item>
</v-list>

关键注意事项 #

• 必须保证Vue 3与Vuetify 3版本匹配，避免兼容问题
• Vuetify 3需要通过app.use(vuetify)将插件注入Vue应用
• 所有Vuetify组件必须包裹在<v-app>标签内，这是Vuetify的根组件要求

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