Vue3.x+TypeScript实践指南

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

目　录

第１章　TypeScript基础１

　１．１　初识TypeScript１

　１．１．１　TypeScript的介绍１

　１．１．２　TypeScript的特点２

　１．２　安装TypeScript２

　１．２．１　安装node．js２

　１．２．２　npm３

　１．２．３　npminstall--save、--save-dev、-D、-S、-g的区别５

　１．２．４　yarn５

　１．２．５　全局安装TypeScript６

　１．３　第一个TypeScript程序６

　１．３．１　TS和JS的区别６

　１．３．２　编写TS程序７

　１．３．３　手动编译代码８

　１．３．４　VSCode自动编译８

　１．３．５　类型注解１０

　１．３．６　接　口１０

　１．３．７　类１１

　１．４　使用Webpack打包TypeScript１３

　１．５　VSCode１６

　１．５．２　安装VSCode插件１７

　１．５．３　打开并运行Webpack项目１８

　１．５．４　VSCode配置１９

　１．５．５　搜　索２０

第２章　TypeScript常用语法２１

　２．１　基础类型２１

　２．１．１　布尔值２１

　２．１．２　数　字２２

　２．１．３　字符串２２

　２．１．４　undefined和null２２

　２．１．５　数　组２３

　　２．１．６　元　组(tuple)２３

　　２．１．７　枚　举(enum)２３

　　２．１．８　any２４

　　２．１．９　void２４

　　２．１．１０　never２５

　　２．１．１１　object２５

　　２．１．１２　联合类型２５

　　２．１．１３　类型断言２６

　　２．１．１４　类型推断２６

　２．２　接　口２７

　　２．２．１　接口初探２７

　　２．２．２　可选属性“?”２８

　　２．２．３　只读属性readonly２８

　　２．２．４　函数类型２９

　　２．２．５　类类型２９

　２．３　类３０

　　２．３．１　基本示例３０

　　２．３．２　继　承３１

　　２．３．３　公共、私有以及受保护的修饰符３３

　　２．３．４　readonly修饰符３５

　　２．３．５　存取器３５

　　２．３．６　静态属性３６

　　２．３．７　抽象类３６

　２．４　函　数３７

　　２．４．１　基本示例３７

　　２．４．２　函数类型３７

　　２．４．３　可选参数和默认参数３８

　　２．４．４　剩余参数３８

　　２．４．５　函数重载３９

　２．５　泛　型３９

　　２．５．１　泛型引入４０

　　２．５．２　使用函数泛型４０

　　２．５．３　多个泛型参数的函数４０

　　２．５．４　泛型接口４１

　　２．５．５　泛型类４２

　　２．５．６　泛型约束４２

　２．６　声明文件和内置对象４３

　　２．６．１　声明文件４３

　　２．６．２　内置对象４４

第３章　Vue３快速上手４５

　３．１　Vue介绍４５

　３．２　认识Vue３４６

　３．３　vue-devtools４６

　　３．３．１　官网编译安装４７

　　３．３．２　极简插件在线安装４８

　３．４　创建Vue３项目４８

　　３．４．１　使用vue-cli创建４９

　　３．４．３　使用Vite创建５３

　３．５　Vue常用指令介绍５４

　　３．５．１　v-text５４

　　３．５．２　v-html指令５５

　　３．５．３　v-model和v-bind５６

　　３．５．４　v-once６３

　　３．５．５　v-pre６４

　　３．５．６　v-cloak６４

　　３．５．７　v-for和key属性６５

　　３．５．８　v-on６６

　　３．５．９　多事件处理６８

　　３．５．１０　事件修饰符６９

　　３．５．１１　键盘修饰符７２

　３．６　在Vue中使用样式７３

　　３．６．１　使用class样式７３

　　３．６．２　使用内联样式７４

　３．７　条件判断７５

　　３．７．１　v-if７５

　　３．７．２　v-if…v-else７５

　　３．７．３　v-else-if７６

　　３．７．４　在template元素上使用v-if条件渲染分组７６

　　３．７．５　v-show７６

　　３．７．６　v-ifVSv-show７７

　３．８　在模板中使用JavaScript表达式７７

　３．９　计算属性７８

　３．１０　watch８０

　　３．１０．１　常规用法８０

　　３．１０．２　立即执行(immediate和handler)８１

　　３．１０．３　深度监听８２

?　３．１０．４　computed和watch的区别８３

　３．１１　自定义组件使用v-model实现双向数据绑定８３

　３．１２　自定义组件slots８５

　３．１３　非prop的attribute继承(Vue３)８７

　　３．１３．１　attribute继承８７

　　３．１３．２　禁用attribute继承８８

　３．１４　＄ref操作DOM９０

　３．１５　表单数据双向绑定９２

　３．１６　组件传值９４

　　３．１６．１　父组件向子组件传值９５

　　３．１６．２　子组件向父组件传值９６

　３．１７　＄root和＄parent的使用９７

　３．１８　this．＄nextTick１０１

　３．１９　axios介绍１０３

　３．２０　跨域请求１０７

　３．２１　extend、mixin以及extends１０９

