Vue.JS using CDN, Bower and NPM

In the last section, we gave on overview on Vue. In this part of the tutorial, we are going to learn the various ways of initializing and installing Vue.JS.

There are three ways of doing the installation of Vue. One is via CDN (Content Delivery Network), second is by NPM (Node Package Manager), and the last is by running Vue in CLI (Command Line Interface).

Setup Vue.js via CDN

This is the most recommended and easiest way to start Vue.js for beginners. All you need to do is to download the vue.js file or directly include the <script> tag using https://unpkg.com/vue.

vue installation

Note: If you are going to download the javascript file, then remember that it is fine to download the minified version however, the minified version is warning stripped while the development version is with full warnings and debug mode. You can get the minified or development version of Vue in https://vuejs.org/v2/guide/installation

Setup Vue.js by NPM

To setup Vue using NPM, we need two things needed to install and those two are the following;

1.) NodeJS

2.) NPM (Node Package Manager)

To install NodeJS, you can visit http://nodejs.org/en/download and look for the installer suitable for your machine. In this case, we prefer using Ubuntu 14.04 LTS.

In ubuntu, type and initialize,

sudo apt-get update
sudo apt-get install nodejs

After the installation, try to check if the NodeJS is installed by typing node -v.

It will print an output similar to this image.

vue installation

Next, we need to install the package manager. We can achieve this by typing the following command.

sudo apt-get install npm
npm -v

It will print the version of NPM installed in your machine the same with this image.

vue installation

After installing the bundles and packages needed (NodeJS and NPM), We can now get and install Vue.js by typing this in your terminal.

For newly installed NPM, you need to have a package.json file before you proceed. To initialize this JSON file you need to type npm init in your terminal; if you already have the JSON file you can proceed installing js by typing npm install vue. It will download the whole package of vue, modules and other resources.  (See image below).

vue installation

In the next article, we will learn how to install Vue using CLI.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.