Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

How to Install Vue.js

By Gary simon - May 26, 2017

Note:
This tutorial is a part of our free course React vs Angular vs Vue.js by Example. Check it out and join in from the beginning!

Getting up and running with a Vue.js project is very straightforward. Like other javascript frameworks, you're able to install Vue.js through several different methods.

So, in this tutorial, we're going to cover all of the necessary steps to getting started.

Do you want to watch a video instead?

Most tutorials at Coursetro feature a parallel video tutorial. Be sure to Subscribe to the Official Coursetro Youtube Channel.

Installing Vue.js via CDN

You can use a Content Delivery Network, which allows you to use the HTML script tag to use Vue with your project. It's a quick and easy way to get up and running.

The recommended CDN to use is https://unpkg.com/vue, as it stays up to date the moment Vue is published to npm.

You simply copy the URL from the line above, and designate it as the src attribute of the HTML script tag:

<script src="https://unpkg.com/vue"></script>

This is added directly beneath the page's closing body tag.

For this course though, we're not going to use this method, as we're using Node.js.

Installing Vue.js through NPM

You can use the Node Package Manager (NPM) to install Vue through the command line. This is ideal when you have a more robust project, or an exist projecting that you wish to integrate Vue with.

You must have Node.js installed with the NPM as well. To check whether or not you have these installed, at the console type:

> node -v
> npm -v

Running each of these commands will provide you with a version number. If they go unrecognized, you need to visit Nodejs.org, install the suitable software for your OS, and then reload your command line. Retyping the above commands should yield a version number.

In the project folder through the command line, you install the Vue.js package by typing:

> npm install vue --save

This will install Vue within the node_modules folder of your project and add it as a dependency to the package.json file.

We won't use this method either for our project.

Installing Vue.js with the Vue CLI

The Vue Command Line Interface (CLI) makes it quick and easy to start up a Vue project with basic scaffolding in place. It provides you with several options that you can also use, to setup routing and such.

This is the installation method that we're going to use for our course project. So, in the command line let's get started by installing the Vue CLI:

> npm install --global vue-cli

This will install the Vue CLI globally on the machine. The --global flag ensures you only have to install it once on your machine.

Once installed, you can access the Vue CLI by vue. To start a new project with the Vue CLI, type:

> vue init webpack compare-vue
  • vue
    We call the CLI with vue.

  • init
    We want to start a new project.

  • webpack
    This is a build tool for handling assets.

  • compare-vue
    This the project name. It can be anything you want.

When you press enter after typing this command, you will be presented with several prompts:

? Project name: compare-vue
? Project description: A Vue.js project
? Author: Gary Simon <contact@designcourse.com>
? Vue build: standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "compare-vue".

   To get started:

     cd compare-vue
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

Most of these questions are straightforward, but Vue build will give you 2 options, which I chose the standalone recommended version. 

We also want to install the vue-router because, in our project, we intend to have a home page and a FAQ page.

I chose No on the next 3 questions because this is a quick project just to get our feet wet; we don't need to linting or code testing. If this were a serious project though, you would want to enable these options.

Next, we have to move into our new project folder and run npm to install the packages from package.json:

> cd compare-vue
> npm install

Once finished, you're ready to go! You can now run another command to run your project, which will show up live in your browser. It will also automatically rebuild and reload your browser upon certain file changes while you develop:

> npm run dev

Our new Vue.js project is now located at http://localhost:8080.

Conclusion

And that's it! Fairly straightforward as you can see. In the next tutorial, we're going to begin actual development of our project. 

This tutorial is a part of our free course React vs Angular vs Vue.js by Example. Check it out and join in from the beginning!


Share this post




Say something about this awesome post!