Recently I listened to an episode of JavaScript Jabber on Vue.js with Vue's creator Evan You. All of the talk regarding Vue's simplicity really piqued my curiosity.
I perused the Vue repo on GitHub and followed the Getting Started portion of the Guide at vuejs.org. I was amazed by the ease at which I was able to get going with Vue.js. Simple indeed. Will Vue.js live up to the hype?
Stick around. Hopefully we'll find out.

I have grown tired of endless to-do examples and tutorials so I decided to learn Vue by creating an Invoicing app.

Aside

Mostly, this project is a learning process for me. If it helps you too, great!

Also, this is far from an exhaustive tutorial on Node.js tooling for front end development. There are more tools and configuration options than I will ever learn. If I don't explain something here or if I feel that there is a good reference for any of this stuff I will try to provide a relevant link.

Prerequisites

  • A local instance of Node.js and npm installed and working on your machine. NPM is a module managements system for node and is bundled with the Node Installer. You can find the appropriate installer or binary to download for your setup at https://nodejs.org/en/download/. I have installed Node on Mac OS X, Windows. It's actually quite simple.

  • A working knowledge of html, css and JavaScript will be very helpful.

  • Text editor of your choice. There are many good options. I'm using Visual Studio Code. Other popular options include SublimeText, Atom and Brackets.

Setting up the Project

We're going to setup Node.js as our development platform. Node is not only great for developing server side applications in JavaScript. Among other things it has also evolved into an excellent platform with robust tooling options for developing client side as well. If you have never used Node for front-end development it can be confusing at first. It's a whole new paradigm. I encourage you to stick with it though. When you have the ah-ha moment you may just fall in love!

Honestly, you could probably just skip setup and clone an example like this. For my own experience I'm going to explain the steps to set up something (probably very similar).

1. Initialize the Project and Create a package.json File

We're going to create a package.json file to describe our project, manage project dependencies and define project specific commands for development, testing and deployment.

Here's how npm explains the benefits of a package.json file:

A package.json file affords you a lot of great things:

  1. It serves as documentation for what packages your project depends on
  2. It allows you to specify the versions of a package that your project can use using semantic versioning rules
  3. Makes your build reproducable which means that its way easier to share with other developers

To get started create a local directory on your machine named vue-invoice/ and navigate to the directory in your shell/terminal. Once you're there execute the following command: npm init This will launch the npm-init command-line utility which will walk you through the process of creating a package.json file for the project.

First you will be asked to name your project:

Press ^C at any time to quit. name:(vue-invoice)

Notice how npm-init defaults to the name of the working directory which is perfect for our project name as well. Optionally you could type a different name for the project but we'll stick with the default. When you're happy with the name press enter to move to the next option.

Enter a description for the project. I used: "Invoice web-app built on Vue.js".

version: (1.0.0)
description: Invoice web-app built on Vue.js

The rest of the prompts are optional for our purposes and can easily be updated at any time by editing package.json. When you are satisfied with your choices press enter to accept and npm will create a package.json file in your working directory. Now if you open package.json in your text editor you should see something similar to this:

package.json

{
"name": "vue-invoice",
"version": "1.0.0",
"description": "Invoice web-app built on Vue.js",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Craig McKenna",
"license": "ISC"
}

2. Install Vue.js

Now that we have documented our project in our project.json file we can install our first project dependency. There is more than one way to do this but as before we will use npm's command line interface. I think that you'll agree that this is a task made simple by using npm-install. (You can find more installation examples at the Vue.js website.)

At the command-line, run:

npm install vue --save

Running npm-install installs a module (vue) as well as any of the modules dependencies (if it has any),
The --save flag saves the package to our package.json as a dependency to our project.
Inside our root directory you will see a new directory node_modules/ which contains a vue/ directory with sub-directories and files. Our package.json has been updated to reflect our project dependency.

package.json


...

"dependencies": {
"vue": "^1.0.10"
}
}

A simple test will tell us whether we have everything installed and working properly or not.
Run Node from the console by entering node at the command-line. The Node REPL starts up on a new line. Then enter:

> var vue = require('vue');

> vue.version
'1.0.10'  // should return current version
>

Great! If you you got a response from Node indicating your Vue version you're set. Now we can get started developing our app.