Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Skip to content
Permalink
main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

visualstudio-docs/docs/javascript/tutorial-create-vue-app.md

Go to file
 
 
Cannot retrieve contributors at this time
Create a Vue.js app Prerequisites Create your app View the project properties Build Your Project Start Your Project Next steps
72 lines (48 sloc) 2.72 KB
Raw Blame
Open in GitHub Desktop
title description ms.date ms.custom ms.topic ms.devlang author ms.author manager ms.technology dev_langs ms.workload monikerRange
Create a Vue.js app
In this tutorial, learn how to create a simple Vue.js application in Visual Studio.
02/28/2023
vs-acquisition
tutorial
javascript
mikejo5000
mikejo
jmartens
vs-javascript
JavaScript
nodejs
>= vs-2022

Create a Vue.js app

[!INCLUDE Visual Studio]

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 install the following:

Create your app

  1. In the Start window (choose File > Start Window to open), select Create a new project.

    :::image type="content" source="media/vs-2022/create-new-project.png" alt-text="Screenshot showing Create a new project":::

  2. Search for Vue in the search bar at the top and then select Standalone JavaScript Vue Template or Standalone TypeScript Vue Template, based on your preference.

    :::image type="content" source="media/vs-2022/vue-choose-standalone-template.png" alt-text="Screenshot showing choosing a template":::

  3. Give your project and solution a name.

View the project properties

The default project settings allow you to build and debug the project. But, if you need to change settings, right-click the project in Solution Explorer, select Properties, and then go the Build or Debugging section.

[!NOTE] launch.json stores the startup settings associated with the Start button in the Debug toolbar. Currently, launch.json must be located under the .vscode folder.

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:

  • npm running the vue-cli-service start command

    [!NOTE] Check console output for messages, such as a message instructing you to update your version of Node.js.

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

Next steps

For ASP.NET Core integration:

[!div class="nextstepaction"] Create an ASP.NET Core app with Vue