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 项目就搭建完成了。

ASP.NET Core + Vue.js 开发的更多相关文章

  1. 开源项目之ASP.NET Core + Vue.js 的前后端分离的通用后台管理系统框架

    年前看了这个开源项目感觉很不错,这个小项目对于传统的.net 开发人员,想做技术提升是一个很不错的参考案例. 开源项目演示地址:https://dnczeus.codedefault.com/logi ...

  2. ASP.NET MVC+Vue.js实现联系人管理

    接触了一天vue.js,简单浏览了一本关于vue的电子书,就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序. 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么 ...

  3. .Net Core+Vue.js+ElementUI 实现前后端分离

    .Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构 前端采用:Vue.js.Element-UI.axios 后端采用:.Net Core Mvc 本项目是 ...

  4. ASP.NET Core 1.0 开发记录

    官方资料: https://github.com/dotnet/core https://docs.microsoft.com/en-us/aspnet/core https://docs.micro ...

  5. ASP.NET Core Web API 开发-RESTful API实现

    ASP.NET Core Web API 开发-RESTful API实现 REST 介绍: 符合REST设计风格的Web API称为RESTful API. 具象状态传输(英文:Representa ...

  6. 配置visual studio code进行asp.net core rc2的开发

    1.安装.net core sdk https://github.com/dotnet/cli#installers-and-binaries,根据你的系统选择下载. 2.下载vscode的C#扩展插 ...

  7. 配置visual studio code进行asp.net core rc2的开发(转载jeffreywu)

    1.安装.net core sdk https://github.com/dotnet/cli#installers-and-binaries,根据你的系统选择下载 2.下载vscode的C#扩展插件 ...

  8. windows下vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...

  9. 基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+

    什么是ThinkSNS+ ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+.新的产品名 ...

随机推荐

  1. python正则匹配示例

    text="山东省临沂市兰山区 市委大院中区21号楼4单元 276002 奥特曼1号 18254998111" #匹配手机号 m=re.findall(r"1\d{10} ...

  2. PHP——秒数转换为时分秒

    前言 通讯记录需要用到的一个方法,就是将秒转为时分秒 方法 PHP有内置的方法,直接用即可,不过这个只是24小时以内.对于通讯录来说是够用了~ 示例 $v = 30; gmdate('H:i:s', ...

  3. Gradle+IDEA使用说明

    Gradle+IDEA使用说明 导语: IDEA拥有大量的JAVA开发者拥护,相比于开源的eclipse,IDEA拥有更简洁直观的界面,拥有更强大的自动补全功能,号称能“一路敲回车完成编码”.如果把I ...

  4. php Header 函数使用

    <?php header('HTTP/1.1 200 OK'); // ok 正常访问 header('HTTP/1.1 404 Not Found'); //通知浏览器 页面不存在 heade ...

  5. 【C++】GSL(GNU Scientific Library) 的安装及在 Visual Studio 2017 中的使用

    GSL 是 GNU 开发并维护的科学计算的库,其中包括: 复数 多项式的根 特殊函数 向量和矩阵 排列 排序 BLAS支持 线性代数 Eigensystems 快速傅立叶变换 正交 随机数 准随机序列 ...

  6. loj6074 子序列

    题目链接 思路 首先考虑暴力\(dp\) 用\(f[i][j]\)表示前\(i\)个字符,以\(j\)这个字符结尾的本质不同的字符串个数. 然后就有如下的转移 \(if(s_i==j)\) \[f_{ ...

  7. virtualbox+ubuntu

    https://jingyan.baidu.com/article/7f766daff541cd4101e1d0cd.html ubuntu 安装 这台计算机似乎没有安装操作系统 待解决 注意ubun ...

  8. 第八周博客作业<西北师范大学|李晓婷>

    1.助教博客链接:https://home.cnblogs.com/u/lxt-/ 2.作业要求链接:http://www.cnblogs.com/nwnu-daizh/p/10687492.html ...

  9. Linux之 proc文件系统

    用户态与内核态交互的接口之一,管理方式与普通文件相同每个节点的文件权限(读/写)决定其查看和配置权限大量LINUX系统参数和状态信息可通过proc节点查看或配置/proc/<pid>/:查 ...

  10. (Python3) 连加 连乘 代码

    a=[1,2,3,4,5,6,7,8,9,10] #连加 b=0 for i in a: b+=i print(b)   #连乘 c=1 for i in a: c*=i print(c)