Vue Application

Posted on  by admin
-->

Applies to: Visual Studio Visual Studio for Mac

In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you create and run a simple Vue.js frontend web application.

Prerequisites

Make sure to have the following installed:

  • This article requires the Vue.js template, which is available starting in Visual Studio 2017 version 15.8.
  • You must have Visual Studio installed and the Node.js development workload.
  • If you haven't already installed Visual Studio 2019, go to the Visual Studio downloads page to install it for free.
  • If you haven't already installed Visual Studio 2017, go to the Visual Studio downloads page to install it for free.

Create your app

  1. If you need to install the workload but already have Visual Studio, go to Tools > Get Tools and Features.., which opens the Visual Studio Installer.

  2. Choose the Node.js development workload, then choose Modify. You must have the Node.js runtime installed. If you don't have it installed, we recommend you install the LTS version from the Node.js website for best compatibility with outside frameworks and libraries.

  3. Node.js is built for 32-bit and 64-bit architectures.

Set the project properties

  1. The Node.js tools in Visual Studio, included in the Node.js workload, support both versions.

  2. Only one is required and the Node.js installer only supports one being installed at a time.

Build Your Project

Choose Build > Build Solution to build the project.

Start Your Project

Press F5 or select the Start button at the top of the window, and you'll see a command prompt:

  • In general, Visual Studio automatically detects the installed Node.js runtime.

    If it does not detect an installed runtime, you can configure your project to reference the installed runtime in the properties page (after you create a project, right-click the project node, choose Properties, and set the Node.exe path).

    You can use a global installation of Node.js or you can specify the path to a local interpreter in each of your Node.js projects.

Next, you should see the base Vue.js app appear!

Next steps

For ASP.NET Core integration: