《Vue3.x+TypeScript实践指南》

　　　转眼回长沙快2年了，图书本在去年就已经完稿，因为疫情，一直耽搁了，直到这个月才出版！疫情之下，众生皆苦！感觉每天都是吃饭、睡觉、上班、做核酸！

　　图书介绍

　　为了紧跟技术潮流，该书聚焦于当下火的Vue3和TypeScript及其相关技术，这些知识是面试Vue方向前端岗位时必须掌握的内容。该书站在初学者的视角，将理论和实践相结合，通过循序渐进、由浅入深的方式来一一讲解Vue3的技术体系，让读者在学习的过程中不断提升前端开发水平。阅读该书仅需要有CSS、HTML、JS基础，即使你是一个Vue初学者，阅读该书也不会有任何困难。书中提供了丰富的示例来帮助读者将理论知识运用于实践，让读者学习起来不会感到枯燥乏味。相信该书能让读者在短时间内快速掌握TypeScript和Vue3的相关知识，并能够将所学知识运用到实际应用当中去。
　　如果你是Vue初学者，建议你按照章节顺序从头到尾阅读，如果你已经有了一定的基础，可以挑选自己感兴趣的章节进行阅读。
　　《Vue3.x TypeScript实践指南》适合vue3初学者及所有Web开发从业人员，也适合作为高等院校和培训学校计算机专业课程的教学参考书。

　　本书分为10章，第1～2章是讲解TypeScript基础和常用语法，第3章是对Vue3的基础知识点进行介绍，第4章是对Vue3中新增的Composition API进行详细的介绍，第5章是介绍Vue3中新增的组件和API，第6章是介绍vue-router和vuex的相关知识，第7章是介绍Vue3的常用UI框架，第8章是对Webpack5进行介绍，第9章是通过一个大屏展示的实战项目来将书中的内容应用到实践中，第10章是讲解Vue前端岗位的面试求职，而我们学习技术的最终目的就是为了就业。

　　其它图书

　　本书提供PPT课件！

　　购买地址

　　　　京东

　　　　当当

　　　　天猫

　　图书目录

简介

前言

目录

第 1 章

◄ TypeScript基础 ►

1.1 初识 TypeScript

1.1.1 TypeScript的介绍

1.1.2 TypeScript的特点

1.2 安装 TypeScript

1.2.1 安装node.js

1.2.2 npm

1.2.3 npm install --save 、--save-dev 、-D、-S、-g 的区别

1.2.4 yarn

1.2.5 全局安装 TypeScript

1.3 第一个 TypeScript 程序

1.3.1 ts和js的区别

1.3.2 编写TS程序

1.3.3 手动编译代码

1.3.4 VS Code自动编译

1.3.5 类型注解

1.3.6 接口

1.3.7 类

1.4 使用Webpack打包TypeScript

1.5 VS Code

1.5.1 忽略node_module目录

1.5.2 安装VS Code插件

1.5.3 打开并运行webpack项目

1.5.4 VS Code配置

1.5.5 搜索

第 2 章

◄ TypeScript常用语法 ►

2.1 基础类型

2.1.1 布尔值

2.1.2 数字

2.1.3 字符串

2.1.4 undefined 和 null

2.1.5 数组

2.1.6 元组 Tuple

2.1.7 枚举

2.1.8 any

2.1.9 void

2.1.10 Never

2.1.11 Object

2.1.12 联合类型

2.1.13 类型断言

2.1.14 类型推断

2.2 接口

2.2.1 接口初探

2.2.2 可选属性 ?

2.2.3 只读属性readonly

2.2.4 函数类型

2.2.5 类类型

2.3 类

2.3.1 基本示例

2.3.2 继承

2.3.3 公共，私有与受保护的修饰符

2.3.4 readonly 修饰符

2.3.5 存取器

2.3.6 静态属性

2.3.7 抽象类

2.4 函数

2.4.1 基本示例

2.4.2 函数类型

2.4.3 可选参数和默认参数

2.4.4 剩余参数

2.4.5 函数重载

2.5 泛型

2.5.1 泛型引入

2.5.2 使用函数泛型

2.5.3 多个泛型参数的函数

2.5.4 泛型接口

2.5.5 泛型类

2.5.6 泛型约束

2.6 声明文件和内置对象

2.6.1 声明文件

2.6.2 内置对象

第 3 章

◄ Vue3快速上手 ►

3.1 Vue介绍

3.2 认识Vue3

3.3 vue-devtools

3.3.1 官网编译安装

3.3.2 极简插件在线安装

3.4 创建vue3项目

3.4.1 使用 vue-cli 创建

3.4.2 vue3目录结构分析

