欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

.Net Core Vue Qucik Start

程序员文章站 2022-06-20 17:31:46
.Net Core Vue Qucik Start =========================== This is a ASP.NET Core 3.0 project seamlessly integrationed with Vue.js template. A complaint fr ......

.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:

.Net Core Vue Qucik Start

  • or execute dotnet new react command in command line tools:

.Net Core Vue Qucik Start

2. change reactjs template to vuejs template

  • remove clientapp folder:

.Net Core Vue Qucik Start

.Net Core Vue Qucik Start

  • create new vue template project in root folder:

.Net Core Vue Qucik Start

.Net Core Vue Qucik Start

  • 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.

.Net Core Vue Qucik Start

  • change 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();
            }
        });
    }
  • 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.

.Net Core Vue Qucik Start

3. case will be in the end

  • install axios plugin:

run vue add axios command in command line tools to install axios.

.Net Core Vue Qucik Start

  • run vue add router command in command line tools to install vue-router.

.Net Core Vue Qucik Start

  • 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:

.Net Core Vue Qucik Start

enjoy it!