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.

Preface

Who this book is for

What this book covers

To get the most out of this book

Free Chapter

Introducing Vue CLI 3

Introducing Vue CLI 3

Technical requirements

Setting up Vue CLI 3 on our system

Installing Vue CLI 3

Installing VS Code

Using Vue CLI with no configuration

The benefits of using Vue CLI 3

Default toolchain, fatigue level zero

Webpack in Vue CLI 3

Webpack in Vue CLI 3

The evolution of the JS language

What is webpack?

Adding a Vue project via NPM and using webpack with it

Understanding Hot Module Replacement in Vue

Babel in Vue CLI 3

Babel in Vue CLI 3

Understanding Babel

Using Babel and webpack in Vue 2 without Vue CLI

The problem with the this keyword in arrow functions in Vue

Testing in Vue CLI 3

Testing in Vue CLI 3

Understanding Vue plugins

Beginning testing on a brand new Vue app

Test-driven development in Vue CLI 3

Improving our tests in Vue CLI 3

Writing end-to-end tests with Cypress

Vue CLI 3 and Routing

Vue CLI 3 and Routing

Adding a new Vue project with vue-router and vuex

Working with routes in vue-router

Using ESLint and Prettier in Vue CLI 3

Using ESLint and Prettier in Vue CLI 3

What ESLint is, and how to configure it on its own

Configuring ESLint in Vue CLI 3

Using ESLint and Prettier together in a Vue CLI 3 UI project

Improving CSS with SCSS

Improving CSS with SCSS

Installing Bootstrap + Vue

Using the bootstrap-vue plugin to add styles to our project

Using SCSS in our project

Deploying Vue CLI 3 Apps on GitHub Pages

Deploying Vue CLI 3 Apps on GitHub Pages

Installing GitHub Desktop app

Understanding how Git works

Registering a new GitHub account

Adding origin/master using GitHub Desktop

Publishing our project on GitHub Pages

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

What is webpack?

Webpack is a module bundler for the web. Some people also refer to it as an asset compiler for web applications.

According to webpack's GitHub page:

"It packs many modules into a few bundled assets and so on. Modules can be CommonJs, AMD, ES6 modules, CSS, images, JSON, CoffeeScript, LESS, and so on, and your custom stuff."

Earlier in this chapter, in the section titled Working with modules in Node.js, we barely scratched the surface of how modules get exported and required in Node apps. What we did not mention is that there are all kinds of different module syntaxes that we can use. As already mentioned, Node.js works with the CommonJS module syntax. Besides CommonJS, there is also Asynchronous Module Definition (AMD). Alongside AMD, you can use ESM modules. With ESM modules, the syntax is a bit different from what we saw earlier.

Let's rewrite...