本书以Vue.js的3.0版本为核心技术栈，围绕“前端工程化”和TypeScript的知识点展开讲解，根据笔者多年的前端开发和一线团队管理经验，将Vue 3的知识点按照工程师做项目的实施顺序梳理成章，一步一步帮助读者进行前端工程化和Vue 3的开发。从前端工程化开始到TypeScript语言的学习，再到使用TypeScript开发Vue 3项目，通过循序渐进的学习过程提升读者在前端工程化领域的实战能力。

  本书大部分知识点都搭配了通俗易懂、可实现的代码案例，读者扫描封底的二维码可获得随书附赠的源代码等资源。本书适合计算机前端开发技术人员、前端技术团队管理人员和相关专业的在校大学生阅读。

前言

第1章 前端工程化概述/

 1.1传统开发的弊端/

 1.2工程化带来的优势/

  1.2.1开发层面的优势/

  1.2.2团队协作的优势/

  1.2.3求职竞争上的优势/

 1.3Vue.js与工程化/

  1.3.1了解Vue.js与全新的3.0版本/

  1.3.2Vue与工程化之间的关联/

  1.3.3选择Vue入门工程化的理由/

 1.4现代化的开发概念/

  1.4.1MPA与SPA/

  1.4.2CSR与SSR/

  1.4.3Pre-Rendering与SSG/

  1.4.4ISR与DPR/

 1.5工程化不止于前端/

  1.5.1服务端开发/

  1.5.2App开发/

  1.5.3桌面程序开发/

  1.5.4应用脚本开发/

 1.6实践工程化的流程/

 1.7工程化神器Node.js/

  1.7.1Node.js/

  1.7.2Runtime/

  1.7.3Node和浏览器的区别/

 1.8工程化的构建工具/

  1.8.1为什么要使用构建工具/

  1.8.2Webpack/

  1.8.3Vite/

  1.8.4两者的区别/

  1.8.5开发环境和生产环境/

第2章 工程化的前期准备/

 2.1命令行工具/

  2.1.1Windows/

  2.1.2macOS/

 2.2安装Node环境/

  2.2.1下载和安装Node/

  2.2.2版本之间的区别/

 2.3基础的Node项目/

  2.3.1初始化一个项目/

  2.3.2了解package.json/

  2.3.3项目名称规则/

  2.3.4语义化版本号管理/

  2.3.5脚本命令的配置/

  2.3.6Hello Node/

 2.4学习模块化设计/

  2.4.1模块化解决了什么问题/

  2.4.2如何实现模块化/

  2.4.3用 CommonJS 设计模块/

  2.4.4用 ES Module 设计模块/

 2.5认识组件化设计/

  2.5.1什么是组件化/

  2.5.2解决了什么问题/

  2.5.3如何实现组件化/

 2.6依赖包和插件/

  2.6.1包/

  2.6.2node_modules/

  2.6.3包管理器/

  2.6.4依赖包的管理/

  2.6.5如何使用包/

 2.7控制编译代码的兼容性/

  2.7.1如何查询兼容性/

  2.7.2Babel的使用和配置/

第3章 快速上手TypeScript/

 3.1为什么需要类型系统/

 3.2Hello TypeScript/

 3.3常用的 TS 类型定义/

  3.3.1原始数据类型/

  3.3.2数组/

  3.3.3对象（接口）/

  3.3.4类/

  3.3.5联合类型/

  3.3.6函数/

  3.3.7任意值/

  3.3.8npm 包/

  3.3.9类型断言/

  3.3.10类型推论/

 3.4如何编译为 JavaScript 代码/

  3.4.1编译单个文件/

  3.4.2编译多个模块/

  3.4.3修改编译后的JavaScript版本/

  3.4.4其他事项/

  3.5了解 tsconfig.json/

