Visual Studio 2017 Asp.Net Core 2.1 TypeScript Vue 设置 - 不是 SPA

Question

我已经研究了好几个星期（断断续续地）试图设置一个新项目，该项目使用截至今天（2018 年 5 月 15 日）最新版本的 Visual Studio、Vue、TypeScript 和 .Net Core。我不需要（在这种情况下也不想）创建 SPA 应用程序。所以我的 .cshtml 页面至少会有一个标签来加载该页面的特定文件。当然，它可能有一个用于 Vue 和/或 Require.js 的？

我很难完全配置 Visual Studio 以获取 .ts 文件并使用带有 require 等的新 ES6 编码样式将它们转换为 .js 文件。

我尝试合并的一些更有用的链接是this 和另一个here。似乎 .Net Core 2.1 可能改变了一些事情？我也只习惯于传统的 .js 文件。许多对 Visual Studio Code 的引用，但这不是这里的选项。

这似乎是一项简单的任务。 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，您可以在 _Layout.cshtml 中添加这样的 js/css

<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 文件以获得更好的智能感知。它适用于 VSCode 的 Vetur 或 VS2017 的非官方扩展。

MyComponent.vue

<template>
  ...
</template>

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

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

我的组件.ts

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

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