随着移动互联时代到万物互联超级终端时代的变化，开发者也从移动互联开发转型到万物互联时代的超级终端开发，本书全面讲解大前端时代的核心技术栈和核心开发语言，并通过一本书融汇贯通，本书是普通前端开发者通向大前端架构师的桥梁，本书中涉及大量案例和企业一线实践操作经验，是前端开发者转型为大前端架构师的必备书籍。
本书共4篇15个章。第一篇为基础篇（第1~6章），主要介绍大前端的发展趋势，大前端的基础开发语言(ES6、TypeScript、Dart)，大前端构建工具和前端工程化体系，以及大前端的包管理和如何搭建一个企业级的脚手架工具。从第二篇至第四篇（第7~15章），分别介绍Vue 3、React和Flutter 2三大主流框架，帮助开发者学习和掌握最新的框架用法和生态体系。
学习本书内容，需要具备一定的HTML、CSS、JS基础知识，本书可以作为前端开发者提升技能的工具书也可以作为普通开发者从网页开发过渡到万物互联开发的书籍。

第1篇基础篇
第1章大前端发展趋势
1.1大前端的发展过程
1.2Node.js引领JavaScript进入全栈时代
1.3小程序、轻应用开启前端新模式
1.4Flutter引领跨平台开发
1.5华为ArkUI探索物联网全场景开发
1.6大前端的革命与未来
第2章ECMAScript 6
2.1ECMAScript 6介绍
2.2Babel转码器
2.3let和const
2.4解构赋值
2.5字符串的扩展
2.5.1字符串新增方法
2.5.2字符串模板
2.6数组的扩展
2.6.1扩展运算符
2.6.2Array.from()
2.6.3Array.of()
2.6.4Array.find() 和 Array.findIndex()
2.6.5Array.includes()
2.6.6Array.copyWithin()
2.6.7Array.entries().keys().values()
2.6.8Array.fill()
2.6.9flat()、flatMap()
2.7对象的扩展
2.7.1对象字面量
2.7.2属性名表达式
2.7.3super关键字
2.7.4对象的扩展运算符
2.8Symbol
2.9Set和Map数据结构
2.9.1Map对象
2.9.2Set 对象
2.10Proxy
2.11Reflect
2.11.1Reflect()静态方法
2.11.2Reflect与Proxy组合使用
2.12异步编程
2.12.1Promise
2.12.2Generator
2.12.3async/await
2.13类的用法
2.13.1类的定义
2.13.2类的构造函数与实例
2.13.3类的属性和方法
2.13.4类的继承
2.14模块化Module
2.14.1ECMAScript 6的模块化特点
2.14.2模块化开发的优缺点
2.14.3模块的定义
2.14.4模块的导出
2.14.5模块的导入
第3章前端构建工具
3.1前端构建工具介绍
3.1.1为什么需要构建工具
3.1.2构建工具的功能需求
3.1.3前端构建工具演变
3.1.4NPM与Yarn、PNPM
3.2Webpack
3.2.1Webpack介绍
3.2.2Webpack安装与配置
3.2.3Webpack基础
3.2.4Webpack进阶
3.3Rollup
3.3.1Rollup介绍
3.3.2Rollup安装与配置
3.3.3Rollup基础
3.4ESBuild
3.5Vite
3.5.1Vite介绍
3.5.2Vite基本使用
3.5.3Vite原理
第4章TypeScript
4.1TypeScript介绍
4.2TypeScript安装与配置
4.3TypeScript基础数据类型
4.4TypeScript高级数据类型
4.4.1泛型
4.4.2交叉类型
4.4.3联合类型
4.5TypeScript面向对象特性
4.5.1类
4.5.2接口
4.6TypeScript装饰器
4.6.1属性装饰器
4.6.2方法装饰器
4.6.3参数装饰器
4.6.4类装饰器
4.7TypeScript模块与命名空间
4.7.1模块
4.7.2命名空间
第5章Dart语言
5.1Dart语言介绍
5.2安装与配置
5.3第1个Dart程序
5.4变量与常量
5.5内置类型
5.6函数
5.7运算符
5.8分支与循环
5.9异常处理
5.10面向对象编程
5.10.1类与对象
5.10.2类的继承
5.10.3抽象类
5.10.4多态
5.10.5隐式接口
5.10.6扩展类
5.11泛型
5.12异步支持
5.12.1Future对象
5.12.2async函数与await表达式
5.13库和库包
5.13.1库
5.13.2自定义库包
5.13.3系统库
5.13.4第三方库
第6章包管理与脚手架
6.1MonoRepo包管理
6.1.1单仓与多仓库管理
6.1.2Lerna包管理工具介绍
6.1.3Lerna包组织结构
6.1.4Lerna安装与配置
6.1.5Lerna操作流程演示
6.1.6Yarn Workspace
6.1.7Yarn Workspace与Lerna
6.2设计一个企业级脚手架工具
6.2.1脚手架作用
6.2.2常见的脚手架工具
6.2.3脚手架思路
6.2.4第三方依赖介绍
6.2.5脚手架架构图
6.2.6创建脚手架工程与测试发布
6.2.7脚手架命令行开发
第2篇Vue 3框架篇
第7章Vue 3语法基础
7.1Vue 3框架介绍
7.1.1Vue 3框架核心思想
7.1.2Vue 3框架的新特征
7.2Vue 3开发环境搭建
7.2.1Visual Code安装与配置
7.2.2安装Vue DevTools
7.2.3编写第1个Vue 3程序
7.3Vue 3项目搭建方法
7.3.1手动搭建Vue 3项目
7.3.2通过脚手架工具搭建Vue 3项目
7.3.3Vue 3项目目录结构
7.4Vue 3应用创建
7.4.1createApp()方法
7.4.2数据属性和方法
7.4.3计算属性和监听器
7.4.4模板和render()函数
7.5Vue 3模板语法
7.5.1插值表达式
7.5.2什么是指令
7.5.3数据绑定指令
7.5.4class与style绑定
7.5.5条件指令
7.5.6循环指令
7.5.7事件绑定指令
7.5.8表单绑定指令
7.5.9案例： 省市区多级联动效果
7.6Vue 3组件开发
7.6.1组件定义
7.6.2组件的命名规则
7.6.3组件的结构
7.6.4组件的接口属性
7.6.5组件的生命周期方法
7.6.6组件的插槽
7.6.7提供/注入模式
7.6.8动态组件与异步组件
7.6.9混入
7.7响应性API
7.7.1setup()
7.7.2ref()
7.7.3reactive()
7.7.4toRef
7.7.5toRefs()
7.7.6computed()
7.7.7watch()
7.7.8watchEffect
7.7.9setup()生命周期函数
7.7.10单页面组件
7.7.11Provide与Inject
7.8Vue 3过渡和动画
7.8.1过渡与动画
7.8.2Transition和TransitionGroup组件
7.8.3进入过渡与离开过渡
7.8.4案例： 飞到购物车动画
7.9Vue 3复用与组合
7.9.1自定义指令
7.9.2Teleport
7.9.3插件
7.10Vue 3路由
7.10.1路由入门
7.10.2路由参数传递
7.10.3嵌套模式路由
7.10.4命名视图
7.10.5路由守卫
7.10.6数据获取
7.11Vue 3状态管理(Vuex)
7.11.1状态管理模式
7.11.2Vuex和全局变量的概念区别
7.11.3Vuex中的5个

