Decoding the Vue CLI

The idea behind a CLI (Command Line Interface) is to use simple, editable commands in order to produce a greater output. The Vue CLI is no different. When a new project begins, the last thing a developer should worry about is project scaffolding. Luckily, the Vue team has bundled scaffolding, prototyping, and a variety of other handy commands into one easy CLI tool!

Installing

Whether npm or yarn is your preferred package manager, the Vue CLI installation process is simple as can be.

#npm option
$ npm install -g @vue/cli

#yarn option
$ yarn global add  @vue/cli

Confirm that this has been installed correctly by opening up a fresh terminal and using the vue command.

Prototyping

Instant prototyping is one of the core features of the Vue CLI, allowing developers to quickly write a .vue or .js file and preview their work without needing to configure other build tools such as webpack and babel.

In order to use this feature, you must first install an additional add-on.

# npm option
$ npm install -g @vue/cli-service-global

# yarn option
$ yarn global add @vue/cli-service-global

Once complete, you can write out your component file, navigate to its directory and run vue serve {YOUR_FILE_NAME} to instantly preview.

Additional flags you can pass to vue serve include:

• -o –open opens your default browser to the port of the development server
• -c –copy copies the URL of the dev server to your clipboard
• -p –port takes a single argument port to specify the dev server port, defaults to 8080

Scaffolding

One of the main benefits of the Vue CLI is that it handles project setup and scaffolding for you, eliminating the need to worry about folder structure.

Running the below will begin the setup process for a new project:

$ vue create my-new-project

You will then be shown a series of prompts, allowing you to pick your preferred features for this project. These features include:

• Babel
• TypeScript
• PWA Support
• Vue Router
• Vuex
• CSS Pre-processors
• Linter/Formatter
• Unit Testing
• End to End Testing

This is followed by a few more questions about preferences (depending on what you previously chose):

• Class style component syntax
• Use Babel with TypeScript
• Router History Mode
• SASS, LESS, or Stylus
• ESLint configuration
• Unit & E2E testing solution
• Dedicated config files or in package.json
• Preferred package manager

After all of this, you can also choose to save these settings as a preset, allowing you to skip these questions in future projects.

Plugins

While most plugins will be automatically taken care of by the scaffolding process, you may find midway through a project that you want to add another. Using vue add, you can easily inject a new plugin into an existing project.

Can’t find what you need? Try browsing this list of available plugins!

Config Reference

In addition to the settings mentioned above, the CLI also provides an optional config file, vue.config.js. This file can be used to adjust options within the CLI as well as the internal webpack settings.

Some of the more important config options:

• publicPath: The URL at which your app will ultimately be deployed. The default value is '/', so if your domain is my-domain.com, this would deploy to my-domain.com/. This is useful if your app is not the top-level domain, but on a sub-path instead.
• outputDir: The directory in which build files will be generated. By default this is dist
• assetsDir: Where your static assets are located. This is relative to the outputDir folder
• pages: Vue apps do not have to be *SPAs* (single page applications). This mode will generate pages for each entry point specified. This should be an object containing each page, with each having a unique entry. You can also provide template, filename, title, chunk options as well, but they are not required.

Here’s a simple example of what a vue.config.js file can look like:

module.exports = {
  outputDir: 'public',
  // ...more options
}

You can find a reference for all the available options here.

There are a large variety of additional options that can be passed to this configuration option. Please feel free to view the Official Documentation for more information!