Vue CLI 3 Quick Start Guide: Build and maintain Vue.js applications quickly with the standard CLI

What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

AI Assistant (beta) to help accelerate your learning

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...

Key benefits

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

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

What do you get with Print?