本书以Vue.js的3.0版本为核心技术栈，围绕前端工程化和TypeScript的知识点展开讲解，根据笔者多年的前端开发和一线团队管理经验，将Vue 3的知识点按照工程师做项目的实施顺序梳理成章，一步一步帮助读者进行前端工程化和Vue 3的开发。从前端工程化开始到TypeScript语言的学习，再到使用TypeScript开发Vue 3项目，通过循序渐进的学习过程提升读者在前端工程化领域的实战能力。
本书大部分知识点都搭配了通俗易懂、可实现的代码案例，读者扫描封底的二维码可获得随书附赠的源代码等资源。本书适合计算机前端开发技术人员、前端技术团队管理人员和相关专业的在校大学生阅读。
本书作者为前端领域资深工程师，以工程化的视角阐述前端开发过程，内容翔实丰富，具有很强的指导意义。
Vue 3.0从2020年9月中旬正式发布到2022年2月代替Vue 2成为Vue的默认版本。经过长达一年半的市场验证，已经证明了它可以完美地支持常见的企业需求，适合投产使用，未来会被越来越多的企业所采用，只掌握Vue 2远远不能满足企业的技能要求。
本书以Vue.js的3.0版本为核心技术栈，围绕前端工程化和TypeScript的知识点展开讲解，主要内容如下：
1）如何进行前端工程化开发，掌握Node.js和npm的使用。
2）前端领域多年来受欢迎趋势走高、带有类型支持的TypeScript 语言。
3）上手主流前端框架Vue.js的全新版本，并且在遇到常见问题时知道如何解决。
本书全面融入了笔者多年的开发实践经验，大部分知识点都搭配了通俗易懂的讲解和可实现的代码案例，在阅读的过程中读者可以亲自编写代码加强学习，毕竟上手一个新技术栈最快的方法，就是边学边练。
本书作为一本入门类教程，主要面向以下读者人群：
1）掌握了基础的HTML页面编写知识，想学习一个主流前端框架的新手前端工程师。
2）已经掌握Vue 2 ，面对Vue 3的大版本更新想快速上手使用的前端工程师。
3）非职业前端开发人员，但涉及前端的工作，需要掌握一个主流前端框架的全栈工程师。
本书根据笔者多年的前端开发经验和一线团队管理经验，将Vue 3的知识点按照工程项目的实施顺序梳理成章，一步一步帮助工程师入门前端工程化和Vue 3的开发。
书中包含了很多在构建项目过程中容易遇到的问题点和解决方案，对Vue 3和Vue 2差异化较大的功能点还进行了版本之间的写法对比。这一点和各技术栈的官方文档有较大的不同，官方文档更适合作为一本工具书，方便在需要的时候对API 进行检索查询。
目前笔者所带领的前端团队已经全员使用TypeScript和Vue 3进行日常的开发工作，团队成员的学习过程都非常顺利，各位读者可放心阅读。笔者推荐按照本书章节的顺序进行学习，从前端工程化开始到TypeScript语言的学习，再到使用TypeScript开发Vue 3项目，这是一个循序渐进的学习过程。
Vue.js是一个 渐进式的框架，它可以只用最基础的组件来开发一个小项目，也可以引入相关生态组合成一个大项目（如Vue Router、 Vuex、 Pinia等）。本书和Vue.js 框架一样，也是一个渐进式的教程，对于本身已经有一定Vue.js基础的开发者来说，也可以在遇到具体问题的时候，只阅读对应部分的内容。
在学习的过程中，笔者推荐将已有的其他技术栈项目使用Vue 3重新编写，使其可以复刻原来的功能。比如一个使用jQuery或者是Vue 2编写的活动页面或小工具，用Vue 3重新实现一遍，看能否还原出原来的功能。如果能够成功实现，则说明已经掌握Vue 3的使用技巧了。在学习的过程中如有什么问题想与笔者交流，可以给笔者发送邮件，邮箱是chengpeiquan@chengpeiquan.com。由于水平所限，书中难免有疏漏之处，请广大读者不吝赐教。
笔者
2022.11.30
程沛权，养了三只猫的程序员，热爱烹饪、设计和音乐。在前端领域有多年的开发经验和一线开发团队管理经验，曾在网易和UC工作超过7年，在网易工作期间担任内训讲师，有过近百篇的项目经验与教程分享，开展过多次跨部门业务培训课，为多个团队新成员带来有效的快速成长。
前言
第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.
书单推荐
