1、新建 项目文件夹 pro,在 VS CODE 打开终端，输入dotnet new mvc 命令，新建asp.net core项目。

2、在Startup.cs添加webpack的引用与配置

using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using Microsoft.AspNetCore.Builder;using Microsoft.AspNetCore.Hosting;using Microsoft.AspNetCore.Http;using Microsoft.AspNetCore.HttpsPolicy;using Microsoft.AspNetCore.Mvc;using Microsoft.Extensions.Configuration;using Microsoft.Extensions.DependencyInjection;using Microsoft.AspNetCore.SpaServices.Webpack;namespace pro{ public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } // This method gets called by the runtime. Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { services.Configure<CookiePolicyOptions>(options => { // This lambda determines whether user consent for non-essential cookies is needed for a given request. options.CheckConsentNeeded = context => true; options.MinimumSameSitePolicy = SameSiteMode.None; }); services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); /////////////////////////////// app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true }); /////////////////////////////////// } else { app.UseExceptionHandler("/Home/Error"); app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseCookiePolicy(); app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); /////////////////////////////////////////////////// routes.MapSpaFallbackRoute( name: "spa-fallback", defaults: new { controller = "Home", action = "Index" }); /////////////////////////////////////////////////////// }); } }}

3、在根目录下添加webpack.config.js，负责配置webpack如何将vue，js，css，scss等其他文件编译到输出文件中。

var path = require(‘path‘)var webpack = require(‘webpack‘)const bundleOutputDir = ‘./wwwroot/dist‘; ///////输出目录module.exports = { context: __dirname, entry: { main: ‘./ClientApp/index.js‘ }, ////////////vue.js程序根目录 module: { rules: [ { test: /\.css$/, use: [ ‘vue-style-loader‘, ‘css-loader‘ ], }, { test: /\.vue$/, loader: ‘vue-loader‘, options: { loaders: { ‘scss‘: [ ‘vue-style-loader‘, ‘css-loader‘, ‘sass-loader‘ ], ‘sass‘: [ ‘vue-style-loader‘, ‘css-loader‘, ‘sass-loader?indentedSyntax‘ ] } } }, { test: /\.js$/, loader: ‘babel-loader‘, exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: ‘file-loader‘, options: { name: ‘[name].[ext]?[hash]‘ } } ] }, resolve: { alias: { ‘vue$‘: ‘vue/dist/vue.esm.js‘ }, extensions: [‘*‘, ‘.js‘, ‘.vue‘, ‘.json‘] }, devServer: { historyApiFallback: true, noInfo: true, overlay: true }, performance: { hints: false },output: { path: path.join(__dirname, bundleOutputDir), filename: ‘[name].js‘, publicPath: ‘dist/‘}, devtool: ‘#eval-source-map‘}if (process.env.NODE_ENV === ‘production‘) { module.exports.devtool = ‘#source-map‘ module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ ‘process.env‘: { NODE_ENV: ‘"production"‘ } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ])}

4、在根目录下添加.babelrc ，用于解析ES6语法

{ "presets": [ ["env", { "modules": false }], "stage-3" ]}

5、在根目录下添加package.json，配置npm包

{ "name": "aspnetcore-vuejs", "private": true, "version": "0.0.0", "devDependencies": { "@types/webpack-env": "^1.13.5", "aspnet-webpack": "^2.0.3", "babel-plugin-transform-object-rest-spread": "^6.26.0", "css-loader": "^0.25.0", "event-source-polyfill": "^0.0.7", "extract-text-webpack-plugin": "^2.1.2", "file-loader": "^0.9.0", "isomorphic-fetch": "^2.2.1", "jquery": "^3.3.1", "node-sass": "^4.5.3", "sass-loader": "^6.0.6", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "webpack": "^2.7.0", "webpack-hot-middleware": "^2.21.0" }, "dependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.6.1", "babel-preset-stage-3": "^6.24.1", "vue": "^2.5.13", "vue-loader": "^14.0.3", "vue-router": "^3.0.1", "vue-template-compiler": "^2.5.13" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ]}

6、执行dotnet restore命令

7、执行npm install(可用cnpm淘宝镜像代替)

8、修改Index.cshtml视图

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>- asp.net core 2.1 - vue.js</title> <script src="~/dist/main.js" asp-append-version="true"></script></head><body> <div id=‘app‘>Loading...</div></body></html>

9、添加ClientApp文件夹并创建以下：

index.js

import Vue from ‘vue‘import VueRouter from ‘vue-router‘ //导入路由插件的包import App from ‘./App.vue‘ //导入根组件Vue.config.productionTip = falseVue.use(VueRouter) //安装路由模块const routes = [ { path: ‘/‘, component: App }]const router = new VueRouter({ //创建路由对象 routes, mode: ‘history‘})new Vue({ el: ‘#app‘, render: h => h(App), router //挂载路由对象到 VM 实例上})

app.vue

<template> <div id="home"> <h1>Hello World!</h1> <h1>I an what I an</h1> </div></template><script>export default { }</script><style lang="scss"></style>

至此，.net core + vue.js 项目就搭建完成了。