Vue CLI 3 Quick Start Guide电子书

Dedication

About Packt

Why subscribe?

Packt.com

Contributors

About the author

About the reviewer

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Get in touch

Reviews

Introducing Vue CLI 3

Technical requirements

Setting up Vue CLI 3 on our system

Is Vue CLI 3 already available?

Installing Node.js using Node Version Manager

Why install NVM?

Installing NVM on Windows

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

Vue CLI 3 default app via the command line

Vue CLI 3 default app via the UI

Summary

Webpack in Vue CLI 3

The evolution of the JS language

The script tag

Immediately Invoked Function Expressions

The problem with IIFEs

Sharing third-party libraries in a team environment with NPM

JavaScript task runners and NPM scripts

Modules in JavaScript

Working with modules in Node.js

Module bundlers, a way to use modules in the browser

What is webpack?

How webpack works

Building a new project and running webpack on it

Running webpack on a project

Adding a Vue project via NPM and using webpack with it

Adding our Vue component as a JavaScript module

Compiling JavaScript modules with webpack

Adding options with the help of the webpack configuration file

Adding an HTML file so that we can render our Vue component

Giving webpack the ability to output an HTML file

Adding a .vue file as a JavaScript module

Adding a webpack loader to work with .vue files

Fixing the issue with our index.html file

Delivering HTML files via webpack with the help of html-webpack-plugin

Understanding Hot Module Replacement in Vue

Observing HMR updates

Summary

Babel in Vue CLI 3

Understanding Babel

The building blocks of @vue/cli-plugin-babel

Babel 7 in @vue/cli-plugin-babel

The role of babel-loader in @vue/cli-plugin-babel

The role of @vue/babel-preset-app

Other features of @vue/cli-plugin-babel

Using Babel and webpack in Vue 2 without Vue CLI

Installing the necessary NPM packages

Running webpack with ES5 code

Adding webpack-dev-server

Updating the methods option to ES6 syntax

Adding babel-loader to our webpack configuration

Updating our webpack configuration to work with babel

The problem with the this keyword in arrow functions in Vue

Recommended solutions to keyword problems

Adding one counter app

Summary

Testing in Vue CLI 3

Understanding Vue plugins

Beginning testing on a brand new Vue app

Adding a new project with Vue CLI UI

Adding the Jest plugin to our Vue app

Examining the updates

Adding the code for our Vue application

Writing our first unit test inside a Vue app with Jest

Running our first unit test inside the Vue CLI UI

Importing mount from test-utils and writing another unit test

Mounting the component to be tested

Writing a failing assertion

Writing a passing assertion

Triggering a button click in our test

Test-driven development in Vue CLI 3

Improving our tests in Vue CLI 3

Watching our tests in Vue CLI 3

Writing end-to-end tests with Cypress

Introducing Cypress

Adding a Cypress plugin to our project

Verifying updates to package.json made by the Cypress plugin installation

Updating Cypress tests in our Vue app

Summary

Vue CLI 3 and Routing

Adding a new Vue project with vue-router and vuex

Configuring preset options through VS Code's command line

Adding vue-router and vuex

Adding ESLint and Prettier

Finishing the configuration

Installing all the plugins for our new project

Serving our project from the Vue CLI UI

Running the serve task from the UI

Working with routes in vue-router

Inspecting the two default routes

Inspecting project files

The contents of main.js

The App.vue file and router-link navigation

Rendering a Vue instance and mounting it into #app

Running the build task from the UI

Serving the app in production mode from the UI

Some basics of working with routes

The router-view tag needs to be nested

Using named routes

Navigating to a route by triggering a method of a Vue instance

Working with nested routes

Lazy- loading routes

Working with dynamic routes

Summary

Using ESLint and Prettier in Vue CLI 3

What ESLint is, and how to configure it on its own

Installing npm packages globally versus installing npm packages locally

What is Prettier?

Running locally-installed npm modules on the command line using npx

Installing Prettier globally and running it on index.html

Running Prettier with npx

Working with ESLint

Installing ESLint globally and unsuccessfully running it from the command line

Running eslint --init command

Understanding the structure of .eslintrc.js config file

Running ESLint on a JavaScript file

Updating error level rules in ESLint

Configuring ESLint in Vue CLI 3

Setting up ESLint configurations in Vue CLI 3 GUI

Using ESLint and Prettier together in a Vue CLI 3 UI project

Summary

Improving CSS with SCSS

Installing Bootstrap + Vue

Adding BootstrapVue as a plugin

Using the bootstrap-vue plugin to add styles to our project

Using SCSS in our project

Dealing with errors

Writing some SCSS in our project

Overriding bootstrap-vue styles

Using variables, mixins, and interpolation

Using Sassmeister to practice SCSS

Using SCSS mixins and interpolation in our Vue project

Summary

Deploying Vue CLI 3 Apps on GitHub Pages

Installing GitHub Desktop app

Understanding how Git works

Starting a new Vue app and tracking changes with Git

Committing changes to our app

The three trees concept

Branching in Git

Merging branches

Registering a new GitHub account

Adding origin/master using GitHub Desktop

Publishing your local repository

Publishing our project on GitHub Pages

Getting our project ready to be published

Updating the Vue configuration file

Saving changes and pushing them to the remote repository with GitHub Desktop

Debugging your GitHub pages deployment

Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think