Vue Manual

Posted on  by admin

Now let's introduce Vue, the third of our frameworks. In this article we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.

Conditionals and Loops

Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line. Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure.

Getting Started

For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.

Initializing a new project

Vue is a modern JavaScript framework that provides useful facilities for progressive enhancement — unlike many other frameworks, you can use Vue to enhance existing HTML.

This lets you use Vue as a drop-in replacement for a library like JQuery.

Running the app locally

That being said, you can also use Vue to write entire Single Page Applications (SPAs). This allows you to create markup managed entirely by Vue, which can improve developer experience and performance when dealing with complex applications.

A clearer Vue

It also allows you to take advantage of libraries for client-side routing and state management when you need to.

Additionally, Vue takes a "middle ground" approach to tooling like client-side routing and state management.

While the Vue core team maintains suggested libraries for these functions, they are not directly bundled into Vue.

# Examples

This allows you to select a different routing/state management library if they better fit your application.

In addition to allowing you to progressively integrate Vue into your applications, Vue also provides a progressive approach to writing markup.

Like most frameworks, Vue lets you create reusable blocks of markup via components.

Most of the time, Vue components are written using a special HTML template syntax.

When you need more control than the HTML syntax allows, you can write JSX or plain JavaScript functions to define your components.

As you work through this tutorial, you might want to keep the Vue guide and API documentation open in other tabs, so you can refer to them if you want more information on any sub topic. For a good (but potentially biased) comparison between Vue and many of the other frameworks, see Vue Docs: Comparison with Other Frameworks.

Project structure

To use Vue in an existing site, you can drop one of the following