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

Using SCSS in our project

Similar to how TypeScript is referred to as a superset of JavaScript, SCSS is often referred to as a superset of CSS. But what exactly is this superset?

A superset of a language is simply a layer around it, with additional functionality that doesn't exist in the regular implementation. There could also be additional best practices, methods, and so on.

At the very core, it is possible for SCSS files to contain only plain old CSS syntax. That's because all SCSS ultimately compiles to CSS, and, as such, it is served to our browsers. This makes it very approachable. It is reassuring for an SCSS newbie to know that they can keep on writing CSS and it will just work in their SCSS!

Let's make this our starting point too. First off, let's update our bootstrap-vue plugin settings, so that we use SCSS rather than CSS.

Navigate to our app&apos...

Previous Section
End of Section 4
Next Section