第4章 脚手架的升级与配置/

 4.1全新的 Vue 版本/

  4.1.1使用 Vue 3/

  4.1.2使用 Vue 2/

 4.2Hello Vue 3/

 4.3使用 Vite 创建项目/

  4.3.1create-vite/

  4.3.2create-vue/

  4.3.3create-preset/

  4.3.4管理项目配置/

 4.4使用 @vue/cli 创建项目/

  4.4.1CLI和Vite的区别/

  4.4.2更新 CLI 脚手架/

  4.4.3使用 CLI 创建 3.x 项目/

  4.4.4管理项目配置/

 4.5调整TypeScript Config/

 4.6添加协作规范/

  4.6.1Editor Config/

  4.6.2Prettier/

  4.6.3ESLint/

 4.7安装 VSCode/

 4.8添加 VSCode 插件/

  4.8.1Chinese (Simplified)/

  4.8.2Volar/

  4.8.3Vue VSCode Snippets/

  4.8.4Auto Close Tag/

  4.8.5Auto Rename Tag/

  4.8.6EditorConfig for VSCode/

  4.8.7Prettier for VSCode/

  4.8.8ESLint for VSCode/

  4.8.9其他插件/

 4.9项目初始化/

  4.9.1入口文件/

  4.9.2回顾 Vue 2的入口文件/

  4.9.3了解 Vue 3的入口文件/

 4.10Vue Devtools/

第5章 单组件的编写/

 5.1全新的 setup 函数/

  5.1.1setup的含义/

  5.1.2setup的参数使用/

  5.1.3defineComponent的作用/

 5.2组件的生命周期/

  5.2.1升级变化/

  5.2.2使用 3.x的生命周期/

 5.3组件的基本写法/

  5.3.1回顾 Vue 2中组件的基本写法/

  5.3.2了解 Vue 3中组件的基本写法/

 5.4响应式数据的变化/

  5.4.1设计上的变化/

  5.4.2用法上的变化/

 5.5响应式 API：ref/

  5.5.1类型声明/

  5.5.2变量的定义/

  5.5.3DOM 元素与子组件/

  5.5.4变量的读取与赋值/

 5.6响应式 API：reactive/

  5.6.1类型声明与定义/

  5.6.2变量的读取与赋值/

  5.6.3特别注意事项/

 5.7响应式 API：toRef 与 toRefs/

  5.7.1它们各自的作用/

  5.7.2使用 toRef/

  5.7.3使用 toRefs/

  5.7.4为什么要进行转换/

  5.7.5什么场景下比较适合使用它们/

  5.7.6在业务中的具体运用/

  5.7.7需要注意的问题/

 5.8函数的声明和使用/

 5.9数据的侦听/

  5.9.1watch/

  5.9.2watchEffect/

  5.9.3watchPostEffect/

  5.9.4watchSyncEffect/

 5.10数据的计算/

  5.10.1用法变化/

  5.10.2类型声明/

  5.10.3优势对比和注意事项/

  5.10.4setter的使用/

  5.10.5应用场景/

 5.11指令/

  5.11.1内置指令/

  5.11.2自定义指令/

 5.12插槽/

  5.12.1默认插槽/

  5.12.2具名插槽/

  5.12.3默认内容/

  5.12.4注意事项/

 5.13CSS 样式与预处理器/

  5.13.1编写组件样式表/

  5.13.2动态绑定 CSS/

  5.13.3样式表的组件作用域/

  5.13.4深度操作符/

  5.13.5使用 CSS 预处理器/

第6章 路由的使用/

 6.1路由的目录结构/

 6.2在项目里引入路由/

  6.2.1回顾 Vue 2的路由/

  6.2.2了解 Vue 3的路由/

 6.3路由树的配置/

  6.3.1基础格式/

  6.3.2公共基础路径/

  6.3.3一级路由/

  6.3.4多级路由/

  6.3.5路由懒加载/

 6.4路由的渲染/

 6.5使用 route 获取路由信息/

 6.6使用 router 操作路由/

 6.7使用 router-link 标签跳转/

  6.7.1基础跳转/

  6.7.2带参数的跳转/

  6.7.3不生成 a 标签/

 6.8在独立TypeScript/JavaScript文件里使用路由/

 6.9路由元信息配置/

 6.10路由重定向/

  6.10.1基本用法/

  6.10.2业务场景/

  6.10.3配置为 path/

  6.10.4配置为 route/

  6.10.5配置为 function/

 6.11路由别名配置/

 6.12404 路由页面配置/

 6.13导航守卫/

  6.13.1钩子的应用场景/

  6.13.2路由里的全局钩子/

  6.13.3在组件内使用全局钩子/

  6.13.4路由里的独享钩子/

  6.13.5组件内单独使用/

 6.14路由侦听/

  6.14.1watch/

  6.14.2watchEffect/

 6.15部署问题与服务端配置/

  6.15.1常见部署问题/

  6.15.2服务端配置方案/

