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)

Introducing Vue CLI 3

This book introduces you to Vue CLI 3 and answers questions such as how to use it, why to use it, the best practices, and what you'll get out of it.

In this chapter, we'll look at how to set up Vue CLI 3 on our system. We'll begin by checking to see whether Vue CLI 3 is already available, and we'll see the exact steps to take if we either need a fresh installation or an update from a previous version.

We'll then look at how to install the Node Version Manager (NVM), and why that is a better alternative than simply installing Node. We'll see how easy it is to get started with Vue CLI 3 in VS Code, and how to integrate all these tools by using our command line.

We'll also discuss why Vue CLI 3 is great to use and work with, and we'll see this in practice, by running a default Vue CLI 3 app, both from the command line and by using the built-in Vue CLI 3 UI functionality.

The topics we will cover in this chapter include the following:

  • Setting up Vue CLI 3 on your system
  • Installing Vue CLI 3
  • Installing VS Code
  • Using Vue CLI with no configuration
  • The benefits of using Vue CLI 3
  • Avoiding JavaScript fatigue with the default toolchain

We'll begin this chapter by setting up Vue CLI 3.