Visual Studio 2017 Asp.Net Core 2.1 TypeScript Vue 设置 - 不是 SPA [英] Visual Studio 2017 Asp.Net Core 2.1 TypeScript Vue Setup - Not SPA

问题描述

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

I have been researching this for weeks now (off and on) trying to setup a new project that uses the latest versions of Visual Studio, Vue, TypeScript and .Net Core as of today (05/15/2018). I do not need (nor want in this instance) to create a SPA application. So my .cshtml pages will at least have a tag that loads the specific file for that page. Sure, it may have one for Vue and/or Require.js?

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

I am having a hard time completely configuring Visual Studio to take .ts files and transpile them into .js files using the new ES6 coding styles with require and such.

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

Some of the more useful links I have attempted to incorporate were this and another here. Seems like perhaps .Net Core 2.1 may have changed things? I am also used to traditional .js files only. Many references to Visual Studio Code, but that is not an option here.

这似乎是一项简单的任务.NPM 好像把 Internet 下载到项目中，但如果它有效，我会接受它.就在我的脑子里到此为止.我想要的是创建一个新的 VS 项目的分步指南，一直到配置 tsconfig.json 和 Webpack.config.js(如果这是最好的方法)到只有一个简单的 Vue 应用程序显示笨蛋！"因为我在乎.前 2 杯给我的人，他们可以写出来，或者让我找到一个链接，这个链接可以满足我在当前版本中的需求.

This seems like a simple task. NPM seems to download the internet into the project, but if it works, I'll take it. Just at my wits end here. What I would love is a step by step guide on creating a new VS project all the way to configuring the tsconfig.json and Webpack.config.js (if that is the best way to go) to having just a simple Vue app that displays "way to go dumbass!" for all I care. First 2 beers on me for the person who can write it up or get me to a link that does what I need in the current versions.

谢谢！

推荐答案

我推荐你使用很棒的 Vue CLI 3 使用 Microsoft.AspNetCore.SpaServices.

I recommend you to use the awesome Vue CLI 3 with Microsoft.AspNetCore.SpaServices.

请按照以下步骤操作:

1. dotnet 添加包 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 工作.

For the moment I don't how to make HotModuleReplacement work without reloading.

1. 根据你的vue.config.js，你可以在_Layout.cshtml中添加这样的js/css

1. Depending on your vue.config.js you can add js/css like this in the _Layout.cshtml for example

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

1. 最后，您可以像这样组织 Vue 文件以获得更好的智能感知.它适用于 VSCode 的 Vetur 或 VS2017 的非官方扩展.

1. Finally you could organize the Vue files like this to have a better intellisense. It works great with Vetur for VSCode or non official extensions for VS2017.

MyComponent.vue

MyComponent.vue

<template>
  ...
</template>

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

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

MyComponent.ts

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！