第7章 插件的开发和使用/

 7.1插件的安装和引入/

  7.1.1通过 npm 安装/

  7.1.2通过 cnpm 安装/

  7.1.3通过 yarn 安装/

  7.1.4通过 pnpm 安装/

  7.1.5通过 CDN 安装/

  7.1.6插件的引入/

 7.2Vue 专属插件/

  7.2.1全局插件的使用/

  7.2.2单组件插件的使用/

 7.3通用JavaScript/TypeScript插件/

 7.4本地插件/

  7.4.1封装的目的/

  7.4.2常用的本地封装类型/

  7.4.3开发本地通用JavaScript/TypeScript插件/

  7.4.4开发本地 Vue 专属插件/

 7.5全局 API 挂载/

  7.5.1回顾 Vue 2的全局API挂载/

  7.5.2了解 Vue 3的全局API挂载/

  7.5.3定义全局 API/

  7.5.4全局 API的替代方案/

 7.6npm 包的开发与发布/

  7.6.1常用的构建工具/

  7.6.2项目结构与入口文件/

  7.6.3开发 npm 包/

  7.6.4生成 npm 包的类型声明/

  7.6.5添加说明文档/

  7.6.6发布 npm 包/

第8章 组件之间的通信/

 8.1父子组件通信/

 8.2props/emits/

  8.2.1下发 props/

  8.2.2接收 props/

  8.2.3配置带有类型限制的 props/

  8.2.4配置可选以及带有默认值的 props/

  8.2.5使用 props/

  8.2.6传递非 props的属性/

  8.2.7获取非 props的属性/

  8.2.8绑定 emits/

  8.2.9接收并调用 emits/

  8.2.10接收 emits 时做一些校验/

 8.3v-model/emits/

  8.3.1绑定 v-model/

  8.3.2配置 emits/

 8.4ref/emits/

  8.4.1父组件操作子组件/

  8.4.2子组件通知父组件/

 8.5爷孙组件通信/

 8.6provide/inject/

  8.6.1发起 provide/

  8.6.2接收 inject/

 8.7兄弟组件通信/

 8.8全局组件通信/

  8.9.1回顾 Vue 2的EventBus/

  8.9.2了解 Vue 3的EventBus/

  8.9.3创建 Vue 3的 EventBus/

  8.9.4创建和移除侦听事件/

  8.9.5调用侦听事件/

  8.9.6旧项目升级 EventBus/

 8.10Reactive State/

  8.10.1创建状态中心/

  8.10.2设定状态更新逻辑/

  8.10.3观察全局状态变化/

 8.11Vuex/

  8.11.1在了解之前/

  8.11.2Vuex的目录结构/

  8.11.3回顾Vue 2的Vuex/

  8.11.4了解 Vue 3的Vuex/

  8.11.5Vuex的配置/

  8.12Pinia/

第9章 全局状态管理/

 9.1关于 Pinia/

 9.2安装和启用/

 9.3状态树的结构/

 9.4创建 Store/

  9.4.1形式1：接收两个参数/

  9.4.2形式2：接收一个参数/

 9.5管理 state/

  9.5.1给 Store 添加 state/

  9.5.2手动指定数据类型/

  9.5.3获取和更新 state/

  9.5.4批量更新 state/

  9.5.5全量更新 state/

  9.5.6重置 state/

  9.5.7订阅 state/

 9.6管理 getters/

  9.6.1给 Store 添加 getter/

  9.6.2获取和更新 getter/

 9.7管理 actions/

  9.7.1给 Store 添加 action/

  9.7.2调用 action/

 9.8添加多个 Store/

  9.8.1目录结构建议/

  9.8.2在 Vue 组件/TypeScript文件里使用/

  9.8.3Store 之间互相引用/

 9.9专属插件的使用/

  9.9.1如何查找插件/

  9.9.2如何使用插件/

第10章 高效开发/

 10.1script-setup/

  10.1.1新特性的产生背景/

  10.1.2全局编译器宏/

  10.1.3template 操作简化/

  10.1.4props接收方式的变化/

  10.1.5emits接收方式的变化/

  10.1.6attrs接收方式的变化/

  10.1.7slots接收方式的变化/

  10.1.8ref通信方式的变化/

  10.1.9顶级await的支持/

 10.2命名技巧/

  10.2.1文件命名技巧/

  10.2.2代码命名技巧/

附录 本书涉及的部分官方网站和文档的地址/