第４章　CompositionAPI１１３

　４．１　Vue３集成TypeScript１１３

　４．２　setup１１４

　　４．２．１　setup细节１１５

　　４．２．２　props和attrs的区别１１８

　４．３　ref__________１１８

　４．４　reactive１２０

　４．５　reactive与ref的区别１２１

　４．６　Vue２与Vue３响应式比较１２３

　　４．６．１　Vue２的响应式１２３

　　４．６．２　Vue３的响应式１２３

　４．７　计算属性与监视１２５

　４．８　组件生命周期１２８

　４．９　自定义hook函数１３２

　４．１０　toRefs１３４

　４．１１　ref获取元素１３５

　４．１２　shallowReactive与shallowRef１３６

　４．１３　readonly与shallowReadonly１３８

　４．１４　toRaw与markRaw１４０

　４．１５　toRef１４１

　４．１６　unRef１４３

　４．１７　customRef１４３

?４?

　４．１８　provide与inject１４５

　４．１９　响应式数据的判断１４７

　４．２０　OptionAPIVSCompositionAPI１４７

　　４．２０．１　OptionAPI的问题１４８

　　４．２０．２　CompositionAPI的使用１４８

第５章　Vue３新组件和新API１４９

　５．１　Fragment(片断)１４９

　５．２　Teleport(瞬移)１４９

　５．３　Suspense(不确定的)１５２

　５．４　全新的全局API１５４

　　５．４．１　createApp()１５５

　　５．４．２　Vue３优先使用Proxy１５６

　　５．４．３　defineComponent和defineAsyncComponent１５７

　　５．４．４　nextTick()１６０

　５．５　将原来的全局API转移到应用对象１６３

　５．６　模板语法变化１６３

　５．７　v-if与v-for的优先级对比１６６

　５．８　示例项目:todoList１６７

　　５．８．１　示例介绍１６７

　　５．８．２　组件拆分１６７

　　５．８．３　代码实现１６７

　　５．８．４　Home．vue主组件１６８

　　５．８．５　Header．vue代码１７０

　　５．８．６　Footer．vue代码１７２

　　５．８．７　List．vue列表代码１７４

　　５．８．８　Item．vue子组件代码１７４

第６章　vue-router和vuex１７８

　６．１　什么是路由?１７８

　６．２　安装vue-router的两种方式１７８

　６．３　vue-router的基本使用１７９

　　６．３．１　router-link１７９

　　６．３．２　设置选中路由高亮１８１

　　６．３．３　router-view１８２

　　６．３．４　router/index．ts１８２

　６．４　路由HTML５History模式和hash模式１８４

　　６．４．１　hash模式１８４

　　６．４．２　HTML５History模式１８５

?　６．４．３　服务器配置示例１８５

　６．５　带参数的动态路由匹配１８６

　６．６　响应路由参数的变化１８７

　６．７　捕获所有路由和设置４０４界面１８８

　６．８　vue-router中编程式导航１９０

　６．９　路由传参query&params１９１

　　６．９．１　query１９１

　　６．９．２　params１９２

　６．１０　命名路由１９３

　６．１１　嵌套路由１９３

　６．１２　路由切换过渡动效１９５

　　６．１２．１　单个路由的过渡１９５

　　６．１２．２　基于路由的动态过渡１９６

　６．１３　路由懒加载１９６

　６．１４　使用命名视图１９７

　６．１５　keep-alive１９９

　　６．１５．１　router配置缓存１９９

　　６．１５．２　组件配置缓存２００

　６．１６　vuex是什么?２０１

　６．１７　安装vuex２０２

　６．１８　配置vuex的步骤２０３

　６．１９　获取vuex中的state２０５

　　６．１９．１　方法一:按需引入store．state２０５

　　６．１９．２　方式二:全局配置this．＄store２０５

　　６．１９．３　方式三:mapState助手２０６

　６．２０　获取vuex中的Getter２０６

　　６．２０．１　定义Getter２０６

　　６．２０．２　Getter访问方式一:store．getter．２０６

　　６．２０．３　Getter访问方式二:this．＄store．getters２０７

　　６．２０．４　Getter访问方式三:mapGetters辅助函数２０７

　６．２１　调用Mutations和Actions２０７

　６．２２　CompositionAPI方式使用vuex２０８

　　６．２２．１　访问StateandGetters２０８

　　６．２２．２　访问MutationsandActions２０８

　６．２３　Modules模块２０９

　６．２４　Namespacing命名空间２０９

　　６．２４．１　开启模块的命名空间２１０

　　６．２４．２　在组件中使用带命名空间的模块２１１

?第７章　Vue３的常用UI框架２１２

　７．１　Vue的常用UI框架介绍２１２

　７．２　ant-design-vue介绍２１３

　　７．２．１　安　装２１４

　　７．２．２　在浏览器中使用２１４

　　７．２．３　使用示例２１４

　　７．２．４　按需加载２１４

　　７．２．５　创建项目２１５

　　７．２．６　使用ant-design-vue２１５

　　７．２．７　将ant-design-vue引入进行统一封装２１７

　　７．２．８　主题定制２１８

　　７．２．９　国际化２２０

