Vue.js 3 By Example (John Au-Yeung)（Z-Library）

【One-Line Pitch】 A project-driven tour of Vue 3 that takes you from core reactivity and components to real, shippable apps—PWAs, GraphQL carts, Ionic mobile, Electron desktop, and a Laravel/Socket.IO chat—so you learn by building rather than by reading theory. Best for developers who already know modern JavaScript and want hands-on breadth across the Vue ecosystem. 【Book Arc】 - **Opening (~0%–10%)**: Orients you to the book's project-based approach and prerequisites (modern JavaScript, some TypeScript/PHP/SQL for later chapters), then sets up tooling—Vue CLI v4.5, Vite, and the various Vue build formats—before introducing core reactivity with `v-model`, computed properties, and the root-instance-to-component data flow. - **Early (~10%–32%)**: Builds the Vue 3 fundamentals you'll reuse everywhere—conditionals (`v-if` vs `v-show`), loops with `key`, directives, props, mixins, and lifecycle methods—then applies them in a GitHub portfolio PWA using Octokit, service workers, and token-based access, and starts a slider-puzzle game with local-storage records. - **Middle (~32%–48%)**: Deepens component and testing practice—computed properties driving game state, timing/score logic, and Jest unit tests (mounting components, asserting emitted events, mocking `localStorage` and timers)—then pivots toward packaging with the Electron Builder plugin. - **Late (~48%–end, per chapter list)**: Expands into full-stack and cross-platform blueprints—a GraphQL shopping cart with Express resolvers and admin/customer frontends, an Ionic calculator mobile app using TypeScript, and a chat app built with Vue 3, Laravel, and Socket.IO. - **Ending**: Closes on the book's stated philosophy—tutorials are only a start; build your own projects to become proficient. 【Key Takeaways】 - **Reactivity is the spine of Vue 3** (Opening): `v-model` syncs inputs to reactive properties, and computed properties re-run when their dependencies change—grasp this and most later code reads easily. - **Directives are the DOM-manipulation layer** (Early): `v-bind` (colon shorthand), `v-if`/`v-show`, and `v-for` with unique `key`s are the everyday tools; the template compiler handles camelCase-to-kebab-case prop mapping for you. - **Components + props + mixins structure real apps** (Early): Props pass data down, lifecycle hooks and watchers (with `immediate`) drive updates, and mixins abstract shared logic like the Octokit client. - **PWAs add offline and hardware reach** (Early): Service workers are generated at build time and registered only in production, so development stays uncached and debuggable. - **Test the logic, not just the UI** (Middle): Jest with Vue Test Utils lets you assert emitted events and mock `localStorage`/timers; the book favors many fast unit tests over few slow end-to-end ones. - **One codebase, many targets** (Middle–Late): The same Vue skills extend to Electron desktop, Ionic mobile, and GraphQL-backed full-stack apps—breadth is the book's selling point. - **Full-stack means owning the backend too** (Late): Express resolvers for GraphQL and Laravel/Socket.IO for chat show how Vue frontends connect to real APIs and real-time data. 【Reading Tips】 - **Skim the setup, deep-read the patterns**: Tooling commands (CLI/Vite installs) are reference material; spend your attention on reactivity, directives, and component composition. - **Type the code, don't copy it**: The book explicitly warns that copy-paste causes errors—build each project in the repo alongside the text. - **Treat chapters as independent blueprints**: Jump to the project matching your goal (PWA, GraphQL cart, mobile, chat) rather than reading strictly front to back. - **Pause at the testing chapter**: The Jest mocking techniques (fake timers, localStorage spies) are the most transferable skill for real work. - **Check prerequisites before late chapters**: TypeScript for Ionic, PHP for Laravel, and basic SQL will save you friction. 【Coverage Limits】 These excerpts concentrate on the opening fundamentals, the PWA, the slider-puzzle game, and testing; the GraphQL cart, Ionic calculator, and Laravel chat chapters appear only as tables of contents, so this guide cannot detail their implementation.