前提
1、.NET Core 2.1 SDK
2、Visual Studio Code
- C#拓展
- Vetur扩展
- Node js
开始
1、新建 项目文件夹 aspnetcore-vuejs,在vs code打开终端，输入dotnet new mvc新建asp.net core 2.1项目。
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 aspnetcore_vuejs
{
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(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如何将javascript，vue，scss，css和其他文件编译到输出文件中。
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命令以还原缺少的Nuget包
7、在终端中执行npm install命令安装所需的npm包
8、修改Views / Home目录中 的Index.cshtml视图
- asp.net core 2.1 - vue.js
Loading...
9、在根目录中添加ClientApp文件夹并创建以下文件
- 创建index.js，这是webpack将构建的SPA应用程序的入口文件。VueRouter上的mode属性为history，表示不使用hash属性的锚点链接。
import Vue from 'vue'
import VueRouter from 'vue-router' //导入路由插件的包
import App from './App.vue' //导入根组件
Vue.config.productionTip = false
Vue.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。
Hello World!
I an what I an
11、按F5，程序就能跑起来了。
总结
- 使用MVC模板创建标准的MVC .NET核心应用程序来初始化项目
- WebPack已经初始化，以便编译和重新加载SPA应用程序的.vue，.js，.css文件
- Babel被初始化为可以在JavaScript内使用的最新ES2015标准
- .NET路由被定义，以便SPA可以使用原生URL导航而不是hash属性的锚点链接（在index.js启用此设置）