Setting up a non-SPA project with Visual Studio 2017 for Asp.Net Core 2.1 using TypeScript and Vue

Question

Setting up a non-SPA project with Visual Studio 2017 for Asp.Net Core 2.1 using TypeScript and Vue

I've been diving deep into research for the past few weeks to set up a new project that utilizes the latest versions of Visual Studio, Vue, TypeScript, and .Net Core as of today (05/15/2018). I'm not looking to create a single page application this time around. Instead, my .cshtml pages will include a tag that loads the specific file for each page. Perhaps I'll integrate Vue and/or Require.js?

I'm facing some challenges configuring Visual Studio to transpile .ts files into .js files, using the new ES6 coding styles with 'require' and the like.

I've tried incorporating some helpful links such as this one and another here. It seems like maybe .Net Core 2.1 has introduced some changes? I'm used to working with traditional .js files only. There are numerous mentions of Visual Studio Code, but unfortunately, that's not an option in this case.

This task should be straightforward. NPM tends to download a lot into the project, but if it does the job, I'll take it. I'm feeling frustrated here. What I really need is a step-by-step guide, starting from creating a new VS project all the way to setting up the tsconfig.json and Webpack.config.js (if that's the best approach) to have a simple Vue app displaying "way to go dumbass!" - or anything at this point. First two beers on me for anyone who can provide me with a detailed guide or direct me to a resource that meets my requirements in the current versions.

Thank you!

typescript vue.js visual-studio-2017

Answer 1

Answer №1

If you're looking for a great development experience, I highly recommend using Vue CLI 3 in combination with Microsoft.AspNetCore.SpaServices.

Here are the steps to get started:

dotnet add package Microsoft.AspNetCore.SpaServices

npm install -D aspnet-webpack
```
npm install -D webpack-hot-middleware
```
Add the Webpack middleware to your project

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",
    });
}

I am currently exploring how to enable HotModuleReplacement without reloading.

Depending on your configuration in vue.config.js, you can include JavaScript and CSS files in your _Layout.cshtml file like this:

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

To improve intellisense support, consider organizing your Vue files as follows. This setup works seamlessly with extensions like Vetur for VSCode or similar tools for VS2017.

Example structure for MyComponent.vue:

<template>
  ...
</template>

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

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

Sample content for MyComponent.ts:

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

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

Answer 2

If you're looking for a great development experience, I highly recommend using Vue CLI 3 in combination with Microsoft.AspNetCore.SpaServices.

Here are the steps to get started:

dotnet add package Microsoft.AspNetCore.SpaServices

npm install -D aspnet-webpack
```
npm install -D webpack-hot-middleware
```
Add the Webpack middleware to your project

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",
    });
}

I am currently exploring how to enable HotModuleReplacement without reloading.

Depending on your configuration in vue.config.js, you can include JavaScript and CSS files in your _Layout.cshtml file like this:

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

To improve intellisense support, consider organizing your Vue files as follows. This setup works seamlessly with extensions like Vetur for VSCode or similar tools for VS2017.

Example structure for MyComponent.vue:

<template>
  ...
</template>

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

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

Sample content for MyComponent.ts:

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

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

Setting up a non-SPA project with Visual Studio 2017 for Asp.Net Core 2.1 using TypeScript and Vue

Answer №1

Similar questions

What steps should I take to create an Onboarding/Walkthrough page using Angular Material Design?

Error: The binding element titled implicitly possesses a type of 'any'

Programmatically configure filter settings for vue-good-table

Using Vue to confirm the absence of a record within a nested v-for loop

Troubles with implementing child routes in Angular 6

Escape from the abyss of callback hell by leveraging the power of Angular, HttpClient, and

"Here's how you can mark an option as selected in Angular, either from the component or the HTML file

What is the reason for the `Function` type not functioning properly when trying to input a function as a parameter in a higher-order function?

Using TypeScript to define a constant array as a type

Unlocking the power of React using TypeScript for optimal event typing

If a component does not have a specified return type annotation, it will default to an 'any' return type

Loading components in an Angular CLI project with the base URL

Troubleshooting why Vue.js isn't updating the DOM with two-way binding

Is it possible to remove a complete row in Angular 2 using Material Design

Unable to import JSX/TSX component from a separate React application into my primary React application

Displaying a React component within a StencilJS component and connecting the slot to props.children

Explaining the data link between a service and component: understanding Subject and BehaviorSubject

What are some ways to conceal the v-btn component?

Vue CLI Plugin Electron Builder displays a completely empty screen after compiling

Having trouble making optional parameters overload in Typescript?