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

Understanding how Git works

When you work on a project, if you are not using source version control such as Git, you might think that there is only one folder for your project. For example, any Vue app that you've installed using Vue CLI 3 will end up as one separate folder with a number of subfolders inside of it.

We can simplify the tree structure of such a Vue app, and describe it like this:

aVueApp
   |- aSubfolder
   |- anotherSubfolder
   |- yetAnotherSubfolder

Note that our imaginary Vue app has one root folder called aVueApp. Inside of this root folder are three subfolders that contain the complete functionality of our Vue app.

As long as we're dealing with only a few files and folders, that is, as long as our Vue app is very small, we don't have to worry about versioning our files and folders, since there's almost nothing to be versioned. If we make an...

Previous Section
End of Section 3
Next Section