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

The benefits of using Vue CLI 3

When Vue CLI 3 came out, Evan You, the maker of Vue, listed these objectives for it:

  • Avoid toolchain fatigue for frontend development by simplifying the setup
  • Follow best practices in tooling
  • Make these best practices the default in Vue apps

Besides these great objectives, Vue CLI came with a number of updates, such as the following:

  • Preset webpack configuration
  • ES2017 and Babel 7 support out of the box
  • Excellent CSS support, including Sassy CSS (SCSS) and PostCSS support
  • A number of integration options (TypeScript, PWA, web components, end-to-end testing, Jest, and so on)

That is a lot of functionality. The aim of this book is to go through all of the options and get you familiar with their inner workings.

Now, to wrap this chapter up, let's see how easy it is to set up a default app using the default options.

Previous Section
End of Section 7
Next Section