You also need to have Git installed because Vue CLI performs a checkout from Git. If you are on Mac, then you already have Git installed, and otherwise the installation instructions are a simple Google search away. So if you head to Google, you can simply search for “install git” and click the first result. There you will find the installation instructions for the various different operating systems.
Once that’s done, it’s time to open up your terminal or command prompt if you are on Windows. The reason why we needed NPM, is because that’s how we will be installing Vue CLI. To do that, simply write:
npm install -g vue-cli
Note that if you are on a Mac, then you need to enter sudo at the beginning of the command, to grant NPM permission to install Vue CLI globally on the system. That would therefore make the command sudo npm install -g vue-cli. You may also have to do this if you are running Linux.
Once you hit the enter key, it will take a short moment to install Vue CLI. When the installation has completed, you can now use the CLI tool by simply writing vue, followed by the command. In our case, we want to use the init command to create a new project.
As discussed in the previous post, we will be using the webpack-simple template in this series. The next thing we need to enter, is the project name.
vue init webpack-simple sample-project
A directory matching the project name has now been created, so let’s navigate to it, because we are not done yet.
cd sample-project ls -al
The Vue CLI has now added a bunch of files and directories for us. Among these files is a package.json file, which is a JSON file describing our project’s dependencies. This file is used by the NPM package manager. We will take a look at the contents of this file in the next post, but for now, let’s just go ahead and install the project dependencies. This is as easy as writing:
Notice that since we are not installing anything globally, you don’t need to use the sudo keyword here if you are on Mac or Linux.
Now that’s done, we are actually ready to open our project in a browser. But since we are building the project with webpack, we can’t just open up the HTML file in the browser. Instead, the template that Vue CLI provided us with, contains a command within package.json that builds the project as well as runs a development server. On top of that, it also automatically rebuilds the project whenever we change files, which is very convenient when we are developing.
To run the project, simply write:
npm run dev
If you open up your browser, we should see the default page appear when navigating to http://localhost:8080.
And with that, it’s time to take a closer look at the files and directories included in the project template.
Learn Vue.js today!
Take an online course and become an Vue.js champion!
Here is what you will learn:
- How to build advanced Vue.js applications (including SPA)
- How Vue.js works under the hood
- Communicating with services through HTTP
- Managing state of large applications with Vuex
- ... and much more!