前言随着Web技术的迅猛发展，以Electron、
ReactNative、ArkUI等为代表的新的混合式开发模式日趋
成为与Qt、Android、iOS原生开发并肩的开发模式之一。
随着WebVR、WebAR、WebAssembly等一系列技术的日趋成
熟，原本前端之间的隔阂会逐渐消失，逐步进入大前端开发
的时代。近几年，随着新硬件和新商业模式的兴起，传统的
前端技术得到了新的应用和发展空间，特别是以HTML5和新
一代JavaScript语言为代表的大前端技术正在渗透到技术
的各个环节，这也对前端工程师提出了新的要求并带来了新
的机遇。HTML5和新一代JavaScript语言以其自身的广泛适
配性和良好的运行效率已经不简单地只作为网页开发专用技
术了，它们可以很好地和其他底层语言进行调用和连接，已
经可以广泛适用于万物互联的场景应用开发。如华为公司在
2021年推出了自己的下一代物联网操作系统(HarmonyOS)后
，推出了自己的操作系统应用开发框架ArkUI，该框架就是
基于JavaScript语言实现的一套跨终端的应用开发框架，
它通过前端的JavaScript语言与底层的C++语言进行相互高
效调用，实现了一套代码多端运行的目标。2021年，全球
第一社交平台Facebook正式更名为Meta，该名字源自
Metaverse，中文翻译为元宇宙，意思是新型社会体系的数
字生活空间。元宇宙是整合多种新技术产生的下一代三维化
的互联网应用形态。它基于扩展现实技术和数字孪生技术实
现从现实到虚拟的空间拓展； 借助人工智能和物联网实现
虚拟人、自然人和机器人的融合共生； 借助区块链、Web
3.0、数字藏品/NFT等实现经济价值的增值。这一新的模式
必将带来重大的技术突破和新技术的创新，元宇宙时代的大
前端开发将是一个突破传统前端局限而面向一体化的时代。
在新模式、新技术和新硬件的加持下，大前端未来可能进入
下一个领域——元宇宙前端。可以看到目前WebVR、WebAR
、WebGL等新的Web视觉和Web 3D技术正在兴起，未来必定
成为前端的主流技术。
本书特色
本书通过介绍目前广为流行的三大前端框架及生态体
系，带领读者全面掌握从移动互联应用开发到万物互联应用
开发技术和实战技巧。本书共4篇15章，由浅入深，带领读
者从学习移动互联开发(Vue、React)框架入手再到物联网
开发(Flutter)框架开发。本书第1篇先从大前端主流开发
语言(ECMAScript 6、TypeScript、Dart)讲起，在基础篇
中全面介绍大前端打包构建流程及工程化体系。再从基础、
原理和实战的三个纬度出发全面介绍Vue、React、Flutter
三大框架的基础语法、实现原理、源码编译、核心算法及企
业级组件库项目搭建。本书提供了大量的代码示例，读者可
以通过这些例子理解知识点，也可以直接在开发实战中稍加
修改而应用这些代码。另外，提供了书中所有案例所涉及的
源码，以便于读者高效地学习。
本书内容
本书4篇15章的主要内容如下：第1篇，开发基础篇(第
1~6章)。第1章介绍大前端的发展过程和发展趋势； 第2章
介绍ECMAScript 6语法及用法； 第3章介绍前端构建工具
，详细介绍Webpack、Rollup、ESBuild和Vite的原理及使
用； 第4章介绍TypeScript的语法及用法； 第5章介绍
Dart的语法及用法； 第6章介绍MonoRepo管理模式及如何
设计一个企业级脚手架工具。第2篇，Vue 3框架篇(第7~9
章)。第7章全面介绍Vue 3框架语法和使用； 第8章介绍
Vue 3框架原理、Vue 3源码下载和编译、Vue 3的双向数据
绑定和Vue 3 Diff算法原理； 第9章介绍如何构建一个基
于Vue 3的组件库。第3篇，React框架篇(第10~12章)。第
10章介绍React框架语法和使用； 第11章介绍React框架原
理、React源码下载和源码测试； 第12章介绍如何构建一
个基于React的组件库。
第4篇，Flutter 2框架篇(第13~15章)。第13章介绍
Flutter 2的语法和使用； 第14章介绍Flutter Web和桌
面应用开发； 第15章介绍Flutter插件库开发与发布。
本书读者对象
学习本书内容需要具备一定的HTML、CSS、JS基础知识
，本书可以作为前端开发者提升技能的工具书，也可以作为
前端开发者搭建企业级前端产品体系的参考书，还可以作为
普通开发者从网页开发过渡到万物互联开发的参考书。恳请
读者批评指正。
致谢感谢清华大学出版社赵佳霓编辑在写作本书过程
中提出的宝贵意见，以及我的家人在写作过程中提供的支持
与帮助。
徐礼文2022年8月
本书源码下载

