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.

Related Content you might be interested in

Current Title:

Small book image
Vue CLI 3 Quick Start Guide
Ajdin Imsirovic
May, 2019 | 200 pages
No titles found
Table of Contents (10 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
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
Summary
2
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
Summary
3
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
Summary
4
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
Summary
5
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
Summary
6
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
Summary
7
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
Summary
8
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
Summary
9
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Who this book is for

This book is for web developers and JavaScript developers who want to learn more about Vue CLI 3. The readers must have basic knowledge of HTML/CSS and JavaScript. Essentially, the reader should also be familiar with basic operational system workflow, such as using a UNIX-like command-line interface, including Git Bash, Windows PowerShell, or any related command-line tool.

This book dives into the technological building blocks of Vue CLI 3. This is not a book about writing apps in Vue. It is more of a foundational book that will help you understand how things work inside Vue CLI. If you were never completely sure how NPM works and how to use it properly, this book will explain that, through the lens of Vue CLI 3. Similarly, we'll look at webpack, HMR, using single-file .vue components, SCSS, ECMAScript, unit testing with Jest, and E2E testing with Cypress.

Previous Section
Next Section