Create Vue Js App

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:

  • Second example: the Vue CLI default app. If you’ve never created a Vue.js application, I am going to guide you through the task of creating one, and understanding how it works.
  • First I’ll use the most basic example of using Vue.
  • You create an HTML file which contains.
  • and you open it in the browser. That’s your first Vue app!

Create your app

  1. The page should show a “Hello World!” message.

  2. I put the script tags at the end of the body so that they are executed in order after the DOM is loaded. What this code does is, we instantiate a new Vue app, linked to the #example element as its template (it’s defined using a CSS selector usually, but you can also pass in an HTMLElement).

  3. Then, it associates that template to the data object.

Set the project properties

  1. That is a special object that hosts the data we want Vue to render. In the template, the special {{ }} tag indicates that’s some part of the template that’s dynamic, and its content should be looked up in the Vue app data.

  2. You can see this example on Codepen: https://codepen.io/flaviocopes/pen/YLoLOp.

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:

  • Codepen is a little different from using a plain HTML file, and you need to configure it to point to the Vue library location in the Pen settings:.

    Let’s level up the game a little bit.

    The next app we’re going to build is already done, and it’s the Vue CLI default application.

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

Next steps

For ASP.NET Core integration: