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)

Setting up Vue CLI 3 on our system

A common way to work with Vue CLI 3 is via a command-line app called the Command-Line Interface (CLI), where we run our Vue CLI 3 commands. Another prerequisite is to have Node.js installed on our machine.

If you are working on a shared computer, say, within a team of your fellow developers, the chances are that you already have all the prerequisites. In that case, you could just verify that you can start using Vue CLI 3 right away by running a couple of checks.

Is Vue CLI 3 already available?

To quickly check whether you can run Vue CLI 3 right now and skip all the installation steps, run the following command in your command-line app:

node --version

Also, check for Vue CLI 3 with this command:

vue -V

If you get back any version of Node above 8.9 (ideally, above 8.11.0), you're good to go. Obviously, for Vue CLI, you'd want any version above 3.0.0.

Additionally, if you have a version of Vue CLI lower than V3, or you'd like to update to the newest Vue CLI, such as 3.3.0, just run this command:

npm install @vue/cli

What if you don't have Node.js or Vue CLI installed?

We'll use nvm or nvm-windows for Node, and after that, we'll install Vue CLI 3.

Installing Node.js using Node Version Manager

What is the recommended version of Node.js we should be using? This information is available at the following link: https://cli.vuejs.org/guide/installation.html.

Currently, as of early 2019, to get the best results with Vue CLI, the minimum version of Node required is 8.11.0+, but you can kind of get by with 8.9 if you really have to.

This brings us to another important decision: the installation of NVM.

Why install NVM?

While it is not absolutely necessary to install NVM in order to run Vue CLI 3 on your system, installing NVM is desirable for a couple of reasons.

First, you never know when Node will get a recommended update with security fixes, which usually means you'd be better off installing the update on your machine.

Second, if you need to run a different technology, other than Vue, this other technology might also require a different version of Node. To easily switch between these required Node installations on your system, you can simply install NVM.

Installing NVM on Windows

You can download the NVM for Windows from this address:

https://github.com/coreybutler/nvm-windows/releases

Locate the nvm-setup.zip file, download and extract nvm-setup.exe from it, and then install it by following these installation steps:

  1. Open the Run prompt by pressing Windows + R. Type cmd into the prompt.
  2. While inside the prompt, press Ctrl + Shift + Enter. This will run Command Prompt with administrator privileges, which is required for the next step.
  3. Visit https://nodejs.org, and see the current Long-term Support (LTS) version number. For example, currently, on 64-bit Windows, the LTS version is 10.15.1.
  4. To install it, run the following command in Command Prompt with administrator privileges:
nvm install 10.15.1
  1. Command Prompt will log out the following message:
Downloading node.js version 10.15.1 (64-bit) ...
  1. Once the download is finished, we can use the downloaded version of Node. We do it with the following command:
nvm use 10.15.1
  1. Finally, you can verify whether the installation was successful by running the following command:
node --version
  1. If you're curious about the version of npm that came with your Node installation, simply run the following:
npm --version

Next, we'll install Vue CLI 3.