Full-Stack Vue.js 2 and Laravel 5电子书

Title Page

Copyright

Full-Stack Vue.js 2 and Laravel 5

Credits

About the Author

About the Reviewer

www.PacktPub.com

Why subscribe?

Customer Feedback

Preface

What this book covers

What you need for this book

Operating system

Development tools

Browser

Vue Devtools

IDE

Hardware

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

Hello Vue – An Introduction to Vue.js

Introducing Vue.js

Basic features

Installation

Templates

Directives

Reactivity

Components

Advanced features

Single-file components

Module build

Server-side rendering

The Vue ecosystem

Vue Devtools

Vue Router

Vuex

Case-study project

Vuebnb

Code base

Folders

Summary

Prototyping Vuebnb, Your First Vue.js Project

Vuebnb prototype

Project code

NPM install

Main files

Opening in the browser

Installing Vue.js

Page content

The Vue instance

Data binding

Mock listing

Header image

Style binding

Directives

Usage

Expressions

Example: v-if

Arguments

Style binding (continued)

Lists section

List rendering

Icons

Key

Prices

Show more feature

Class binding

Event listener

Reactivity

Getters and setters

Reactive data properties

Hiding the More button

Image modal window

Opening

Window

Disabling the main window

Dimming the main window

Preventing body scroll

Vue's mount element

Watchers

Closing

Escape key

Event modifiers

Lifecycle hooks

Methods

Proxied properties

Removing listener

Summary

Setting Up a Laravel Development Environment

Laravel

Laravel and Vue

Environment

Homestead

Vuebnb

Project code

Shared folders

Terminal commands

Environment variables

Composer install

Database

Serving the project

Local DNS entry

Accessing the project

Summary

Building a Web Service with Laravel

Vuebnb room listings

Web service

Mock data

Database

Migration

Schema

Execution

Seeding mock listings

Creating a seeder

Loading the mock data

Inserting the data

Executing the seeder

Listing model

Eloquent ORM

Casting

Public interface

Controller

Images

Accessing images

Image links

Summary

Integrating Laravel and Vue.js with Webpack

Laravel frontend

JavaScript

CSS

Node modules

Views

Asset compilation

Webpack

Dependencies

Modules

Bundling

Loaders

Laravel Mix

Running Webpack

CLI

First build

JavaScript

CSS

Fonts

Migrating Vuebnb

Removing unnecessary dependencies and files

HTML

Syntax clash

JavaScript

Mock data dependency

Displaying modules with Webpack

Vue.js dependency

CSS

Font styles

Fonts

Images

Development tools

Watch mode

BrowserSync

ES2015

Polyfills

Mock data

Routes

Architecture

Injecting data

JSON

Sharing data between scripts

Replacing the hard-coded model

Amenities and prices

Image URLs

Replacing the hard-coded image URLs

Summary

Composing Widgets with Vue.js Components

Components

Registration

Data

Image carousel

Changing images

Computed properties

Composing with components

Registration scope

Carousel controls

Communicating with components

Props

One-way data flow

Dynamic props

Image URLs

Distinguishing carousel controls

Custom events

Changing carousel images

Single-file components

Transformation

Refactoring components to SFCs

CSS

CarouselControl

Content distribution

Slots

Modal window

Refs

Header image

Feature lists

Scoped slots

Expandable text

Virtual DOM

Render functions

Vue Loader

Refactoring the main template as single-file component

Mounting the root-level component with a render function

Vue.js builds

Module system

Production builds

Full build vs runtime-only

Selecting a build

Summary

Building a Multi-Page App with Vue Router

Single-page applications

Routers

Vue Router

Special components

Vuebnb routing

Installing Vue Router

Creating routes

App component

Home page

Home route

Initial state

Refactoring

Home page initial state

Adding the thumbnail

Receiving in the client

ListingSummary component

In-app navigation

Adding a path to the model

Route navigation guards

next

HomePage component

Home API endpoint

Axios

Mixins

Moving the solution to a mixin

assignData

Linking to the listing page

Scroll behavior

Adding a footer

The route object

Dynamically selecting the container class

Listing summary image slider

Adding the slider

Translate

Carousel controls

Finishing touches

Summary

Managing Your Application State with Vuex

Flux application architecture

Principle #1 – Single source of truth

Principle #2 – Data is read-only

Principle #3 – Mutations are synchronous

Vuex

Installing Vuex

Save feature

ListingSave component

Saved state

Mutator method

Changing the icon to reflect the state

Adding to ListingPage

Making ListingSave a button

Moving page state into the store

State and mutator methods

Router

Retrieving page state from Vuex

Getters

Checking if page state is in the store

Saved page

Toolbar links

Summary

Adding a User Login and API Authentication with Passport

User model

Migration

Model

Seeder

Login system

LoginPage component

Server routes

CSRF protection

Post-login redirection

Adding authentication links to the toolbar

Protecting the saved route

Passing authentication state to the frontend

auth meta property

Responding to authenticated state

Retrieving saved items from the database

Persisting saved listings

Creating an API route

Vuex actions

AJAX request

API authentication

OAuth

Laravel Passport

Attaching tokens

Summary

Deploying a Full-Stack App to the Cloud

Heroku

CLI

Creating an app

Source code

Environment variables

Creating a database

Default string length

Configuration

Configuring a web server

Passport keys

Deployment

Migration and seed

Serving static assets

Content distribution networks

KeyCDN

Uploading files with FTP

Environment variables

Skipping images

NPM scripts

Production build

Running the FTP script

Reading from the CDN

CDN helper

Setting the CDN URL

Using the CDN in Laravel

Using the CDN in Vue

Deploying to Heroku

Finale

Recap

Next steps

Summary