vue.js - Visual Studio 2017 Asp.Net Core 2.1 TypeScript Vue-oppsett - Ikke SPA

Jeg har forsket på dette i flere uker nå (av og til) og prøvd å sette opp et nytt prosjekt som bruker de nyeste versjonene av Visual Studio, Vue, TypeScript og .Net Core per i dag (15.05.2018). Jeg trenger ikke (og vil heller ikke i dette tilfellet) å lage en SPA-applikasjon. Så mine .cshtml-sider vil i det minste ha en tag som laster den spesifikke filen for den siden. Selvfølgelig kan det ha en for Vue og/eller Require.js?

Jeg har problemer med å fullstendig konfigurere Visual Studio til å ta .ts-filer og transpile dem til .js-filer ved bruk av de nye ES6-kodestilene med require og lignende.

Noen av de mer nyttige lenkene jeg har forsøkt å inkludere var denne og en annen her. Ser ut som kanskje .Net Core 2.1 kan ha endret ting? Jeg er også vant til bare tradisjonelle .js-filer. Mange referanser til Visual Studio Code, men det er ikke et alternativ her.

Dette virker som en enkel oppgave. NPM ser ut til å laste ned hele internett inn i prosjektet, men hvis det fungerer, tar jeg det. Jeg er bare på bristepunktet her. Det jeg gjerne vil ha, er en trinn-for-trinn guide for å lage et nytt VS-prosjekt helt frem til å konfigurere tsconfig.json og Webpack.config.js (hvis det er den beste måten å gjøre det på) for å ha bare en enkel Vue-app som viser "way to go dumbass!" for alt jeg bryr meg om. De første to ølene er på meg til personen som kan skrive det opp eller gi meg en lenke som gjør det jeg trenger i de nåværende versjonene.

Takk!

Svar #1

Jeg anbefaler at du bruker den fantastiske Vue CLI 3 med Microsoft.AspNetCore.SpaServices.

Følg disse trinnene:

  1. dotnet add package Microsoft.AspNetCore.SpaServices
  2. npm install -D aspnet-webpack
  3. npm install -D webpack-hot-middleware
  4. Og legg til Webpack-mellomvaren
if (env.IsDevelopment())
{
    app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
        HotModuleReplacement = true,
        HotModuleReplacementClientOptions = new Dictionary<string, string> { 
            { "reload", "true" }, 
        },
        ConfigFile = "node_modules/@vue/cli-service/webpack.config.js",
    });
}

For øyeblikket vet jeg ikke hvordan jeg skal få HotModuleReplacement til å fungere uten å laste på nytt.

  1. Avhengig av din vue.config.js kan du legge til js/css slik i _Layout.cshtml for eksempel
<environment names="Development">
    <script src="~/app.js" asp-append-version="true" type="text/javascript"></script>
</environment>
<environment names="Production">
    <script src="~/bundle/js/chunk-vendors.js" asp-append-version="true" type="text/javascript"></script>
    <script src="~/bundle/js/app.js" asp-append-version="true" type="text/javascript"></script>
</environment>
  1. Til slutt kunne du organisere Vue-filene slik for å få bedre intellisense. Det fungerer flott med Vetur for VSCode eller uoffisielle utvidelser for VS2017.

MinKomponent.vue

<template>
  ...
</template>

<style lang="scss" scoped>
  ...
</style>

<script lang="ts" src="./MyComponent.ts">
</script>

MinKomponent.ts

import { Component, Vue } from "vue-property-decorator";

@Component
export default class MyComponent extends Vue {
  ...
}

Relaterte artikler