Till now, we have covered the basics of VueJS and all the tutorials and examples that we covered were using VueJS directly on the page via CDN, this approach works great when you are learning and doing some quick test.
However, to build a real-world VueJS application we need a different approach to build and package our applications.
Why Vue CLI?
If you are new to Vue CLI, you must be wondering why we are making use of a CLI to create our Vue Application, when we can just include Vue in the project by downloading its source or by importing it from the CDN.
Here is why you would need it.
When you work on a real-world application there are a lot of things that need to be taken care of, to name a few that includes project scaffolding, having a good project structure, importing external plugins, configuring webpack to bundle and minify your javascript, to compile your ES2015 into plain javascript that every browser understands, and a whole lot of other things.
You’d not want to do all these things manually when you are just looking to build a simple Vue App.
This is where Vue CLI comes into the picture, it handles all these tasks for you so that all you focus on is to work on your Vue App Logic.
Installation
As it stands Vue CLI refers to the VueJS Command Line Interface. Creating a project using Vue CLI gives you a boilerplate code and a default directory structure so that you can start building your application rapidly.
Let’s see how we can install Vue CLI in our machine.
To get started with Vue CLI, you need to have the following required dependencies installed in your system.
- NodeJS ( NodeJS is a server-side environment that runs javascript on the server-side and helps create server-side applications)
- NPM or Yarn. (NPM is a node package manager and helps us to manage the dependencies, it helps you install other open source and private dependencies to your project)
You can check if you already have Node and NPM installed in your machine by running the following commands in your terminal / command-line.
node --version
npm --versionIf you get the correct version number in the output, this means that node and npm are installed in your machine. If not head over to the official website for NodeJS https://nodejs.org/en/ and follow the official install guide as per your operating system.
Now that we have everything we need let’s install Vue CLI.
Run the following command in the terminal or command-line.
npm install -g @vue/cliThis command asks NPM to install the latest version of Vue CLI globally.
You can check you have the right version with this command:
vue --version