Vue CLI 3 Quick Start Guide

Build and maintain Vue.js applications quickly with the standard CLI

Ajdin Imsirovic

• Publisher: Packt Publishing
• Year: 2019
• ISBN:
  9781789956849
• Edition: 1
• Topic: Design
• Subtopic: Web Design

Build Vue apps the right way using Vue CLI 3. Understand how the building blocks of Vue CLI 3 work including npm, webpack, babel, eslint, plugins, GUI, testing, and SCSS. Import third-party libraries and maintain your project.

Key Features

• Learn to work with Vue CLI 3 both on the command line and with a GUI
• Manage VueJS apps, settings, Vue plugins, and third-party libraries
• Learn how to build Vue apps from scratch using webpack, babel, ES6, vue-router, Jest, Cypress, SCSS, and Git

Book Description

The sprawling landscape of various tools in JavaScript web development is becoming overwhelming. This book will show you how Vue CLI 3 can help you take back control of the tool chain. To that end, we'll begin by configuring webpack, utilizing HMR, and using single-file.vue components. We'll also use SCSS, ECMAScript, and TypeScript. We'll unit test with Jest and perform E2E testing with Cypress.

This book will show you how to configure Vue CLI as your default way of building Vue projects. You'll discover the reasons behind using webpack, babel, eslint, and other modern JavaScript toolchain technologies. You'll learn about the inner workings of each through the lens of Vue CLI 3. We'll explore the extendibility of Vue CLI with the built-in settings, and various core and third-party plugins.

Vue CLI helps you work with Vue components, routers, directives, and services in the Vue ecosystem. While learning these concepts, you'll examine the evolution of JavaScript. You'll learn about use of npm, IIFEs, modules in JavaScript, Common.js modules, task runners, npm scripts, module bundlers, and webpack. You'll get familiar with the reasons why Vue CLI 3 is set up the way it is. You'll also learn to perform linting with ESLint and Prettier.

Towards the end, we'll introduce you to working with styles and SCSS. Finally, we'll show you how to deploy your very own Vue project on Github Pages.

What you will learn

• Work with nvm, install Node.js and npm, use Vue CLI 3 with no configuration, via the command line and the graphical user interface
• Build a Vue project from scratch using npm and webpack, and learn about hot module replacement
• Work with Babel settings, configurations, and presets
• Work with Vue plugins, including testing plugins such as Jest and Cypress
• Write, run, and watch unit and E2E tests using TDD assertions in the red-green-refactor cycle
• Work with Vue router and use, nested, lazy-loading, and dynamic routes
• Add SCSS to your projects and work with third-party Vue plugins
• Deploy your Vue apps to Github Pages

Who this book is for

This book is for existing web developers and developers who are new to web development. You must be familiar with HTML, CSS, and JavaScript programming. Basic knowledge of the command line will be helpful but is not necessary.

Webpack in Vue CLI 3

In the previous chapter, we saw how to start using Vue CLI via both the command line and the UI. In this chapter, we will cover webpack basics from the viewpoint of Vue CLI 3. We will begin with an overview of what webpack is. We'll look at concepts behind module bundling, tree shaking, webpack loaders and output, webpack plugins, Hot Module Replacement (HMR), code coverage and code splitting, and then we'll look at how these concepts fit in with Vue CLI 3 as follows:

• The evolution of the JavaScript (JS) language from the script tag to module bundlers
• The script tag
• Immediately Invoked Function Expressions (IIFEs), what problems they solve, and what problems they don't
• How Node Package Manager (NPM) helps teams share third-party libraries in their code
• The role of JS task runners and NPM scripts
• What the CommonJS specification is and how modules work in JavaScript and Node.js
• What module bundlers are and how they bridge the gap between Node.js and the browser
• What webpack, and how it works
• How to run webpack on a project
• Bundling assets with webpack using production and development modes
• Adding a Vue project via NPM and using webpack with it

Understanding exactly how webpack works is crucial to understanding the magic that Vue CLI 3 performs. If you are familiar with webpack, you still might find some sections of this chapter useful. If you feel you are a webpack pro, you can probably just skip this chapter.

Before getting into what is webpack and to properly understand the issues that webpack solves, we need to look back at a bit of history of changes that happened to the JS language in the last decade.

The evolution of the JS language

Looking from the vantage point of webpack, here is the chronological list of approaches, techniques, best practices, and patterns that were added to the JS ecosystem, which led to the current state of things:

