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 项目就搭建完成了。
ASP.NET Core + Vue.js 开发
原文地址：https://www.cnblogs.com/gundam00/p/10434480.html