如何在.NET Core Razor Page中使用外部Vue组件（如Vue Cal）

你当前的核心问题是Vue版本不匹配，以及组件注册方式错误，以下是具体修复步骤：

1. 修正Vue实例创建代码（适配Vue 2.x） #

你在布局文件里引入的是Vue 2.6.11，但页面脚本里用了Vue 3的createAppAPI，两者完全不兼容。Vue 2需要用new Vue()来创建实例：

修改你的Razor页面脚本部分：

@section Scripts {
    <!-- 移除重复引入的Vue Cal，布局里已经加载过了 -->
    <script type="text/javascript">
        new Vue({
            el: '#calendar'
            // Vue Cal通过CDN引入后会全局注册，可直接使用；若要局部注册，写法如下：
            // components: {
            //   'vue-cal': window.VueCal
            // }
        })
    </script>
}

2. 调整组件标签写法 #

Vue 2对单标签的解析可能存在兼容性问题，建议将自闭合标签改为闭合标签：

<div id="calendar">
    <vue-cal style="height: 250px"></vue-cal>
</div>

3. 额外注意事项 #

• 避免重复引入：布局里已经加载了Vue和Vue Cal，页面的Scripts部分无需重复引入，否则可能引发冲突。
• 利用控制台排查：打开浏览器开发者工具（F12）的Console面板，查看是否有组件未找到、版本冲突等报错，这是前端问题排查的核心手段。

通用组件库使用流程（Razor Pages + Vue 2场景） #

1. 在_Layout.cshtml的<head>或页面底部（推荐底部，不阻塞页面渲染）通过CDN引入Vue和组件库的JS、CSS文件。
2. 在目标Razor页面中，创建用于挂载Vue实例的DOM容器。
3. 在@section Scripts中，用Vue 2的语法创建实例：全局注册的组件可直接使用，局部注册则需在components选项中声明组件。

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