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

Configuring ESLint in Vue CLI 3

Now that we're familiar with Prettier and ESLint, we'll install them into a new project using the Vue CLI 3. Let's point our Git Bash to the root of Chapter6 folder and run this command:

code .

Once VS Code is open, we'll toggle on the command line, and run the following command:

vue create vc3-prettier-eslint

Then, we'll just accept the default installation with Babel and ESLint, and wait for the app to install.

Next, similar to what we did before, we will run vue ui and then import the vc3-eslint app to our Vue CLI 3 GUI Dashboard.

As we can see, ESLint comes as a default installation in our Vue CLI 3 apps. But how do we configure ESLint, as we did in the previous section of this chapter?

Setting up ESLint configurations in...

Previous Section
End of Section 3
Next Section