Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Vue CLI 3 Quick Start Guide
  • Toc
  • feedback
Vue CLI 3 Quick Start Guide

Vue CLI 3 Quick Start Guide

By : Imsirovic
close
Vue CLI 3 Quick Start Guide

Vue CLI 3 Quick Start Guide

By: 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.
Table of Contents (10 chapters)
close

The problem with the this keyword in arrow functions in Vue

Unfortunately, when Babel transpiles the this keyword inside an arrow function, it transpiles it to _this. That means that any of our methods will be broken and our apps won't work. The underlying cause for this is due to the fact that arrow functions are scoped differently than ES5 functions.

In the next section, we'll look at the recommended approach in defining functions inside the methods option of a Vue instance.

Recommended solutions to keyword problems

The recommended solution to the this keyword inside Vue components is to not use the arrow function syntax since it doesn't produce the expected results due to scoping issues. Specifically, arrow...

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
bookmark search playlist download font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete