Vue.js 2 Design Patterns and Best Practices电子书

Title Page

Copyright and Credits

Vue.js 2 Design Patterns and Best Practices

Packt Upsell

Why subscribe?

PacktPub.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

Vue.js Principles and Comparisons

Prerequisites

Windows

Mac

Installing Node via Homebrew

Editor

Browser

Installing the Vue devtools

Vue CLI

How Vue.js compares

React

Angular

Mobile development

Server-Side Rendering (SSR)

Conclusion

Summary

Proper Creation of Vue Projects

Visual Studio Code extensions

Vetur

Vue 2 Snippets

Vue CLI

JavaScript modules

Vue-loader

Loading modules without Webpack

VueJS devtools

TypeScript and Vue

Lifecycle hooks

Properties

Computed

RxJS and Vue

What is RxJS?

Integrating with Vue

Summary

Proxying

How 'this' works within JavaScript

How Vue handles 'this'

Data properties

Computed properties

Watched properties

Lifecycle hooks

Vue.js and the Virtual DOM

DOM

Virtual DOM

Summary

Writing Clean and Lean Code with Vue

Proxying

How 'this' works within JavaScript

How Vue handles 'this'

Data properties

Computed properties

Watched properties

Lifecycle hooks

Vue.js and the Virtual DOM

DOM

Virtual DOM

Summary

Vue.js Directives

Model

Iteration with v-for

Bindings

Adding secondary properties

Style bindings

DOM events and v-on

Key modifiers

Event modifiers

Conditionally showing DOM elements

v-show

v-if

v-else

v-else-if

Filters

Locally registered filters

Globally registered filters

Summary

Secured Communication with Vue.js Components

Your first Vue component

Registering components globally

Scoped styles

Registering a component locally

Component communication

Configuring property values

Custom events

Sending event values

Event Bus

Slots

Defaults

Named slots

Summary

Creating Better UI

Animations

CSS animations

Animate.css

Using Animate.css

Transitions

Transition states

Form validation

What is Vuelidate?

Using Vuelidate

Displaying form errors

Password validation

Form submission

Render/functional components

Rendering elements

Attributes

Components and props

JSX

Summary

HTTP and WebSocket Communication

HTTP

Installing JSON server

HTTP GET

HTTP POST

HTTP PUT

HTTP DELETE

Real-time chat application with Node and Socket.io

What is Socket.io?

Server setup

Client connections

Setting up Vue and Socket.io

Determining connection status

Creating a connection status bar

Navigation bar

Message list

Adding messages to the list

Server-side events with Socket.io

Nodemon

Summary

Vue Router Patterns

Single Page Applications

Using the router

Creating routes

Dynamic routes

Route props

Component Navigation Guards

beforeRouteUpdate

beforeRouteEnter

beforeRouteLeave

Global router hooks

beforeEach

beforeResolve

afterEach

Resolution stack

Programmatic navigation

router.replace

router.go

Lazy loading routes

An SPA project

Enabling the router

Defining routes

Creating the UserList route

Getting data from an API

Creating a detail page

Child routes

Summary

State Management with Vuex

What is Vuex?

State Management Pattern (SMP)

Thinking about state

Using Vuex

Creating a new store

Defining action types

Actions

Mutations

Getters

Combining elements

Payloads

Vuex and Vue devtools

Modules and scalability

Summary

Testing Vue.js Applications

Why testing?

Unit testing

Setting up vue-test-utils

Creating a TodoList

Writing tests

Vue options

Adding new features

Click events

Testing events

Using Wallaby.js for a better testing experience

Summary

Optimization

Progressive Web Applications (PWAs)

Web application manifest

Testing on a device

Firebase deployment

Continuous Integration (CI)

Unit tests

Creating a Git repository

Connecting to Travis CI

Configuring Travis

Automatic deployment to Firebase

Service worker

Summary

Server-Side Rendering with Nuxt

Nuxt

Creating a Nuxt project

Directory structure

Nuxt configuration

Navigation

Navigating between routes

Layouts

The Mock REST API

asyncData

Categories

Category detail

Error page

Plugins

Adding recipes

Transitions

Building for production

Static

SPA mode

Summary

Patterns

Components

Communication – Anti-pattern

What can we change about this to make it better?

Children mutating props – Anti-pattern

What should we do instead?

Mutating property arrays

Using data as an object - Anti-Pattern

Naming components – Anti-pattern

Template expressions

Pattern – Container/Presentational components

Prop validation

Understanding reactivity

Summary