Book Image

Vue CLI 3 Quick Start Guide

By : Ajdin Imsirovic
Book Image

Vue CLI 3 Quick Start Guide

By: Ajdin Imsirovic

Overview of this book

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.
Table of Contents (10 chapters)

Vue CLI 3 and Routing

In the previous chapter, we saw how to work with some testing suites such as Jest and Cypress in Vue. In this chapter, we'll look at working with vue-router and use it with Vue CLI 3. We'll look at some practical tasks such as lazy-loading components. We'll look at using the Vue add command to add vue-router and why that's not the best strategy, and steps to take to mitigate it. Understanding routing in Vue is beneficial if you want to build larger and more complex apps. The following a list of subjects covered in this chapter:

  • Adding a new Vue project with vue-router and vuex
  • Configuring preset options through VS Code's command line
  • Understanding vue-router routes
  • Using named routes
  • Adding a dynamic route
  • Navigating to a route from the methods option in a Vue instance
  • Working with nested (child) routes
  • Lazy-loading routes

We&apos...