Vue.js

Getting Started With Vue CLI 3


Subscribe On YouTube

Vue CLI 3 is a complete rewrite of the previous version of the Vue command line interface tool and comes with a set of new features which makes Vue development and the management of Vue projects a lot easier:

  • Out-of-the-box support for Babel, TypeScript, ESLint, PostCSS, PWA, Unit Testing & End-to-end Testing.
  • A plugin system which makes it easy to add common features to your project with ease
  • A graphical user interface (Vue UI) as an alternative to the command line tool
  • Executing single Vue files for instant prototyping

In the following we’re going to take a deeper look at Vue CLI 3 and it’s new features.


If you like CodingTheSmartWay, then consider supporting us via Patreon. With your help we’re able to release developer tutorial more often. Thanks a lot!


Installation

Vue CLI 3 comes as an NPM package. The first thing you need to make sure is that Node.js and NPM is available on your system. Vue CLI 3 requires at least Node.js version 8.9 (or above) on your system. If you have already installed Node.js you can check the version with the following command:

$ node —version

If you need to install or update Node.js first you can go to https://nodejs.org/ and download the installer for your OS. By installing Node.js the Node.js Package Manager (NPM) is installed automatically.

Vue CLI 3 is a complete re-write. In comparison to the previous version of Vue CLI the package name has changed from vue-cli to @vue/cli.

It is recommended to first uninstall the old package from your system:

$ npm uninstall vue-cli -g

The installation of Vue CLI 3 is then done via:

$ npm install -g @vue/cli

After having completed the installation successfully you’re able to check for the installed version with:

$ vue --version

Creating Vue Projects

With the new Vue CLI 3 there are two ways we can create new Vue projects from scratch:

  • Via command line by using the vue create command
  • Via browser by using the Vue UI

First, let’s take a look at the command line option.

Command Line

To start creating a new Vue project via the command line just use the vue create command followed by the name of the new project, e.g.:

$ vue create my-vue-app-01

Having hit return to execute this command you’re prompted with the option to pick a default preset or to select features manually:

Selecting this option will give you access to a list of features available:

Here you can use the up and down arrow key on your keyboard to navigate through the list of features. Use the spacebar to select a feature from the list, e.g. let’s add the Router feature:

Again, hitting return takes you to the next list of options (Linter / Formatter to use):

Here we’re going to select the ESLint + Prettier option.

  • ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
  • Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Next, we can decide if the linting should be done on save or on commit:

Now you can choose to have have dedicated config files or to place the configuration just inside of package.json. We’re going to decide for dedicated config files:

Finally you’ll have the option to save the settings as preset:

Just hit return to confirm the default (N = no preset will be saved) and you’re directly forwared to the next question. Here you can decide whether to use NPM or Yarn as the package manager:

Having selected the package manager the new project is created and the corresponding dependencies are downloaded and installed:


Finally you’ll see a success message on the command line confirming that the project has been created:

Now that the Vue.js project is created and configured we’re able to change into the newly created project folder and start the development web server by typing in:

$ npm run serve

The application is then available via http://localhost:8080:

Graphical User Interface

Next, let’s take a look at the second option to create new Vue projects: Vue UI. The graphical user interface is started with the following command:

$ vue ui

The default browser is opened and the Vue Project Manager application is displayed like you can see in the following screenshot:

Click on the button Create a new project here to start creating a new project. The following screen is shown afterwards:


In this first view you need to:

  • specify the name of the project
  • select the package manager to be used
  • choose whether to override the target folder if it exists
  • specify if a new Git repository should be created

Click on button Next to continue to the Presets view:


Select option Manual to then be able to select Features you’d like to add to the Vue project on the next page:


As seen before on the command line we’re able to add additional features to our application, e.g. the Router feature. In the last step you’re able to

  • activate the history mode for the router
  • pick a linter / formatter
  • and specify if linting should take place on save or on commit

Click on button Create Project to finalize the project creation process. In the last step you also have the option to save the settings as a new preset:

Managing Projects With Vue UI

The Vue UI is also capable of managing existing projects. Once the project is created successfully you’ll find the corresponding project entry in the project overview. Clicking on the project is opening up the project details view which is split into four pages:

  • Plugins
  • Dependencies
  • Configuration
  • Tasks

Managing Plugins

Click on the Plugins link from the left navigation menu and you should see the following view:

Here you can see an overview of the of the already installed plugins. If you’d like to add further plugins to the project you can click on button Add plugin. Afterwards you’ll see a list of available plugins you can select from:

Selecting an entry and hitting the button Install will add this plugin to the Vue project.

Managing Dependencies

Managing dependencies vie Vue UI is also straightforward. In the left side menu select entry Dependencies to open the following view:


Again, you’re able to add dependencies to an existing project by using button Install dependencies and then selecting from a list of available packages:

Configuration

With Vue UI you can also alter the configuration of the project. Clicking on the Configuration link takes you to the Project configuration page which gives you access to various configuration settings:

Tasks

Another feature which is offered by Vue UI is the management of tasks. E.g. you can start and monitor the development web server by using the serve task as you can see in the following screenshot:


To start the server process you only need to select the serve task and then click on button Run task. Once the build process is complete and the server is running the dashboard view is updated. From this view you’re able an overview of the build result:

 

ONLINE COURSE: Vue.js 2 - The Complete Guide

Check out the great Vue.js online course by Maximilian Schwarzmüller with thousands of students already enrolled:

Vue JS 2 – The Complete Guide 

  • Build amazing Vue.js Applications – all the Way from Small and Simple Ones up to Large Enterprise-level Ones
  • Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)
  • Understand the Theory behind Vue.js and use it in Real Projects

Go To Course


Using and writing about best practices and latest technologies in web design & development is my passion.