在dotnetcore的MVC项目中，创建支持 vue.js 的最小工程模板

网上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)》工程有点老，还是有帮助的。

《用webpack4打包vue多页项目》

《Setting up a Vue.js Project with webpack 4 and Babel 7》