代码之家 › 专栏 › 技术社区 › Grandizer

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

visual-studio-2017 vue.js typescript

Grandizer · 技术社区 · 6 年前

我已经研究了几个星期了(断断续续),试图建立一个新项目,使用最新版本的Visual Studio、Vue、TypeScript和。截至今日(2018年5月15日)的净核心。我不需要(在本例中也不希望)创建SPA应用程序。所以我的。cshtml页面至少会有一个标签,用于加载该页面的特定文件。当然,它可能有一个用于Vue和/或Require的。js?

我很难完全配置Visual Studio。ts文件并将其传输到。使用新ES6编码样式的js文件 require 诸如此类。

我尝试加入的一些更有用的链接包括 this 还有另一个 here .好像是吧。Net Core 2.1可能改变了什么?我也习惯了传统。仅js文件。许多对Visual Studio代码的引用,但这不是这里的选项。

这似乎是一项简单的任务。NPM似乎将互联网下载到项目中,但如果它起作用,我会接受它。就在我的脑子里。我喜欢的是一个关于创建一个新的VS项目的分步指南,一直到配置tsconfig。json和Web包。配置。js(如果这是最好的方式)提供一个简单的Vue应用程序,显示“way to go dumbass!”尽管我很在乎。前两杯啤酒是为那些可以写出来或让我链接到当前版本中我需要的链接的人准备的。

谢谢

1 回复 | 直到 6 年前

akhansari 6 年前

我建议你使用 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 例如

<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 {
  ...
}