3.4.3 使用 vite 创建

3.5 Vue常用指令介绍

3.5.1 v-text

3.5.2 v-html指令

3.5.3 v-model和v-bind

3.5.4 v-once

3.5.5 v-pre

3.5.6 v-cloak

3.5.7 v-for和key属性

3.5.8 v-on

3.5.9 多事件处理

3.5.10 事件修饰符

3.5.11 键盘修饰符

3.5 在Vue中使用样式

3.5.1 使用class样式

3.5.2 使用内联样式

3.6 条件判断

3.6.1 v-if

3.6.2 v-if v-else

3.6.3 v-else-if

3.6.4 在 <template> 元素上使用 v-if 条件渲染分组

3.6.5 v-show

3.6.6 v-if vs v-show

3.7 模板中使用Javascript表达式

3.8 计算属性

3.9 watch

3.9.1 常规用法

3.9.2 立即执行(immediate和handler)

3.9.3 深度监听

3.9.4 computed和watch的区别

3.10 自定义组件使用v-model实现双向数据绑定

3.11 自定义组件slots

3.12 非Prop的Attribute继承（Vue3）

3.12.1 Attribute 继承

3.12.2 禁用Attribute继承

3.13 $ref 操作DOM

3.14 表单数据双向绑定

3.15 组件传值

3.15.1 父组件向子组件传值

3.15.2 子组件向父组件传值

3.16 $root和$prarent的使用

3.17 this.$nextTick

3.18 axios介绍

3.19 跨域请求

3.20 extend、mixin和extends

第 4 章

◄  Composition API ►

4.1 Vue3集成TypeScript

4.2 setup

4.2.1 setup细节

4.2.2 props和attrs的区别

4.3 ref

4.4 reactive

4.5 reactive与ref 的区别

4.6 Vue2与Vue3响应式比较

4.6.1 vue2的响应式

4.6.2 vue3的响应式

4.7计算属性与监视

4.8 组件生命周期

4.9 自定义hook函数

4.10 toRefs

4.11 ref获取元素

4.12 shallowReactive 与 shallowRef

4.13 readonly 与 shallowReadonly

4.14 toRaw 与 markRaw

4.15 toRef

4.16 unRef

4.17 customRef

4.18 provide 与 inject

4.19 响应式数据的判断

4.20 Option API VS Composition API

4.20.1 Option API的问题

4.20.2 使用Compisition API

第 5 章

◄  Vue3新组件和新API ►

5.1 Fragment(片断)

5.2 Teleport(瞬移)

5.3 Suspense(不确定的)

5.4 全新的全局API

5.4.1 createApp()

5.4.2 Vue3使用Proxy 优先defineProperty()

5.4.3 defineComponent和defineAsyncComponent

5.4.4 nextTick()

5.5 将原来的全局API转移到应用对象

5.6 模板语法变化

5.6.1 v-model

5.7 v-if 与 v-for 的优先级对比

5.8 示例项目：todoList

5.8.1 示例介绍

5.8.2 组件拆分

5.8.3 代码实现

5.8.4 Home.vue主组件

5.8.5 Header.vue代码

5.8.6 Footer.vue代码

5.8.7 List.vue列表代码

5.8.8 Item.vue子组件代码

第 6 章

◄  vue-router和vuex►

6.1 什么是路由

6.2 安装vue-router的两种方式

6.3 Vue Router的基本使用

6.3.1 router-link

6.3.2 设置选中路由高亮

6.3.3 router-view

6.3.4 router/ index.ts

6.4 路由HTML5 History模式和hash模式

6.4.1 hash模式

6.4.2 HTML5 History模式

6.4.3 服务器配置示例

6.5 带参数的动态路由匹配

6.6 响应路由参数的变化

6.7 捕获所有路由和设置404 界面

6.8 vue-router中编程式导航

6.9 路由传参query¶ms

6.9.1 query

6.9.2 params

6.10 命名路由

6.11 嵌套路由

6.12 为路由切换使用过渡动效

6.12.1 单个路由的过渡

6.12.2 基于路由的动态过渡

6.13 路由懒加载

6.14 使用命名视图

6.15 keep-alive

6.15.1 router配置缓存

6.15.2组件配置缓存

6.16 vuex 是什么？

6.17 安装vuex

6.18 配置vuex的步骤

6.19 获取vuex中的state

6.19.1 方法一：按需引入store.state

6.19.2 方式二：全局配置this.$store

6.19.3 方式三：mapState助手

6.20 获取vuex中的Getter

6.20.1 定义Getter

6.20.2 Getter访问方式一：store.getter.

6.20.3 Getter访问方式二：this.$store.getters

