ASP.NET Core + Vue.js 开发

https://www.cnblogs.com/gundam00/p/10434480.html

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(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视图

Loading...

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！