ASP.NET Core + Vue.js 开发
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 = 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
<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 项目就搭建完成了。