2024肥晨赠书活动第三期：《前端工程化：基于Vue.js 3.0的设计与实践》，前端工程化包含哪些

文章目录

内容介绍作者介绍《前端工程化：基于`Vue.js 3.0`的设计与实践》 关于文章内容文章介绍《前端工程化：基于Vue.js 3.0的设计与实践》 书籍快速查看结论

内容简介

本书以Vue.js 3.0版本为核心技术栈，根据作者多年的前端开发和一线团队管理经验，讲解了“前端工程化”和TypeScript知识要点。 Vue 3 工程师用来运行项目的实现顺序被组织成章节，以帮助读者逐步完成前端工程和Vue 3 开发。从前端工程开始，学习TypeScript语言，并使用TypeScript开发Vue 3项目的循序渐进的学习过程，将提高读者在前端工程领域的实践能力。

本书大部分知识点都结合了易于理解和可实现的代码案例，读者可以扫描封底二维码获取本书包含的源代码和其他资源。本书适合计算机前端开发工程师、前端技术团队的管理者以及相关专业的大学生。

作者简介

程培全是一名程序员，养了三只猫，喜欢烹饪、设计和音乐。拥有多年前端领域开发经验和一线开发团队管理经验，曾在网易、UC工作七年多，并担任内部培训讲师。交付了近百个项目经验和教程，以及许多跨项目的业务培训课程，有效快速地培养新团队成员。

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

接下来推荐前端开发方面的书籍。具体信息如下。另外，如果在文末评论区评论“我要前端工程：基于Vue.js 3.0的设计与实践”，两人将参与抽奖，赢取价值：010的纸质版—— 30000。截止日期：2024 年7 月4 日。

本书作者是前端领域的资深工程师，从工程角度讲解了前端开发流程。

《前端工程化：基于Vue.js 3.0的设计与实践》 获取传送门：https://item.jd.com/13952512.html 我觉得这本书非常好，特别是对于前端开发者来说，值得拥有和学习。

文章目录

前言

第一章前端工程概述/

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.2 Vue与工程的关系/

1.3.3 选择Vue入口工程的理由/

1.4 现代发展理念/

1.4.1MPA 和SPA/

1.4.2CSR和SSR/

1.4.3 预渲染和SSG/

1.4.4ISR 和DPR/

1.5 工程不限于前端/

1.5.1 服务端开发/

1.5.2 应用程序开发/

1.5.3 桌面程序开发/

1.5.4 应用脚本开发/

1.6 工程工艺实践/

1.7 工程工件Node.js/

1.7.1Node.js/

1.7.2 运行时/

1.7.3 节点与浏览器的区别/

1.8 工程构建工具/

1.8.1 为什么使用构建工具/

1.8.2Webpack/

1.8.3字节/

1.8.4 两者的区别/

1.8.5 开发环境和生产环境/

第二章工程准备/

2.1 命令行工具/

2.1.1Windows/

2.1.2macOS/

2.2 安装节点环境/

2.2.1 下载并安装Node/

2.2.2 版本之间的差异/

2.3 基础节点项目/

2.3.1 初始化项目/

2.3.2 理解package.json/

2.3.3 项目名称规则/

2.3.4 语义版本号管理/

2.3.5 脚本命令配置/

2.3.6 你好节点/

2.4 学习模块化设计/

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

2.4.2 如何实现模块化/

2.4.3 使用CommonJS/设计模块

2.4.4 使用ES模块设计模块/

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.2你好打字稿/

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.2你好Vue 3/

4.3 使用Vite/创建项目

4.3.1创建-vite/

4.3.2创建-vue/

4.3.3 创建预设/

4.3.4 管理项目配置/

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

4.4.1 CLI与Vite/的区别

4.4.2 CLI 脚手架更新/

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

4.4.4 管理项目配置/

4.5 调整TypeScript 设置/

4.6 增加合作规范/

4.6.1 编辑器设置/

4.6.2 更美观/

4.6.3ESLint/

4.7 安装VSCode/

4.8 添加VSCode插件/

4.8.1 中文（简体）/

4.8.2掌侧/

4.8.3Vue VSCode 片段/

4.8.4 自动关闭标签/

4.8.5 标签自动重命名/

4.8.6VSCode编辑器配置/

4.8.7VSCode 更漂亮/

4.8.8VSCode 的ESLint/

4.8.9 其他插件/

4.9 初始化项目/

4.9.1 入口文件/

4.9.2 检查Vue 2入口文件/

4.9.3 了解Vue 3/入口文件

4.10Vue开发工具/

第5 章创建单个组件/

5.1 新设置功能/

5.1.1 设置/的含义

5.1.2 如何使用设置参数/

5.1.3 DefineComponent/的作用

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：参考/

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.1 观看/

5.9.2watch效果/

5.9.3watchPostEffect/

5.9.4watch同步效果/

5.10 数据计算/

5.10.1 使用变化/

5.10.2 类型声明/

5.10.3 优点对比及注意事项/

5.10.4 使用setter/

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 Routing/的目录结构

6.2 将路由引入到您的项目中

6.2.1 Vue 2 路由回顾/

6.2.2 理解Vue 3/路由

6.3 路由树配置/

6.3.1 基本格式/

6.3.2 公共基础路径/

6.3.3 1 级路由/

6.3.4 多级路由/

6.3.5 路由延迟加载/

6.4 渲染路由/

6.5 使用routes/获取路由信息

6.6 使用路由器/处理路由

6.7 使用router-link标签进行跳转/

6.7.1 基本跳转/

6.7.2 带参数跳转/