6.20.4 Getter访问方式三：mapGetters辅助函数

6.21 调用Mutations 和Actions

6.22 Composition API方式使用vuex

6.22.1 访问State and Getters

6.22.2 访问Mutations and Actions

6.23 Modules模块

6.24 Namespacing命名空间

6.24.1.开启模块的命名空间

6.24.2.在组件中使用

第 7 章

◄  Vue3的常用UI框架►

7.1 Vue的常用UI框架介绍

7.2 ant-design-vue介绍

7.2.1 使用 npm 或 yarn 安装

7.2.2 在浏览器中使用

7.2.3 使用示例

7.2.4 按需加载

7.2.5 创建项目

7.2.6 使用ant-design-vue

7.2.7 将ant-design-vue引入进行统一封装

7.2.8 主题定制

7.2.9 国际化

7.2.10 Layout 布局

7.2.11 使用iconfont图标

7.3 Element Plus介绍

7.3.1 npm 或CDN安装

7.3.2 引入 Element Plus

7.3.3 全局配置

7.3.4 自定义主题

7.3.5 组件

第 8 章

◄  Webpack5介绍►

8.1 webpack概念的引入

8.2 初识webpack5

8.2.1 webpack5的新特性：

8.2.2 webpack核心概念

8.2.3 webpack构建流程（原理）

8.3 webpack安装和体验

8.4 webpack最基本的配置文件的使用

8.5 多入口和多出口配置

8.6 webpack-dev-server

8.7 配置devServer

8.8 打包和压缩HTML资源

8.9 打包多个HTML文件

8.10 打包css资源

8.11 打包less和sass

8.11.1 打包less

8.11.2 打包sass

8.12 提取css为单独的文件

8.13 处理css浏览器兼容性

8.14 压缩css内容

8.14.1 optimize-css-assets-webpack-plugin和cssnano

8.14.2 css-minimizer-webpack-plugin

8.15 打包图片资源和字体资源

8.15.1 打包图片资源

8.15.2 打包字体资源

8.16 HMR热模块替换

8.17 去除项目里无用的js和css代码

第 9 章

◄  大屏展示实战项目►

9.1 项目说明

9.2 技术选型

9.3 编码规范

9.4 项目创建和初始化

9.5 项目基础框架搭建

9.6 大屏首页分析

9.6.1 大屏组件化分析

9.6.2 大屏技术实现分析

9.7 大屏技术准备

9.7.1 关于dart-sass与node-sass

9.7.2 安裝normalize.css

9.7.3 安装moment

9.7.4 安装echarts

9.7.5 安装axios并进行全局封装

9.7.5 安装axios

9.7.6 安装mockjs

9.7.7 安装qs

9.8 大屏布局

9.8.1 布局方案分析

9.8.2 Grid布局简介

9.8.3 代码实现

9.9 公共组件开发

9.9.1 时间类型切换组件

9.9.2 首页导航组件

9.9.3 子模块标题组件

9.9.4 echarts公共组件

9.9.5 排名组件

9.10 大屏业务组件开发

9.10.1 抽取公共hooks

9.10.2 线网

9.10.3 车辆

9.10.4 违规原因分析

9.10.5 卡类型使用情况

9.10.6 线路运客数排名

9.10.7 电子支付趋势

9.10.8 地图区域客流

9.11 大屏自适应

9.11.1 postcss-pxtorem

9.12 常见错误及解决方案

第 10 章

◄  Vue笔试面试►

10.1 制作简历

10.1.1 简历模板

10.1.2 个人信息

10.1.3 专业技能

10.1.4 工作经历

10.1.5 项目经历

10.2 选择公司和岗位

10.3 面试准备和自我介绍

10.3.1 面试准备

10.3.2 自我介绍

10.4 面试总结

10.5 常见笔试面试题

10.5.1 单页应用和多页应用的区别

10.5.3 什么是MVVM

10.5.3 Vue响应式原理

10.5.4 data为什么是函数

10.5.5 v-model原理

10.5.6 v-if和v-show的区别

10.5.7 computed、watch和method的区别

10.5.8 Vue的生命周期及顺序

10.5.9 接口请求一般放在哪个生命周期中？

10.5.10 Vue组件的通信方式

10.5.11 slot插槽

10.5.12 虚拟DOM

10.5.13 Vue中key的作用

10.5.14 nextTick原理

10.5.15 说说 vuex

10.5.16 keep-alive

10.5.17 router 和 route 的区别？

10.5.18 vue-router有哪几种导航钩子？

10.5.19 vue-loader是什么？使用它的用途有哪些？

10.5.20 Vue性能优化

参考文献

 　　项目截图：