.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

step1.1.jpg

step1.2.jpg

2. Change Reactjs template to Vuejs template

step2.1.jpg

step2.2.jpg

step3.1.jpg

step3.2.jpg

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>

Run dotnet add package VueCliMiddleware command in the Package Manager Console.

step3.3.jpg

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        ...  

        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "admin";

            if (env.IsDevelopment())
            {
                // spa.UseReactDevelopmentServer(npmScript: "start");
                spa.UseVueCli();
            }
        });
    }

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.

step3.4.jpg

3. Case will be in the end

Run vue add axios command in Command Line Tools to install axios.

step4.1.jpg

step4.2.jpg

<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')
    }
  ]
})

step5.jpg

Enjoy it!

.Net Core Vue Qucik Start

全文结束