前端工程化 基于Vue.js 3.0的设计与实践

本书作者为前端领域资深工程师，以工程化的视角阐述前端开发过程，内容翔实丰富，具有很强的指导意义。

本书以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使用 @vuecli 创建项目
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在独立TypeScriptJavaScript文件里使用路由
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通用JavaScriptTypeScript插件
7.4本地插件
7.4.1封装的目的
7.4.2常用的本地封装类型
7.4.3开发本地通用JavaScriptTypeScript插件
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.2propsemits
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-modelemits
8.3.1绑定 v-model
8.3.2配置 emits
8.4refemits
8.4.1父组件操作子组件
8.4.2子组件通知父组件
8.5爷孙组件通信
8.6provideinject
8.6.1发起 provide
8.6.2接收 inject
8.7兄弟组件通信
8.8全局组件通信
8.9EventBus
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代码命名技巧
附录 本书涉及的部分官方网站和文档的地址