本书通过介绍目前最流行的三大前端框架及生态体系，带领读者全面掌握从移动互联应用开发到万物互联应用开发技术和实战技巧，本书也可以作为前端开发者搭建企业级前端产品体系的参考书。书中提供了大量的代码示例，读者可以通过这些例子理解知识点，也可以直接在开发实战中稍加修改应用这些代码。另外，提供书中所有案例所涉及的源代码，以便于读者高效的学习。

★在过去的几十年里，互联网经历了从PC时代到
移动互联时代，如今进入了万物互联时代，前端技术一
直伴随着时代在发展和进步。2021年是元宇宙的元年
，我们或将进入下一个互联网时代，它是集AR、VR、
5G、云计算、区块链等软硬件技术构建的一个去中心化
的、不受单一控制的、永续的、不会终止的互联网世界
。在下一代互联网世界里，面向用户的前端技术更加值
得关注，甚至变得非常关键。《大前端三剑客——
Vue+React+Flutter》通过系统讲解三大前端框架及生
态体系，带领读者全面掌握从移动互联应用开发到万物
互联应用开发，既有开发技术也有实战技巧，是一本非
常值得前端开发者参考的书，我强烈推荐本书。
——武朝尉，北京市经济信息中心教授级高级工
程师
★从广义上说，直接与用户交互的UI都应该属于
前端，例如Web、桌面等，而实现前端应用会涉及各种
技术。《大前端三剑客——Vue+React+Flutter》一书
全面介绍了主流的前端技术，例如JavaScript、
TypeScript、Vue 3、React等，这些可以轻松实现
Web前端，而另一项重要技术Flutter，可以使用Dart
语言同时开发移动、Web和桌面等应用。读者通过对本
书的学习，可以将这些前端技术融会贯通，让自己成为
大前端的高手。
——李宁，畅销书作者、UnityMarvel创始人
★随着应用软件形态的扩张和发展，各种前端技
术的融合越来越紧密。对于前端开发人员来讲，拥有一
套完整的大前端技术栈是必不可少的。徐礼文老师融合
了多年的项目和开发经验，将Vue、React和Flutter等
主流技术的核心知识点凝结在本书中。相信这本书将成
为前端开发者不可多得的枕边书。
——董昱，畅销书作者、华为开发者专家
★除Vue 3、React 等主流框架必备外，在当今到
处都是降本增效的大前提下，跨端技术是目前的重点关
注方向之一。Flutter 近年来在国内关注度越来越高
，很多大厂都有相关实践，《大前端三剑客——Vue
+React+Flutter》 包含了前端开发者上手 Flutter
的必备干货。无论读者是在初级学习阶段、还是渴望扩
展技术栈，本书都值得前端开发者的入手。
——白国帅，Bilibili前端高级技术专家
★近几年，前端技术日新月异，传统的前端技术
也逐渐延伸到全栈和移动端及桌面等领域。徐礼文老师
的这本《大前端三剑客——Vue+React+Flutter》系统
地介绍了目前前端领域最流行的三大框架，以及如何使
用这些框架构建企业级组件库，是一本前端开发者可以
借鉴和参考的书，我强烈推荐前端开发者阅读和学习。
——王伟，拼多多前端高级技术专家