　　７．２．１０　Layout布局２２２

　　７．２．１１　使用iconfont图标２２８

　７．３　ElementPlus介绍２３０

　　７．３．１　npm或CDN安装２３０

　　７．３．２　引入ElementPlus２３１

　　７．３．３　全局配置２３２

　　７．３．４　自定义主题２３２

　　７．３．５　组　件２３４

第８章　Webpack５介绍２３５

　８．１　Webpack概念的引入２３５

　８．２　初识Webpack５２３７

　　８．２．１　Webpack５的新特性２３８

　　８．２．２　Webpack核心概念２３８

　　８．２．３　Webpack构建流程(原理)２３９

　８．３　Webpack安装和体验２３９

　８．４　Webpack最基本的配置文件的使用２４３

　８．５　多入口和多出口配置２４４

　８．６　webpack-dev-server２４６

　８．７　配置devServer２４７

　８．８　打包和压缩HTML资源２４８

　８．９　打包多个HTML文件２５０

　８．１０　打包css资源２５１

　８．１１　打包less和sass２５４

　　８．１１．１　打包less２５４

　　８．１１．２　打包sass２５４

?　８．１２　提取css为单独的文件２５５

　８．１３　处理css浏览器兼容性２５６

　８．１４　压缩css内容２５７

　　８．１４．１　optimize-css-assets-webpack-plugin和cssnano２５７

　　８．１４．２　css-minimizer-webpack-plugin２５９

　８．１５　打包图片资源和字体资源２５９

　　８．１５．１　打包图片资源２５９

　　８．１５．２　打包字体资源２６１

　８．１６　模块热替换２６２

　８．１７　去除项目里无用的js和css代码２６３

第９章　大屏展示实战项目２６４

　９．１　项目说明２６４

　９．２　技术选型２６５

　９．３　编码规范２６６

　９．４　项目创建和初始化２６６

　９．５　项目基础框架搭建２６９

　９．６　大屏首页分析２７３

　　９．６．１　大屏组件化分析２７３

　　９．６．２　大屏技术实现分析２７４

　９．７　大屏技术准备２７４

　　９．７．１　关于dart-sass与node-sass２７４

　　９．７．２　安裝normalize．css２７４

　　９．７．３　安装moment２７５

　　９．７．４　安装echarts２７５

　　９．７．５　安装axios并进行全局封装２７５

　　９．７．６　安装mockjs２７５

　　９．７．７　安装qs２７５

　９．８　大屏布局２７６

　　９．８．１　布局方案分析２７６

　　９．８．２　Grid布局简介２７６

　　９．８．３　代码实现２７７

　９．９　公共组件开发２８１

　　９．９．１　时间类型切换组件２８１

　　９．９．２　首页导航组件２８３

　　９．９．３　子模块标题组件２８８

　　９．９．４　echarts公共组件２９０

　　９．９．５　排名组件２９３

　９．１０　大屏业务组件开发２９７

?　９．１０．１　抽取公共hooks２９７

　　９．１０．２　线　网２９８

　　９．１０．３　车　辆３０４

　　９．１０．４　违规原因分析３１３

　　９．１０．５　卡类型使用情况３１７

　　９．１０．６　线路运客数排名３２２

　　９．１０．７　电子支付趋势３２５

　　９．１０．８　地图区域客流３３１

　９．１１　大屏自适应３４４

　９．１２　常见错误及解决方案３４８

第１０章　Vue笔试面试３５０

　１０．１　制作简历３５０

　　１０．１．１　简历模板３５１

　　１０．１．２　个人信息３５２

　　１０．１．３　专业技能３５３

　　１０．１．４　工作经历３５４

　　１０．１．５　项目经历３５４

　１０．２　选择公司和岗位３５６

　１０．３　面试准备和自我介绍３５６

　　１０．３．１　面试准备３５６

　　１０．３．２　自我介绍３５６

　１０．４　面试总结３５７

　１０．５　常见笔试面试题３５７

　　１０．５．１　单页应用和多页应用的区别３５８

　　１０．５．２　什么是MVVM３６１

　　１０．５．３　Vue响应式原理３６１

　　１０．５．４　data为什么是函数３６５

　　１０．５．５　v-model原理３６６

　　１０．５．６　v-if和v-show的区别３６６

　　１０．５．７　computed、watch以及method的区别３６６

　　１０．５．８　Vue的生命周期及顺序３６７

　　１０．５．９　接口请求一般放在哪个生命周期中?３６８

　　１０．５．１０　Vue组件的通信方式３６８

　　１０．５．１１　slot插槽３６８

　　１０．５．１２　虚拟DOM３６８

　　１０．５．１３　Vue中key的作用３６９

　　１０．５．１４　nextTick原理３６９

　　１０．５．１５　说说Vuex３７０

?　１０．５．１６　keep-alive３７０

　　１０．５．１７　Router和Route的区别３７０

　　１０．５．１８　vue-router有哪几种导航钩子?３７１

　　１０．５．１９　vue-loader是什么?它的用途有哪些?３７１

　　１０．５．２０　Vue性能优化３７１

参考文献３７２