Getting Started with Vue CLI 3.x

Introduction

Vue.js is rocketing to unexpected heights after surpassing React.js in GitHub stars, in spite of not being backed by any major company, and the release of their new Command-line Interface (CLI) tool might very well bump them even higher!

Scaffolding a Vue project from scratch can be a daunting thing to approach, especially if you are not particularly comfortable with Vue.js.

This is why Vue CLI is a must-have tool under your arsenal to make sure your projects are set up properly from the get-go, letting you pick from a handful of templates and let the CLI make all the hard work boilerplate code be done for you.

Excitingly enough, this last summer has brought us Vue CLI 3.0, introducing a bunch of cool new features like the Vue Graphical User Interface, making creating a project and managing dependencies easier than ever before!

CLI Service

The CLI Service is a development dependency built on top of Webpack, a static module bundler for JavaScript applications - which is quite similar to react-scripts for React.js.

It is responsible for loading the plugins, making sure the webpack configuration is optimized, and enables us to have basic commands for managing our application (serve, build, lint, etc.).

Prerequisites

For the Vue CLI to work you would need to install Node.js (version 8.9+) on your computer, to make sure you are able to use NPM (Node Package Manager), or Yarn, depending on your preferred manager.

Installation

Once Node is downloaded, installing the Vue CLI is as simple as running a simple command in your command line:

$ npm install -g @vue/cli

Or, for yarn:

$ yarn global add @vue/cli

Your First Vue.js Project

Once you have installed the Vue CLI globally you will be able to access the vue command from anywhere in your computer and you will need it to create your boilerplate projects.

There are multiple ways to go about creating a project just running commands:

$ vue create <project name>

This is the bash way of doing things. When you enter the command you will be prompted several times for some configuration information to create your project.

First off it will ask you if you'd like to use a preset:

Vue CLI v3.2.1
? Please pick a preset:
> default (babel, eslint)
 Manually select features

For the sake of this tutorial we will choose Manually select features to scroll through all the different pages you will be prompted with:

Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Preprocessors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Here you can pick which are the features you want your project to have:

• Babel for transpiling your code to ES5 JavaScript, which every browser can understand.
• Typescript if you want to have strong typings and access more modern features on your JavaScript code.
• Progressive Web App (PWA) Support if you desire to make use of PWA driven features like service-workers and offline support.
• Router which will add the Vue-router package which is an awesome routing tool for your Single Page Applications (SPA). You will be prompted, if you pick this option, to choose if you want to have the History mode enabled for the router, which removes the # sign from all your endpoints.
• Vuex to have a centralized store for your states and manage the global data of your application, as well as managing how data in your components is changed and from where from within Vue Devtools. (See Vue Devtools).
• CSS Preprocessors to pick your CSS pre-processor of choice, if you pick this option you will be prompted to pick between Sass/Less, Less, or Stylus.
• Linter / Formatter this will add linting to your project to make sure your code is up to par with code standards. If you pick this option and you've picked Typescript you will be prompted to pick a linter / formatter as such, if you haven't chosen typescript, you won't get prompted for TSLint.

? Pick a linter / formatter config: (Use arrow keys)
> TSLint
 ESLint with error prevention only
 ESLint + Airbnb config
 ESLint + Standard config
 ESLint + Prettier

Furthermore, you can choose if you want to add gitHooks to your configuration. These will run your linting/formatting scripts when saving or committing to your git repository.

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

• Unit Testing will let you pick your unit testing framework of choice.

? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
 Jest

• E2E Testing just as Unit Testing, will prompt you to pick your E2E testing environment.

? Pick a E2E testing solution: (Use arrow keys)
 Cypress (Chrome only)
 Nightwatch (Selenium-based)

After all these options, you will need to decide if you want to have all the configurations in separate files or simply added as objects inside the package.json file.

Additionally, you'll be asked if you want to save this configuration as a preset as well as if you want to pick npm or yarn as your desired package manager.

CLI Plugins

Some built-in plugins can be added using the command, such as Vuetify, a Material Design Framework for Vue.js:

$ vue add <plugin name>

A Vue CLI plugin as their names start with either @vue/cli-plugin- or vue-cli-plugin- - depending if they are built-in or third party plugins.

When you run the vue-cli-service, it automatically loads all CLI plugins listed inside the package.json file.

Congratulations, you have just created your very first Vue CLI project!

Vue Graphical User Interface

