An insignificant but time-consuming phase of our project's lifecycle is setting up and tooling. There's a lot of terms to understand and digest -- webpack, SystemJS, bundling, linting, uglifying, etc. A CLI tool helps you automate the process of setting up your project environment from development, to testing and even as far as production.
Therefore, you don't have to care about how to start anymore, just run a few commands and you are good to go.
As a side note, the CLI tool is not required for you to build a Vue application. In the previous
Hello World example, we had a typical Codepen project running without any CLI help. If for any reason, you feel like the CLI tool is overkill (which I don't think it is), then simply use the CDN or download the Vue scripts and include them manually in your project.
Table of Contents
As a matter of fact, there is a Vue CLI template that works that way. We will discuss the templates in upcoming lessons.
npm install -g vue-cli
-g flag is known as the global flag and tells npm that this installation is not specific to a given project but to our entire machine. This makes sense because we will be using the CLI tool for different types of project from anywhere in our computer.
Vue CLI Templates
Vue CLI is flexible enough that it allows you to use whatever template suits you as the boilerplate while generating a new project using the CLI's
new command. You can create your template or use existing official templates.
The existing templates will always be able to provide everything you need for your project. Only extreme cases will demand that you create your template. Let's have a look at the existing official templates as seen on the Vue CLI Repo:
webpack-simple: A simple webpack + vue-loader setup for quick prototyping.
browserify-simple: A simple Browserify + vueify setup for quick prototyping.
- simple: The simplest possible Vue setup in a single HTML file.
Creating a Project
Now that you know what the CLI tool is, we have it installed, and we know the different templates, let's see how we can create a new project using any of the pre-made templates.
We are building a real application so we would need all the features the CLI can offer. This means we are not going to go for
simple or the
-simple template. webpack is a more evolved and popular tool, so let's ditch Browserify for the cooler kid:
# Run the following anywhere # on your machine that you want # your project to be located vue init webpack scotch-store
Answer the brief questions using the answers shown in the image below:
The syntax is
vue init [template] [project-name].
You need to install the dependencies generated in the
package.json. To do that, enter the
scotch-store folder and run the install command:
# Enter the scotch-store folder cd scotch-store # Run install command npm install
You can run the app now to see what was generated by running the following in the same terminal you used to install the dependencies:
# Run the Vue app npm run dev
The browser will open automatically at localhost on port 8080. You should see the following welcome page in the browser: