网上Vue模板不是最新的，我自己做了一个最新的支持 Vue.js 的最小工程模板，方便大家从 Hello world. 入门, 在 VS2017 里学习，并扩展出自己的项目。
下面是创建步骤：
1、在VS2017中建立一个新的 MVC 项目
略
2、用 npm 添加 vue 支持包
在MVC项目目录下执行：
npm init
npm i --save-dev webpack webpack-cli
npm i --save-dev vue vue-loader vue-template-compiler
3、添加配置文件和运行文件
在vs项目中，创建 webpack.config.js 配置文件
const path = require('path');
const bundleOutputDir = './wwwroot/dist';
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
resolve: {
extensions: ['.js', '.vue']
},
entry: './ClientApp/main.js',
module: {
rules: [
{ test: /.vue$/, include: /ClientApp/, loader: 'vue-loader' }
]
},
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
plugins: [
new VueLoaderPlugin()
]
}
这算是最小配置了吧。
将vue 程序添加到 ClientApp 目录中，并且加入 main.js
import Vue from 'vue'
import App from './App'
new Vue({
el: "#app",
render:h=>h(App)
})
对应的 App.vue 文件内容：
<template>
<div id="app">
<h2>Hello Vue. {{message}}</h2>
</div>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
message: "ok."
}
}
}
</script>
修改 HomeController 的 Index.cshtm 文件
@{ ViewData["Title"] = "Home Page"; } <div id='app'> </div> @section scripts { <script src="~/dist/main.js" asp-append-version="true"></script> }
Shared 文件夹下除了 _Layout.cshtml 文件，其它都删掉。并将 _Layout.cshtml 文件内容改为：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - NewTestVue</title> <base href="~/" /> <environment exclude="Development"> <link rel="stylesheet" href="~/dist/site.css" asp-append-version="true" /> </environment> </head> <body> @RenderBody() @RenderSection("scripts", required: false) </body> </html>
将 Views 目录下多余的文件删除。最后剩下如下文件：
4、手动编译 vue 文件
这时，如果手动编译 vue 项目，可在项目目录下执行：
npx webpack --mode development
5、在VS中运行项目
这时在 VS2017 中执行项目，结果是:
6、后继扩展
现在虽然已经可以运行了，但，vue文件修改后，还只能到命令行手动编译。所以接下来是如何实现：
- 支持在VS项目中，点击运行时，自动编译vue文件；
- 支持在运行状态下，动态修改 vue 文件，不停止项目运行也能自动编译js文件；
- 在vue源文件，有出错信息时，还需要能定位到源文件的位置；
为此我把扩展后的模板上传了，点此下载。希望对大家在VS中学习使用 vue 有帮助。
7、参考资料
《webpack4.0实战那些事儿》 Webpack 4.0 的配置命令解释
《Webpack 4 和单页应用入门》 这个资料很不错，相信你可以学到更多。
《ASP.NET Core, Visual Studio 2017, Vue and ES6 (ES2015)》 工程有点老，还是有帮助的。