Name: Vue.js 2 Web Development Projects
Author: Guillaume Chau
ISBN: 9781787129443

微信读书书城Vue.js 2 Web Development Projects

首页我的书架登录

翻译完成

切换

Vue.js 2 Web Development Projects

Guillaume Chau

扉页
版权信息
+书签
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
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Downloading the color images of this book
Errata
Piracy
Questions
Getting Started with Vue
Why another frontend framework?
A trending project
Compatibility requirements
One-minute setup
Creating an app
Vue devtools
Templates make your DOM dynamic
Displaying text
Adding basic interactivity with directives
Summary
Project 1 - Markdown Notebook
A basic note editor
Setting up the project
The note editor
The preview pane
Computed property
Text interpolation escaping
Displaying HTML
Saving the note
Watching changes
Using a method
Accessing the Vue instance
Loading the saved note
Lifecycle hooks
Initializing directly in the data
Multiple notes
The note list
A method to create a new note
Button and click events with v-on
Binding attributes with v-bind
Displaying a list with v-for
Selecting a note
The current note
Dynamic CSS classes
Conditional templates with v-if
Saving the notes with the deep option
Saving the selection
The note toolbar with extras inside
Renaming the note
Deleting the note
Favorite notes
The status bar
Created date with a filter
Text stats
Summary
Project 2 - Castle Duel Browser Game
Rules of the game
Setting up the project
The calm before the storm
The template option
The app state
The almighty components
Building the user interface
Our first component - the top bar
Adding some gameplay data to the state
Defining and using the components
Parent-to-child communication with Props
Props in our template
Displaying a card
Listening to native events on components
Child-to-parent communication with custom events
The hand
Animating the hand with transitions
A prettier animation
Playing a card
Animating the card list
The key special attribute
The CSS transitions
The overlays
Content distribution with slots
The player turn overlay
The last play overlay
The game over overlay
Dynamic component
The overlay animation
Key attribute
The overlay background
Game world and scenery
The castles
Castle banners
Food and health bubbles
Banner bars
Animating a value
The animated clouds
The animation
Gameplay
Drawing cards
The initial hand
The hand
Playing a card
No cheating allowed
Removing the card from the hand
Waiting for the card transition to end
Applying the card effect
The next turn
New turn
Overlay close actions
Game Over!
Summary
Advanced Project Setup
Setting up our development environment
Installing vue-cli, the official command-line tool
Code editors
Our first full-blown Vue application
Scaffolding the project
Creating the app
Running our application
Render functions
Configuring babel
Babel Vue preset
Polyfills
Updating the dependencies
Updating manually
Updating automatically
Updating Vue
Building for production
Single-File Components
Template
Using Pug
Script
JSX
Style
Scoped styles
Adding preprocessors
Sass
Less
Stylus
Components inside components
Summary
Project 3 - Support Center
General app structure
Setting up the project
Routing and pages
Vue plugins
Our first routes with vue–router
Layouts with router–view
Creating routes
The router object
Router modes
Creating a navigation menu
Router links
Active class
FAQ - Consuming an API
Server setup
Using fetch
Loading animation
Extending Vue with our own plugin
Creating a plugin
Plugin options
Fetch method
Reusing code with mixins
Fetching remote data
Loading management
Error management
Support tickets
User authentication
Storing the user in a centralized state
Another plugin
Login forms
Smart form
Form input component
Customizing v-model
Login component
Style children of scoped elements
Improving our fetch plugin
Sign up operation
Login operation
User menu
Logout method
Private routes with navigation guards
Route meta properties
Router navigation guards
Redirecting to the wanted route
Initializing user authentication
Guest routes
Displaying and adding tickets
Tickets list
Session expiration
Nested routes
Fixing our navigation guard
Sending a form
Form textarea
Binding attributes
User actions
Backup user input
Advanced routing features
Dynamic routes with parameters
Dynamic remote data
The dynamic route
Not found page
Transitions
Scrolling behavior
Summary
Project 4 - Geolocated Blog
Google Auth and state management
Project setup
Creating the app
Some routing
State management with Vuex
Why do I need this?
The Vuex Store
The state is the source of truth
Mutations update the state
Strict mode
Time-travel debugging
Getters compute and return data
Actions for store operations
Mapping helpers
User state
Setting up Google OAuth
Login button
User in the store
Adapting the router
Adapting the fetch plugin
Check the user session on start
The profile picture
Synchronizing the store and the router
Embedding Google Maps
Installation
Getting the API key
Installing the library
Adding a map
Connecting the BlogMap and the store
Vuex modules
Namespaced module
Accessing global elements
BlogMap module and component
Mutations
Actions
Mapping in the component
User position
Centering on the user
Blog posts and comments
Posts store module
Rendering functions and JSX
Writing the view in JavaScript with render functions
Dynamic templates
Data objects
Virtual DOM
What is JSX?
Blog content structure (in JSX!)
No content
Creating a post
Draft store actions
Blog Map changes
Click handler
Ghost marker
Post form
Making the request
Fetching posts
Store action
Fetch posts action
Action dispatching
Displaying markers
Login and logout
Logout
Login
Selecting a post
Post details
Store changes for post selection and sending
Post Content component
Location info and scoped slots
Scoped slots to pass data to the parent
Implementing of the component
Comments - functional components
Store changes for comments
Functional component
Summary
Project 5 - Online Shop and Scaling Up
Advanced development workflow
Setting up the project
Generating a quick development API
Launching the app
Auto-prefixing CSS with PostCSS
Targeting specific browsers with browserslist
Improving code quality and style with ESLint
Configuring ESLint
Customizing the rules
Running ESLint
ESLint inside Webpack
Unit testing with Jest
Configuring Jest
Babel configuration for Jest
Our first unit test
ESLint and Jest globals
Jest snapshots
Updating the snapshots
Complementary topics
Internationalization and code-splitting
Code-splitting with dynamic imports
Automatically loading the user locale
Changing Language page
Server-side rendering
Universal App Structure
Client entry
Server entry
State management
Restoring the Vuex state on the client
Webpack configuration
Client configuration
Server configuration
Server-side setup
Page template
Express server
Creating and updating the renderer
Rendering the Vue app
Running our SSR app
Unnecessary fetch
Production build
Additional configuration
Extracting the style into CSS files
Production express server
New npm scripts
Summary
Project 6 - Real-time Dashboard with Meteor
Setting up the project
What is Meteor?
Installing Meteor
Creating the project
Our first Vue Meteor app
Routing
Production measures
Meteor collections integration
Setting up data
Adding a collection
Adding a Meteor method
Simulating measures
Inspecting the data
Dashboard and reporting
Progress bars library
Meteor publication
Creating the Dashboard component
Indicators
Listing the measures
Summary

简介

版权

Vue.js 2 Web Development Projects