• The script tag as the answer to adding interactivity to web pages
• Immediately invoked function expressions as the answer to modularizing libraries and avoiding code collisions
• The problem with IIFEs
• Sharing third-party libraries in a team environment with NPM
• JS task runners and NPM scripts
• Modules in JS

Let's look at each one of these solutions in more detail.

The script tag

Initially, adding JS to your web page meant that you would need to add some script tags directly in your HTML. For quick prototypes, this is still a valid way of doing things even to this day. Very often, third-party libraries get added via the src attribute inside a script tag (which usually gets placed right above the closing body tag in our HTML).

Unfortunately, you usually need more than one script tag inside your HTML. And regardless of whether you add your JS code directly to your page, you add it from another file in your project, or you add it from a remote location (such as from a content delivery network (CDN) using the src attribute), ultimately, all these scripts are added to the global JS scope. This means one thing, collision.

To avoid collisions, a clever approach was taken, the use of IIFEs.

Immediately Invoked Function Expressions

What are IIFEs all about? IIFEs simply exploit the fact that in JS, parentheses can't contain statements. This fact alone allowed JS developers to put in anonymous functions that they could immediately invoke, without getting any errors from the parser, by simply wrapping them in parentheses.

An IIFE is essentially a quirk of the JS language, but a very useful one; with an IIFE, all the code is scoped to the function, and thus your code is safe from anything else that is outside of it. In other words, using IIFEs is a simple way to avoid collisions, that is, the accidental overwriting of variables or functions. Thus, at one point, many popular libraries started wrapping their own code into IIFEs. For example, if you open the code for the jQuery library (https://code.jquery.com), or for the Chart.js library (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js), or for many other popular JS libraries, you'd find that they use the IIFE pattern.

Thus, with IIFEs, we could add different scripts to our pages, without the worry that code collisions might happen.

The problem with IIFEs

Unfortunately, simply using IIFEs does not fix all our problems. To illustrate the issue at hand, let's quote Joe Armstrong, creator of Erlang:

"You wanted a banana, but what you got is the gorilla holding the banana, and the entire jungle."

Bear in mind that in this quote, Mr. Armstrong was discussing a problem with object-oriented languages, but the underlying issue is applicable in JS code modularization.

Basically, our problem with IIFEs is that we can't cherry-pick specific functionality that we'd like to use from a JS library. With the IIFE pattern, we must use everything that is wrapped up in an IIFE, even if we are only using just a small piece of a specific library's codebase. Of course, to be honest, IIFEs are not the ones to blame for this. JS, the language, for a long time simply did not have the ability to cherry-pick any kind of code functionality, because in JS, it was simply impossible to split your code into modules.

Another major pain point of JS was the issue of reusing third-party code across teams.

Sharing third-party libraries in a team environment with NPM

IIFEs solved the problem of code collisions, but they didn't solve the problem of code reuse. What if a developer on my team has a different, updated version of a library, with breaking changes? What if I decide to update the dependencies on my computer? How will my other team members deal with that? Besides using source version control, are there any other options for faster collaboration?

Node Package Manager (NPM) was the answer to these problems. Node is just a Google V8 JS engine that can run on a server. NPM simply allows a developer to install new libraries into a project, regardless of whether it is to be used on the frontend or the backend of an app. So, effectively, NPM is the JS package manager, similar to what we have in Ruby (gems (https://rubygems.org/)), C# (NuGet (https://www.nuget.org/)), or in Linux (apt-get, yum).

For example, let's say we wanted to install Vue via NPM. If we have Node installed on our machine, we'll have NPM too, since NPM comes bundled with a Node installation.

Next, we need to create a new directory. Let's change this directory's name to vue-from-npm, and point our command-line console to it. We can then follow it up with this command:

npm init -y

Running the preceding command will create a package.json file. The -y flag accepts all the default answers that you'd be prompted with in the console.

If we looked at the newly created package.json file inside our project directory, we'd see the following contents:

{
 "name": "vue-from-npm",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" &&am...

Table of contents

• Title Page
• Copyright and Credits
• Dedication
• About Packt
• Contributors
• Preface
• Introducing Vue CLI 3
• Webpack in Vue CLI 3
• Babel in Vue CLI 3
• Testing in Vue CLI 3
• Vue CLI 3 and Routing
• Using ESLint and Prettier in Vue CLI 3
• Improving CSS with SCSS
• Deploying Vue CLI 3 Apps on GitHub Pages
• Other Books You May Enjoy