第3章
前端构建工具
本章全面介绍前端开发中最流行和最常见的模块化构建工具，包括Webpack、Rollup、Lerna、Vite工具的原理和开发实践。通过本章读者可以全面掌握各种构建工具的使用场景、优缺点和用法。
3.1前端构建工具介绍
前端构建工具能帮助前端开发人员把编写的Less、SASS等代码编译成原生CSS，也可以将多个JavaScript文件合并及压缩成一个JavaScript文件，对前端不同的资源文件进行打包，它的作用就是通过将代码编译、压缩、合并等操作，来减少代码体积，减少网络请求，方便在服务器上运行。
3.1.1为什么需要构建工具
随着前端开发项目的规模越来越大，业务模块和代码模块也越来越复杂，因此在项目开发过程中需要高效的构建工具帮助开发者解决项目中的痛点问题。下面列举几个企业项目开发中的痛点问题：
(1) 在大型的前端项目中，浏览器端的模块化存在两个主要问题，第一是效率问题，精细的模块化(更多的JS文件)带来大量的网络请求，从而降低了页面访问效率； 第二是兼容性问题，浏览器端不支持CommonJS模块化，而很多第三方库使用了CommonJS模块化。
(2) 在大型前端项目开发中，需要考虑很多非业务问题，如执行效率、兼容性、代码的可维护性、可拓展性，团队协作、测试等工程问题。
(3) 在浏览器端，开发环境和线上环境的侧重点完全不一样。
开发环境：
■ 模块划分得越精细越好；
■ 不需要考虑兼容性问题；
■ 支持多种模块化标准；
■ 支持NPM和其他包管理器下载的模块；
■ 能解决其他工程化的问题。
线上环境：
■ 文件越少越好，减少网络请求；
■ 文件体积越小越好，传输速度快；
■ 兼容所有浏览器；
■ 代码内容越乱越好；
■ 执行效率越高越好。
开发环境和线上环境面临的情况有较大差异，因此需要一个工具能够让开发者专心地书写开发环境的代码，然后利用这个工具将开发时编写的所有代码转化为运行时所需要的资源文件。这样的工具称为构建工具，如图31所示。
图31构建工具的作用
3.1.2构建工具的功能需求
前端构建工具的本质是要解决前端整体资源文件的模块化，并不单指JS模块化，随着JavaScript在企业中大规模应用，复杂的前端项目越来越需要通过构建工具来帮助实现以下几方面的功能要求。 1. 模块打包器(Module Bundler)
(1) 解决模块JS打包问题。
(2) 可以将零散的JS代码整合到一个JS文件中。
2. 模块加载器(Loader)
(1) 对于存在兼容问题的代码，可以通过引入对应的解析编译模块进行编译。
(2) 对各种代码进行编译前的预处理。
3. 代码拆分(Code Splitting)
(1) 将应用中的代码按需求进行打包，避免因将所有的代码打包成一个文件而使文件过大的问题。
(2) 可以将应用加载初期所需代码打包在一起，而其余的代码在后续执行中按需加载，实现增量加载或渐进加载。
(3) 可以避免出现文件过大或文件太碎的问题。
4. 支持不同类型的资源模块
解决前端各种静态资源的打包。
3.1.3前端构建工具演变
随着前端开发规模的增大，也不断推动前端构建工具链的向前发展，这里可以形象地总结为了以下几个阶段： 石器时代、青铜时代、白银时代、黄金时代。
石器时代(纯手工)： 需要纯手工打包构建、预览文件、刷新文件； 代表是Ant脚本+YUI Compressor，如图32所示，由Yahoo所发展的一套JavaScript与CSS压缩工具，可以协助网页开发者生成最小化的网页。
图32YUI Compressor
青铜时代(脚本式)： 通过编写bash或Node.js任务脚本，实现命令式的热更新(HMR)和自动打包，代表为Grunt、Gulp，如图33所示。
图33Grunt和Gulp
白银时代(Bundle)： 通过集成式构建工具完成热更新(HMR)，处理兼容和编译打包。打包代表为Babel、Webpack、Rollup、Parcel，如图34所示。
图34白银时代的打包工具代表
黄金时代(Bundleless)： 通过浏览器解析原生ESM模块实现Bundleless的开发预览及热更新(HMR)，不打包发布或采用Webpack等集成式工具兼容打包，以保证兼容性，代表为ESBuild、Snowpack、Vite，如图35所示。
图35黄金时代的打包工具代表
说明： ESBuild是采用Go语言编写的bundler，对标tsc和Babel，只负责ts和js文件的转换。
3.1.4NPM与Yarn、PNPM
NPM是随同Node一起安装的包管理工具，用于Node模块管理(包括安装、卸载、管理依赖等)。
Yarn是由Facebook、Google、Exponent和Tilde联合推出的一个新的JS包管理工具，用来代替NPM及其他模块管理器现有的工作流程，并且保持了对NPM代理的兼容性。它在与现有工作流程功能相同的情况下保证了操作更快、更安全和更可靠。
PNPM是一个速度快、磁盘空间高效的软件包管理器。PNPM使用内容可寻址文件系统将所有模块目录中的所有文法