6.7.3 不生成标签/

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

6.9 设置路由元素信息/

6.10 路由重定向/

6.10.1 基本用法/

6.10.2 业务场景/

6.10.3 设置为路径/

6.10.4 设置为root/

6.10.5配置为功能/

6.11 配置路由别名/

6.12404路由页面设置/

6.13 导航卫士/

6.13.1 Hook应用场景/

6.13.2 路由全局钩子/

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

6.13.4 Routing/中的独占钩子

6.13.5 在组件内单独使用/

6.14 路由监听/

6.14.1 观看/

6.14.2watch效果/

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 package/生成类型声明

7.6.5 添加文档/

7.6.6 发布npm 包/

第8章组件之间的通信/

8.1 亲子组件通信/

8.2 传播/发射/

8.2.1 道具分配/

8.2.2 接收道具/

8.2.3 配置props/类型限制

8.2.4 配置Optional和props/默认值

8.2.5 使用道具/

8.2.6 传递非props 属性/

8.2.7 检索非属性属性/

8.2.8 发射绑定/

8.2.9 接听和拨打电话/

8.2.10 对收货进行一些验证。

8.3v型号/发光/

8.3.1 v-model/的绑定

8.3.2 配置输出/

8.4参考/发射/

8.4.1 父组件操作子组件/

8.4.2 子组件通知父组件/

8.5 祖父和Sun组件通信/

8.6 提供/注入/

8.6.1 开始提供/

8.6.2 接受注射/

8.7 兄弟组件通讯/

8.8 全局组件通信/

8.9事件总线/

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.10 反应状态/

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 理解Vue3中的Vuex/

8.11.5Vuex设置/

8.12 松果/

第9 章全局状态管理/

9.1 关于皮尼亚/

9.2 安装和激活/

9.3 状态树结构/

9.4 创建商店/

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

9.4.2 形式2：接收参数/

9.5 行政状态/

9.5.1 添加状态到存储

9.5.2 手动指定数据类型/

9.5.3 获取和更新状态/

9.5.4 批量更新状态/

9.5.5 完整更新状态/

9.5.6 复位状态/

9.5.7 订阅状态/

9.6 管理吸气剂/

9.6.1 添加getter/到store

9.6.2 获取和更新getter/

9.7 管理行动/

9.7.1 添加操作到存储

9.7.2 调用操作/

9.8 添加多个商店

9.8.1 目录结构建议/

9.8.2 与Vue 组件/TypeScript 文件/一起使用

9.8.3 存储相互引用/

9.9 使用专用插件/

9.9.1 如何搜索插件/

9.9.2 如何使用插件/

第10章高效开发/

10.1 脚本设置/

10.1.1 新功能背景/

10.1.2 全局编译器宏/

10.1.3 简化模板操作/

10.1.4 更改接收道具的方式/

10.1.5 更改呼叫/接收方式

10.1.6 更改属性接收方法/

10.1.7 更改时隙接收方法/

10.1.8ref 通信方式变更/

10.1.9 顶级待机支持/

10.2 命名技巧/

10.2.1 文件命名技巧/

10.2.2 代码命名技巧/

附录：与本书相关的一些官方网站和文档的地址/

文章简介

Vue 3.0将于2020年9月中旬至2022年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、Ponia 等）。与Vue.js 框架一样，本书也是一本“渐进式”教程，这意味着已经具备特定Vue.js 基础的开发人员可能会发现，如果遇到特定问题，只阅读相应部分会很有帮助。

作者建议使用Vue 3重写其他现有的技术栈项目，以便您在学习过程中可以重现原始功能。例如，如果您使用jQuery 或Vue 2 创建了活动页面或小工具，请尝试使用Vue 3 重新实现它，看看是否可以恢复原始功能。如果你成功实现了它，你就已经掌握了使用Vue 3的技巧。

《前端工程化：基于Vue.js 3.0的设计与实践》全书速览

《前端工程化：基于Vue.js 3.0的设计与实践》 获取传送门：https://item.jd.com/13952512.html 个人认为这是一本非常好的书，值得学习，尤其是对于前端开发者来说。

结束语

虽然前端生态越来越成熟，但配套的书籍和资料仍然相对缺乏。这本书作者结合了大前端，更容易理解，更适合。值得前端初学者阅读。

本书系统地介绍了前端工程开发中的各种技术，以流行的框架Vue.js 3.0作为技术栈，从知识讲解到实际应用和解决实际问题，引导读者掌握基于Vue.js 3.0的技术。前端开发技术。

本书带领读者从基本的前端工程概念到动手实践，学习流行框架Vue.js的新版本3.0。这不仅仅是学习知识。前端学生的必读之作，他们不仅了解框架，而且了解在哪里以及如何使用它们。

本书深入浅出地介绍了前端工程的演变和变化及其实践，从基本切入点到框架，以及对当今流行技术栈组合的科普和应用场景分析。这不仅值得终端工程师阅读，也值得产品经理阅读。产品经理了解前端技术开发带来的好处，使他们设计的产品更具竞争力。

《前端工程化：基于Vue.js 3.0的设计与实践》不仅是一次知识的洗礼，更是一次心灵的成长。推荐给任何在技术海洋中航行的人。愿它成为您旅途中最有价值的指南针。

大家好，我是飞辰。

关注我，每天分享前端学习资源、技术变革、生存法则、见解和机会。

#2024飞尘捐书活动第三阶段以上相关内容来源：《前端工程化：基于Vue.js 3.0的设计与实践》 仅供参考。相关信息请参见官方公告。