Visual Studio 2017 Asp.Net Core 2.1 TypeScript Vue Установка - не SPA

Question

Я исследовал это уже несколько недель (время от времени), пытаясь настроить новый проект, который использует самые последние версии Visual Studio, Vue, TypeScript и .Net Core на сегодняшний день (15/15/2018).Мне не нужно (и не хочу в этом случае) создавать приложение SPA.Так что мои .cshtml страницы будут по крайней мере иметь тег, который загружает определенный файл для этой страницы.Конечно, он может быть один для Vue и / или Require.js?

Мне трудно полностью настроить Visual Studio для приема файлов .ts и переноса их в файлы .js с использованием новых стилей кодирования ES6 сrequire и т. П.

Некоторые из наиболее полезных ссылок, которые я пытался включить, были this и еще одна здесь .Похоже, что .Net Core 2.1, возможно, изменили вещи?Я также привык к традиционным файлам .js.Много ссылок на код Visual Studio, но это не вариант здесь.

Это кажется простой задачей.Кажется, NPM загружает интернет в проект, но если он сработает, я возьму его.Просто по моему остроумие здесь заканчивается.Что бы мне понравилось, так это пошаговое руководство по созданию нового проекта VS, вплоть до настройки tsconfig.json и Webpack.config.js (если это лучший путь), чтобы иметь простое приложение Vue, отображающее"путь тупица!"для меня все равно.Первые 2 пива на меня для человека, который может написать это или получить мне ссылку, которая делает то, что мне нужно в текущих версиях.

Спасибо!

Answer 1

Я рекомендую использовать Vue CLI 3 с Microsoft.AspNetCore.SpaServices .

Выполните следующие действия:

1. dotnet add package Microsoft.AspNetCore.SpaServices
2. npm install -D aspnet-webpack
3. npm install -D webpack-hot-middleware
4. И добавьте промежуточное ПО Webpack

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",
    });
}

На данный момент я не знаю, как заставить HotModuleReplacement работать без перезагрузки.

5. В зависимости от вашего vue.config.js вы можете добавить js / css, например, в _Layout.cshtml, например

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

6. Наконец, вы можете упорядочить файлы Vue таким образом, чтобы получить лучший смысл. Он отлично работает с Vetur для VSCode или неофициальными расширениями для VS2017.

MyComponent.vue

<template>
  ...
</template>

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

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

MyComponent.ts

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

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