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

Question

我一直在研究这个问题几周(关闭和开启)尝试设置一个新项目,该项目使用最新版本的Visual Studio,Vue,TypeScript和.Net Core(截至今日(05/15/2018)).我不需要(也不想在这个例子中)创建SPA应用程序.所以我的.cshtml页面至少会有一个标记来加载该页面的特定文件.当然,它可能有一个Vue和/或Require.js？

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

我尝试合并的一些更有用的链接是这个和另一个在这里.似乎也许.Net Core 2.1可能已经改变了一些东西？我也习惯了传统的.js文件.许多引用Visual Studio Code,但这不是一个选项.

这似乎是一项简单的任务.NPM似乎将互联网下载到项目中,但如果它有效,我会接受它.只是在我的智慧结束.我喜欢的是一步一步的指导创建一个新的VS项目,一直到配置tsconfig.json和Webpack.config.js(如果这是最好的方法)只有一个简单的Vue应用程序显示"去笨蛋吧!" 我关心的一切.前两个啤酒对我来说是可以写下来的人或者让我找到一个链接来完成当前版本中我需要的东西.

谢谢!

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

我的组件.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 {
  ...
}