如何在ASP.NET MVC分部视图中使用Vue组件（*.vue文件）

数据老陈

2026-5-27

嘿，我正好在老ASP.NET MVC项目里做过Vue逐步替换jQuery的事儿，分部视图确实是个非常合适的切入点！针对你问的怎么在分部视图里用*.vue格式组件，我给你捋一遍实操过的具体步骤：

第一步：给MVC项目搭Vue构建环境

老的ASP.NET MVC项目默认没有webpack这类工具，得先把Vue组件的打包环境搭起来：

打开项目根目录的命令行，初始化npm：npm init -y

安装Vue2相关的依赖（注意要对应Vue2版本，别装成Vue3）：

npm install vue@2 vue-loader vue-template-compiler webpack webpack-cli --save-dev

新建webpack.config.js配置文件，指定入口、输出路径和.vue文件的处理规则：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './Scripts/dist'),
    filename: 'vue-bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

在package.json里添加打包脚本，方便后续编译组件：
```
"scripts": {
  "build": "webpack --mode production"
}
```

第二步：创建.vue组件和入口文件

在项目根目录新建src文件夹，里面再建components子文件夹，用来放你的Vue组件，比如src/components/MyPartialComponent.vue：

<template>
  <div class="vue-component-wrapper">
    <h4>{{ componentTitle }}</h4>
    <p>当前计数：{{ count }}</p>
    <button @click="incrementCount">点我加1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentTitle: '这是分部视图里的Vue组件',
      count: 0
    }
  },
  methods: {
    incrementCount() {
      this.count++;
    }
  }
}
</script>

<style scoped>
.vue-component-wrapper {
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>

在src/main.js里注册全局组件，这样分部视图就能直接调用：

import Vue from 'vue';
import MyPartialComponent from './components/MyPartialComponent.vue';

// 注册全局组件，命名要符合HTML标签规范（小写加横线）
Vue.component('my-partial-component', MyPartialComponent);

第三步：在分部视图里集成Vue组件

先运行npm run build，把组件打包成Scripts/dist/vue-bundle.js

创建一个分部视图，比如Views/Shared/_VueDemoPartial.cshtml：

<!-- 先引入Vue2的CDN（如果打包时没把Vue放进bundle里的话） -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入我们打包好的组件bundle -->
<script src="~/Scripts/dist/vue-bundle.js"></script>

<!-- Vue实例挂载的容器 -->
<div id="vue-partial-container">
  <!-- 直接使用注册好的全局组件 -->
  <my-partial-component></my-partial-component>
</div>

<script>
// 初始化Vue实例，接管容器内的DOM
new Vue({
  el: '#vue-partial-container'
});
</script>

在主视图里引用这个分部视图就行，比如Home/Index.cshtml：

<div class="container">
  <h1>ASP.NET MVC + Vue 集成演示</h1>
  <!-- 插入Vue分部视图 -->
  @Html.Partial("_VueDemoPartial")
</div>

第四步：处理Vue和jQuery的共存问题

因为你的项目里还有大量jQuery代码，得注意两者的边界：

不要让jQuery修改Vue管理的DOM元素，Vue会自己接管组件内部的渲染

如果分部视图里必须用jQuery（比如老的插件），可以把jQuery代码放在Vue的mounted钩子或$nextTick里，确保Vue渲染完成后再执行：

// 在Vue组件的script里添加
mounted() {
  this.$nextTick(() => {
    // 比如初始化一个jQuery日期选择器
    $('.jquery-datepicker').datepicker();
  });
}

小贴士

一开始可以先在单个分部视图里小范围测试，确认没问题后再逐步扩展到其他视图；如果不想用webpack，也可以用Vue CDN结合预编译模板，但webpack的方式更适合长期维护组件库。

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

如何在ASP.NET MVC分部视图中使用Vue组件（*.vue文件）

小贴士 #

小贴士