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
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
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.
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.
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.
To use Vue in an existing site, you can drop one of the following