Question

我一直在研究这个问题几周（关闭和开启）尝试设置一个新项目，该项目使用最新版本的Visual Studio，Vue，TypeScript和.Net Core（截至今日（05/15/2018））。我不需要（也不想在这个例子中）创建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应用程序显示“去笨蛋吧！”我关心的一切。前两个啤酒对我来说是可以写下来的人，或者让我找到一个能够满足当前版本需要的链接。

谢谢！

Answer 1

我建议您将Vue CLI 3与Microsoft.AspNetCore.SpaServices一起使用。

请按照以下步骤操作：

dotnet add package Microsoft.AspNetCore.SpaServices
npm install -D aspnet-webpack
npm install -D webpack-hot-middleware
并添加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在不重新加载的情况下工作。

例如，根据您的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>

最后，您可以像这样组织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 {
  ...
}

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

1 个答案: