Vue.js 2 web development projects : learn Vue.js by building 6 web apps

Vue.js 2 web development projects learn Vue.js by building 6 web apps

A project-based, practical guide to get hands-on into Vue.js 2.5 development by building beautiful, functional and performant web applications About This Book Build exciting real world web projects from scratch and become proefficient with Vue.js Web Development Take your app to the next level with...

Descripción completa

Detalles Bibliográficos
Otros Autores: Chau, Guillaume, author (author)
Formato: Libro electrónico
Idioma:Inglés
Publicado: Birmingham, [England] ; Mumbai, [India] : Packt Publishing 2017.
Edición:1st edition
Materias:
Web site development.
Ver en Biblioteca Universitat Ramon Llull:https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009630109306719
Tabla de Contenidos:
  • Cover
  • Copyright
  • Credits
  • About the Author
  • About the Reviewer
  • www.PacktPub.com
  • Customer Feedback
  • Table of Contents
  • Preface
  • Chapter 1: 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
  • Chapter 2: 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
  • Chapter 3: 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
  • Chapter 4: 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
  • Chapter 5: 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
  • Chapter 6: 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
  • Chapter 7: 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
  • Chapter 8: 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
  • Index.

Ejemplares similares