Getting Started With the Vue CLI

Introduction

VueJS is a progressive JavaScript framework used to create user interfaces and Single-Page Applications (SPAs), and the best way to get started quickly is to create a VueJS project using the Vue CLI (Command-Line Interface).

In this guide, you will learn how to install the Vue CLI, how to create a Vue project with the Vue CLI, how to serve and build them for production, and how to use the Vue UI. Building a project with the CLI will scaffold out a project, providing us with a pre-configured starting point on which we can build rather than starting from scratch.

Prerequisites

Node.js version 8.9 or higher is required to use Vue CLI on our terminal (v10+ is recommended). With nvm, we can manage multiple versions of Node on the same machine!

What is Vue CLI?

Vue CLI is an NPM package that is installed on a specific device to allow developers/users to access the vue command through their terminal. This CLI, which can be installed globally or in a specific directory on our PC, allows us to quickly scaffold a new project and build an app with a single command.

It gives Vue developers a new experience and allows them to start developing Vue apps without having to deal with complex configuration of tools like webpack. Simultaneously, it can be configured and extended with plugins for more advanced use cases. It is made up of several parts, including the:

• CLI service which provides multiple scripts for working with Vue projects, such as the serve, build and inspect scripts.
• CLI plugins which are NPM packages that provide additional features to our Vue project, some of these plugins include typescript, PWA, VueX, etc.

If we don't want to handle everything through our terminal, the Vue CLI allows developers to perform tasks through an easy-to-use interface, which we will explore very soon.

Installing Vue CLI

It is always a good idea to check if a package has already been installed on our PC before installing it, and we can do this for Vue CLI by looking at its version:

$ vue --version

$ vue -V

If we see a version, it means that the Vue CLI has already been installed on our computer; otherwise, an error indicates that it has not been installed. We can install the Vue CLI by running the following command:

$ npm install -g @vue/cli
// Or
$ yarn global add @vue/cli

Typically, the CLI is installed globally, rather than locally, so it's accessible throughout the system.

$ npm update -g @vue/cli
// Or
$ yarn global upgrade --latest @vue/cli

After successfully installing Vue CLI on our PC, we should now be able to access the Vue executable in our terminal to display a list of possible commands and their functions. This can be accomplished by running the following command:

$ vue

Which displays the starting page:

Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 display help for command

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve                                      alias of "npm run serve" in the current project
  build                                      alias of "npm run build" in the current project
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires
                                             @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment
  help [command]                             display help for command

  Run vue <command> --help for detailed usage of given command.

Creating a Vue Project With Vue CLI

Once the Vue CLI has been successfully installed - let's create a Vue project! Using the tool, we can easily scaffold a project and create a skeleton to go from, including importing all of the necessary dependencies and additional ones you may already know you'll want. The create command, followed by the name of the project is used to create a skeleton project:

$ vue create my-cli-project

Once you run the command - you'll be prompted with three presets:

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

In the first two - you get to choose the Vue version, alongside Babel and ESLint. Only these will be packaged. If you want to include other useful dependencies such as the Vue Router, Vuex, and so on, you'll want to select the "Manually select features" preset.

Here, you can traverse the list of available dependencies, pressing Space to select each option you'd like to enable:

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

It'll proceed with several configuration questions, starting with the version of Vue:

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

Followed by the questions of each module you've selected that can be configured:

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for the router? (Requires proper server setup for index fallback in production) (Y/n)

In the end - the CLI will ask you whether you want to save these options as a Preset! If you do, next time you create a new application, you can pick from this preset besides the two default ones:

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for the router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) y

Once you supply a name for the preset, it'll show up after calling the create command:

$ vue create my-app

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
> my-preset ([Vue 3] babel, pwa, router, vuex, eslint)
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

Or you can directly call it during the creation:

$ vue create --preset my-preset my-app

Once the creation process is completed, we can run the app in the development server directly from the CLI using the following command:

$ cd my-new-app
$ npm run serve

The directory of the project is easily verified through the file system or a command such as ls (dir for Windows users):

$ ls
README.md        jsconfig.json  package-lock.json  public/  vue.config.js
babel.config.js  node_modules/  package.json       src/

Then our browser will open up localhost:8080 where we will see the app is running:

Now, the development begins! You can proceed with your standard development pipeline with the directories and files created by the tool. When you're finished development, or are ready to push changes to a production stage, use the following command to create a production bundle:

$ npm run build

This will output everything to a dist folder within our project, which can be deployed on various hosting platforms. Let's take a look at another method for creating a Vue app, but instead use the Graphical User Interface (GUI)!

Vue UI

Using the Vue CLI, you can also start up another project - a GUI for creating applications:

$ vue ui

This will start the GUI on http://localhost:8000/:

We can start a new project by going to the "Create" tab, which will allow you to choose the path for your project:

Once the location has been chosen for the project, in a new page, you can enter the name and select your preferred package manager:

The process of creating skeleton projects is much the same, and the same code runs in the background. It's just a matter of taste - whether you prefer the CLI or the UI. In the same vein, we'll be asked to select our preferred preset, but if we click "Manual," we will be redirected to a page where we can manually select our preferred plugins, as shown below:

Again, after setting up the configurations for the different dependencies, you can save your selected options as a preset.

Once the creation process is done, we will be taken to the project dashboard, where we can view all of our plugins, add plugins, manage configuration, and assign tasks:

These tasks include, serving our app on our browser, building it for production, etc.

Conclusion

In this short guide, you've learned how the Vue CLI works, and how to create new skeleton Vue projects with it. We've taken a look at manual setups and saving presets, as well as serving and building projects. Finally, we've taken a look at the UI as an alternative to the CLI.