If you don't want to go through the hassle of command lines, or you are simply not fond of dark backgrounds with white lines, you can always use the Vue GUI accessible by this command:

$ vue ui

When this command is run, a server will start up on http://localhost:8000.

Here you can create your projects in the same fashion as you would with the command line, but with a nice user interface.

Plus, you can manage your dependencies without the need of managing them out from package.json, which comes with the desired version for each package:

Further configuration and widgets can be set up, and a few tasks can be automatically run from the Vue UI - Such as running a vulnerability check for your dependencies that may have security issues, setting up a port that you can kill to shut down your application, and enable the news feed to have the latest updates from the Vue team!

$ vue-init < template > < project name >

Whenever you want to use a Vue CLI 2.x legacy template, you need to install the vue-init service:

$ npm install -g @vue/cli-init

and then:

$ vue init webpack my-project

Then you will be able to set up your project as you would with a regular project.

Folder Structure

Each created project comes in with several folders which are set up for ease of use:

• /node_modules this is where all the packaged dependencies will be installed in, by default they are installed whenever you create a project.
• /public here is where the index.html lives and where all the public assets, manifests, and service-workers should be created.
• /src where the main bread and meat of your work will be added, most other files from other folders are pre-configured, but this is where you add all your custom code and components.
• /src/assets where you add your images, icons, fonts, that will, later on, be added to the /dist folder.
• /src/components this is where you add your components, specifically your single components which do not represent a whole page.
• /src/views here you have your layout components.
• /test where your unit / e2e tests live.

Plus, a /plugins folder will be added as long as you have used the vue add command, where all your plugins will be installed.

Additionally, main.js, router.js, store.js, and App.vue will be auto-generated according to your configurations selected during the creation, along with some boilerplate examples.

The package.json File

This is one of the most important files, which holds most of your projects configuration, like the name, version, automated scripts you can use via NPM, and dependencies, which are third-party packages you can use in your project:

{
  "name": "vue-cli-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.0",
    "@vue/cli-plugin-unit-jest": "^3.2.0",
    "@vue/cli-service": "^3.2.0",
    "@vue/eslint-config-prettier": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.5.17"
  },
  "eslintConfig": {
    "root": true,
    "env": {
    "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],
    "rules": {},
      "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

The scripts tag unveils your main handles for managing your application.

Running the following will start your development server with hot reloading:

$ npm run serve

This means that it will notice file changes so that you do not have to restart the server each time you update your code or resources.

Now, to create a /dist folder which will package all of your applications, no webpack or any extra configurations needed, we'll use:

$ npm run build

It will deliver an index.html, with all the JavaScript files injected automatically, and js, css, and img folders for these named assets.

Moreover, if you desire to watch all your files and process them using your eslint or prettier configurations you can use:

$ npm run lint

Accordingly, unit tests, located inside the /tests folder can be run with the following command:

$ npm run test:unit

Plus, package.json can hold specific configuration for linting, formatting, pre-commit hooks, and many more!

Deployment

The /dist folder can be handled to upload your bundled app to GitHub Pages, Heroku, Amazon S3, BitBucket Pages, and many other services.

Depending on your host service of choice, you will need to set up the /dist folder to match your server needs, this can be easily done via the vue.config.js file (or through the Vue UI configuration tab for that matter), which has to be created in the root folder of your project:

module.exports = {}

Here you can add your configuration needed for the server deployment such as the baseUrl.

If your server is waiting for your application to be hosted in a specific endpoint, such as: http://www.testsite.com/test - you will need to set up your baseUrl to accommodate to that endpoint:

module.exports = {
  baseUrl: '/test'
}

On the other hand, if your server is waiting for your static files to be in a specific folder, you can also specify it, or if you wanted to have the /dist folder named differently you can choose your outputDir:

module.exports = {
  baseUrl: '/test',
  assetsDir: 'static',
  outputDir: 'app'
}

These are just examples of the many configurations you can add to your project.

You could add all of these inside your package.json inside the vue property, but notice that you will have to use JSON-compatible values only.

Conclusion

Vue.js is growing strong amongst the other main JavaScript frameworks. It is quite approachable, straight-forward, and very resilient.

Even though it is easy to use, newcomers can have quite a rough time setting up their projects properly, especially if you are not very keen on the command line.

Luckily, Evan You, Vue's creator is always thinking ahead, and is always stepping up for his fellow developers, making configuring and setting up new apps as easy as 1, 2, 3!

For further information you can visit, Vue CLI's Official Page.