.Net Core Vue Qucik Start
.Net Core Vue Qucik Start
This is a ASP.NET Core 3.0 project seamlessly integrationed with Vue.js template.
A complaint from Microsoft officials:
As far as I'm aware, we don't have plans to introduce Vue-specific features. This isn't because we have anything against Vue, but rather just to limit the growth in the number of frameworks that we're maintaining support for. The dev team only has a finite capacity for handling third-party concepts, and last year we made the strategic choice to focus on only Angular and React.
Microsoft won't stop our enthusiasm for vuejs
The Microsoft's dev team only has a finite capacity for handling third-party concepts, but we chinese men don't. Men can never say no.
Let's Set Sail
1. Create a new project with react template
- You can use Visual Studio to create a project with React.js:
- Or execute
dotnet new react
command in Command Line Tools:
2. Change Reactjs template to Vuejs template
- Remove
ClientApp
folder:
- Create new vue template project in root folder:
- Rename all
ClientApp
folder to our vue project name:
Startup.cs
public void ConfigureServices(IServiceCollection services)
{
...
services.AddSpaStaticFiles(configuration =>
{
// configuration.RootPath = "ClientApp/build";
configuration.RootPath = "admin/build";
});
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
...
app.UseSpa(spa =>
{
// spa.Options.SourcePath = "ClientApp";
spa.Options.SourcePath = "admin";
...
});
}
NetCoreVue.csproj
<PropertyGroup>
<TargetFramework>netcoreapp3.0</TargetFramework>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
<IsPackable>false</IsPackable>
<!-- <SpaRoot>ClientApp\</SpaRoot> -->
<SpaRoot>admin\</SpaRoot>
<DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
</PropertyGroup>
- Add
VueCliMiddleware
package from nuget:
Run
dotnet add package VueCliMiddleware
command in the Package Manager Console.
- Change
ReactDevelopmentServer
toVueCli
:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
...
app.UseSpa(spa =>
{
spa.Options.SourcePath = "admin";
if (env.IsDevelopment())
{
// spa.UseReactDevelopmentServer(npmScript: "start");
spa.UseVueCli();
}
});
}
- Change React build floder '
build
' to Vue build folder 'dist
':
Startup.cs
public void ConfigureServices(IServiceCollection services)
{
...
services.AddSpaStaticFiles(configuration =>
{
// configuration.RootPath = "admin/build";
configuration.RootPath = "admin/dist";
});
}
NetCoreVue.csproj
<ItemGroup>
<!-- <DistFiles Include="$(SpaRoot)build\**" /> -->
<DistFiles Include="$(SpaRoot)dist\**" />
<ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
<RelativePath>%(DistFiles.Identity)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
</ResolvedFileToPublish>
</ItemGroup>
- Run to test
Run
dotnet run
in Command Line Tools to run the app.
3. Case will be in the end
- Install
axios
plugin:
Run
vue add axios
command in Command Line Tools to install axios.
- Run
vue add router
command in Command Line Tools to install vue-router.
- add
WeatherForecast.vue
in views folder:
<template>
<div class="weather">
<table className='table table-striped' aria-labelledby="tabelLabel">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
<tr v-for="(forecast,index) in forecasts" :key="forecast.date">
<td>{{forecast.date}}</td>
<td>{{forecast.temperatureC}}</td>
<td>{{forecast.temperatureF}}</td>
<td>{{forecast.summary}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'WeatherForecast',
data() {
return {
forecasts:[]
};
},
created() {
this.axios.get("/weatherforecast").then(res => {
// console.log(res.data);
this.forecasts = res.data;
});
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body{
text-align:center;
}
.weather {
margin: 0 auto;
}
</style>
- Add a new router:
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
...
{
path: '/weather',
name: 'weather',
component: () => import('./views/WeatherForecast.vue')
}
]
})
- Run to view the last result:
Enjoy it!
最新文章
- 关于label的点击事件(原创)
- ASP.NET MVC 路由(三)
- Chrome 控制台实用指南
- video 手机全屏自动播放
- Java初学(四)
- C++ 栈和队列
- A Knight&#39;s Journey 分类: POJ 搜索 2015-08-08 07:32 2人阅读 评论(0) 收藏
- [转载] tcp那些事1
- fscanf的返回值未成功输入的元素个数 .xml
- Java Socket 基础例子
- 问题-[WIN764位系统]操作UDL驱动不全处理
- JQUERY1.9学习笔记 之基本过滤器(十二) 根元素选择器
- oracle正则表达式regexp_like的用法详解
- 聊聊高并发(二十九)解析java.util.concurrent各个组件(十一) 再看看ReentrantReadWriteLock可重入读-写锁
- SPOJ104 Highways,跨越数
- 用PHP和Ajax进行前后台数据交互——以用户登录为例
- 2-SAT 问题与解法小结
- HTML 练习on方法
- [20170628]完善ooerr脚本.txt
- 【php增删改查实例】第二十节 - 把用户管理页面集成到main.php中