Tutorial

Decoding the Vue CLI

Published on January 4, 2020
Default avatar

By Alex Proujansky

Decoding the Vue CLI

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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.

The CLI is installed globally in order to be used for multiple projects.

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.

Prefer a UI to a CLI? Run vue ui to launch a GUI process.

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.

This file must be at the top-level of your project, next to package.json

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!

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alex Proujansky

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel