.Net Core Vue Qucik Start
2019-11-12 22:18
1991 查看
.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 VueCliMiddlewarecommand 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 runin Command Line Tools to run the app.
3. Case will be in the end
- Install
axios
plugin:
Run
vue add axioscommand 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!
相关文章推荐
- 如何在ASP.NET Core应用程序运行Vue并且部署在IIS上详解
- dotnet core webapi +vue 搭建前后端完全分离web架构
- ASP.NET Core 2.0 自定义 _ViewStart 和 _ViewImports 的目录位置
- asp.net core web app build success but fail to start up
- ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
- ASP.NET Core 2.0 : 四. _Layout与_ViewStart
- Vue.js与 ASP.NET Core 服务端渲染功能整合
- 使用VUE+iView+.Net Core上传图片
- dotnet core webapi +vue 搭建前后端完全分离web架构(一)
- 使用VUE+iView+.Net Core上传图片的方法示例
- dotnet core webapi +vue 搭建前后端完全分离web架构(一)
- ASP.NET Core 2.0 : 四. _Layout与_ViewStart
- ASP.NET Core 2.0 自定义 _ViewStart 和 _ViewImports 的目录位置
- .Net Core+Vue.js+ElementUI 实现前后端分离
- .net core + vue开发单页应用(二)
- vue前端开发那些事——后端接口.net core web api
- ASP.NET Core 2.0 自定义 _ViewStart 和 _ViewImports 的目录位置
- ASP.NET Core 与 Vue.js 服务端渲染
- .net core Vue ElementUI (2) Tabs 动态路由显示网页
- ASP.NET Core 实战:使用ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目