- Summary 更新時間：2021-07-02 19:58:12
- Next steps
- Recap
- Finale
- Deploying to Heroku
- Using the CDN in Vue
- Using the CDN in Laravel
- Setting the CDN URL
- CDN helper
- Reading from the CDN
- Running the FTP script
- Production build
- NPM scripts
- Skipping images
- Environment variables
- Uploading files with FTP
- KeyCDN
- Content distribution networks
- Serving static assets
- Migration and seed
- Deployment
- Passport keys
- Configuring a web server
- Configuration
- Default string length
- Creating a database
- Environment variables
- Source code
- Creating an app
- CLI
- Heroku
- Deploying a Full-Stack App to the Cloud
- Summary
- Attaching tokens
- Laravel Passport
- OAuth
- API authentication
- AJAX request
- Vuex actions
- Creating an API route
- Persisting saved listings
- Retrieving saved items from the database
- Responding to authenticated state
- auth meta property
- Passing authentication state to the frontend
- Protecting the saved route
- Adding authentication links to the toolbar
- Post-login redirection
- CSRF protection
- Server routes
- LoginPage component
- Login system
- Seeder
- Model
- Migration
- User model
- Adding a User Login and API Authentication with Passport
- Summary
- Toolbar links
- Saved page
- Checking if page state is in the store
- Getters
- Retrieving page state from Vuex
- Router
- State and mutator methods
- Moving page state into the store
- Making ListingSave a button
- Adding to ListingPage
- Changing the icon to reflect the state
- Mutator method
- Saved state
- ListingSave component
- Save feature
- Installing Vuex
- Vuex
- Principle #3 – Mutations are synchronous
- Principle #2 – Data is read-only
- Principle #1 – Single source of truth
- Flux application architecture
- Managing Your Application State with Vuex
- Summary
- Finishing touches
- Carousel controls
- Translate
- Adding the slider
- Listing summary image slider
- Dynamically selecting the container class
- The route object
- Adding a footer
- Scroll behavior
- Linking to the listing page
- assignData
- Moving the solution to a mixin
- Mixins
- Axios
- Home API endpoint
- HomePage component
- next
- Route navigation guards
- Adding a path to the model
- In-app navigation
- ListingSummary component
- Receiving in the client
- Adding the thumbnail
- Home page initial state
- Refactoring
- Initial state
- Home route
- Home page
- App component
- Creating routes
- Installing Vue Router
- Vuebnb routing
- Special components
- Vue Router
- Routers
- Single-page applications
- Building a Multi-Page App with Vue Router
- Summary
- Selecting a build
- Full build vs runtime-only
- Production builds
- Module system
- Vue.js builds
- Mounting the root-level component with a render function
- Refactoring the main template as single-file component
- Vue Loader
- Render functions
- Virtual DOM
- Expandable text
- Scoped slots
- Feature lists
- Header image
- Refs
- Modal window
- Slots
- Content distribution
- CarouselControl
- CSS
- Refactoring components to SFCs
- Transformation
- Single-file components
- Changing carousel images
- Custom events
- Distinguishing carousel controls
- Image URLs
- Dynamic props
- One-way data flow
- Props
- Communicating with components
- Carousel controls
- Registration scope
- Composing with components
- Computed properties
- Changing images
- Image carousel
- Data
- Registration
- Components
- Composing Widgets with Vue.js Components
- Summary
- Replacing the hard-coded image URLs
- Image URLs
- Amenities and prices
- Replacing the hard-coded model
- Sharing data between scripts
- JSON
- Injecting data
- Architecture
- Routes
- Mock data
- Polyfills
- ES2015
- BrowserSync
- Watch mode
- Development tools
- Images
- Fonts
- Font styles
- CSS
- Vue.js dependency
- Displaying modules with Webpack
- Mock data dependency
- JavaScript
- Syntax clash
- HTML
- Removing unnecessary dependencies and files
- Migrating Vuebnb
- Fonts
- CSS
- JavaScript
- First build
- CLI
- Running Webpack
- Laravel Mix
- Loaders
- Bundling
- Modules
- Dependencies
- Webpack
- Asset compilation
- Views
- Node modules
- CSS
- JavaScript
- Laravel frontend
- Integrating Laravel and Vue.js with Webpack
- Summary
- Image links
- Accessing images
- Images
- Controller
- Public interface
- Casting
- Eloquent ORM
- Listing model
- Executing the seeder
- Inserting the data
- Loading the mock data
- Creating a seeder
- Seeding mock listings
- Execution
- Schema
- Migration
- Database
- Mock data
- Web service
- Vuebnb room listings
- Building a Web Service with Laravel
- Summary
- Accessing the project
- Local DNS entry
- Serving the project
- Database
- Composer install
- Environment variables
- Terminal commands
- Shared folders
- Project code
- Vuebnb
- Homestead
- Environment
- Laravel and Vue
- Laravel
- Setting Up a Laravel Development Environment
- Summary
- Removing listener
- Proxied properties
- Methods
- Lifecycle hooks
- Event modifiers
- Escape key
- Closing
- Watchers
- Vue's mount element
- Preventing body scroll
- Dimming the main window
- Disabling the main window
- Window
- Opening
- Image modal window
- Hiding the More button
- Reactive data properties
- Getters and setters
- Reactivity
- Event listener
- Class binding
- Show more feature
- Prices
- Key
- Icons
- List rendering
- Lists section
- Style binding (continued)
- Arguments
- Example: v-if
- Expressions
- Usage
- Directives
- Style binding
- Header image
- Mock listing
- Data binding
- The Vue instance
- Page content
- Installing Vue.js
- Opening in the browser
- Main files
- NPM install
- Project code
- Vuebnb prototype
- Prototyping Vuebnb Your First Vue.js Project
- Summary
- Folders
- Code base
- Vuebnb
- Case-study project
- Vuex
- Vue Router
- Vue Devtools
- The Vue ecosystem
- Server-side rendering
- Module build
- Single-file components
- Advanced features
- Components
- Reactivity
- Directives
- Templates
- Installation
- Basic features
- Introducing Vue.js
- Hello Vue – An Introduction to Vue.js
- Questions
- Piracy
- Errata
- Downloading the example code
- Customer support
- Reader feedback
- Conventions
- Who this book is for
- Hardware
- IDE
- Vue Devtools
- Browser
- Development tools
- Operating system
- What you need for this book
- What this book covers
- Preface
- Customer Feedback
- Why subscribe?
- www.PacktPub.com
- About the Reviewer
- About the Author
- Credits
- 版權信息
- 封面
- 封面
- 版權信息
- 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 更新時間：2021-07-02 19:58:12
