I built an SPA in an hour, and this is what I learned (Part 1).

So my teammates and I were planning to develop a basic webpage displaying about / contact information. After discovering Quasar, a Vue.js framework, I decided to build the project with Vue.

Simple. Elegant. Powerful.

Vue is a progressive JavaScript framework focused on building user interfaces. As a front-end framework, it makes it easy to create beautiful webpages.

What Vue offers

• Reactive interfaces: dynamically update parts of the page in response to user interaction.
• Declarative rendering: bind dynamic variables straight to the DOM.
• Data binding: bind data to UI elements.
• Directives: compiler-level attributes for behaviour.
• Template logic: if-else, loops, and more.
• Components & nesting: extend basic HTML elements with reusable code.
• Event handling, computed properties, CSS transitions, and custom filters.

Step 1. Install Vue.js and set up the project

There are a few ways to add Vue:

• Include a <script> tag in an HTML file
• Install via npm
• Use the Vue CLI tool with Webpack
• Install via Bower

The recommended path is the Vue CLI; it ships with everything you need. Run:

$ npm install -g vue-cli
$ vue init webpack myapp

Answer the setup questions, then:

$ cd myapp
$ npm install

This installs the project's dependencies. Run the template app with:

$ npm run dev

Project structure

All code lives inside the src folder. The assets folder holds images and other assets, while components holds Vue files.

main.js

In main.js, a Vue instance is created with parameters:

• el: the id of the div this Vue instance binds to. Check index.html for the matching div.
• template: HTML-based template syntax that binds the rendered DOM to the Vue instance's data.
• components: the main component, App.

App.vue

App.vue has three sections:

• HTML: defines the template tag.
• Script: JavaScript that imports another Vue file component.
• CSS: style for the current component.

App.vue itself is a component. The Hello.vue and App.vue files share the same shape because both are components. The scoped attribute on the style block scopes the CSS to that component only.

In part 2, we'll wire up data, write the template, and ship.