高一倩,天阅文学城,希希漫影
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.
dotnet new react
command in command line tools:clientapp
folder: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>
vueclimiddleware
package from nuget:run
dotnet add package vueclimiddleware
command in the package manager console.
reactdevelopmentserver
to vuecli
:public void configure(iapplicationbuilder app, iwebhostenvironment env) { ... app.usespa(spa => { spa.options.sourcepath = "admin"; if (env.isdevelopment()) { // spa.usereactdevelopmentserver(npmscript: "start"); spa.usevuecli(); } }); }
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
dotnet run
in command line tools to run the app.
axios
plugin:run
vue add axios
command in command line tools to install axios.
vue add router
command in command line tools to install vue-router.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>
export default new router({ mode: 'history', base: process.env.base_url, routes: [ ... { path: '/weather', name: 'weather', component: () => import('./views/weatherforecast.vue') } ] })
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
网友评论