目录

第一部分 基础知识

第 1章前端基础 ··················································································································· 3 

1.1前端技术简介 ·········································································································· 3 

1.2  HTML·······················································································································4 

1.2.1  HTML简介 ·································································································· 4 

1.2.2  HTML编辑器 ······························································································ 5 

1.2.3  HTML标签 ·································································································· 7 

1.3 CSS··························································································································· 8 

1.3.1  CSS简介 ······································································································ 8 

1.3.2  CSS选择器 ·································································································· 8 

1.3.3  CSS样式入门 ···························································································· 10 

1.4  JavaScript················································································································ 12 

1.4.1  JavaScript简介··························································································· 12 

1.4.2  JavaScript语法入门 ··················································································· 13 

1.4.3  JavaScript到 TypeScript············································································· 15 

1.5  SPA与 MPA ··········································································································· 16 

第 2章 TypeScript基础······································································································ 17 

2.1 TypeScript初体验 ·································································································· 17 

2.1.1  TypeScript简介 ·························································································· 17 

2.1.2  安装 TypeScript ·························································································· 17 

2.1.3  TypeScript示例 ·························································································· 18 

2.1.4  TypeScript代码调试 ·················································································· 19 

2.2 TypeScript基础语法 ······························································································ 20 

2.2.1  变量 ············································································································ 20 

2.2.2  函数 ············································································································ 21 

2.2.3  模块 ············································································································ 21 

2.2.4  命名空间 ···································································································· 23 

2.3类

···························································································································· 23 

2.4接口

························································································································ 26 

2.5泛型

························································································································ 27 

2.

6迭代器和生成器 ···································································································· 29 

2.6.1  

迭代器 ········································································································ 29 

2.6.2  

生成器 ········································································································ 30 

2.7编译选项 

················································································································ 30 

2.8习题

························································································································ 31 

第 3章 Vue.js基础·············································································································· 32 

3.1

  Vue.js简介 ············································································································· 32 

3.1.1  

渐进式框架 ································································································ 32 

3.1.2  

单文件组件 ································································································ 33 

3.1.3  

API风格····································································································· 33 

3.2环境搭建 

················································································································ 35 

3.2.1  

安装 Node.js ······························································································· 35 

3.2.2  

Vue Cli脚手架 ··························································································· 36 

3.3开发工具 

················································································································ 36 

3.4开发示例 

················································································································ 38 

3.4.1  

创建项目 ···································································································· 38 

3.4.2  

项目结构 ···································································································· 39 

3.4.3  

示例解析 ···································································································· 40 

3.5代码调试 

················································································································ 42 

3.6习题

························································································································ 46 

第 4章 Vue模板·················································································································· 47 

4.1模板基础 

················································································································ 47 

4.1.1  

模板语法 ···································································································· 47 

4.1.2  

模板插值 ···································································································· 47 

4.1.3  

模板指令 ···································································································· 50 

4.2条件渲染 

················································································································ 51 

4.2.1  

v-if条件渲染 ······························································································ 51 

4.2.2  

v-show条件渲染························································································ 52 

4.3循环渲染 

················································································································ 53 

4.3.1  

v-for指令基本用法···················································································· 53 

4.3.2  

v-for指令高级用法···················································································· 55 

4.4模板引用 

················································································································ 56 

4.5自定义指令 

············································································································ 57 

4.5.1  

使用场景 ···································································································· 57 

4.5.2  

钩子函数 ···································································································· 58 

4.5.3  

指令实例属性 ····························································································· 59 

4.5.4  

元素指令 ···································································································· 60 

4.5.5  

高级选项 ···································································································· 60 

4.6习题

························································································································ 62 

目录 V 

第 5章 Vue组件基础·········································································································· 63 

5.1基本使用 

················································································································ 63 

5.1.1  

创建组件 ···································································································· 63 

5.1.2  

组件注册 ···································································································· 64 

5.1.3  

使用组件 ···································································································· 65 

5.2属性与方法 

············································································································ 66 

5.2.1  

属性基础 ···································································································· 66 

5.2.2  

组件方法 ···································································································· 67 

5.2.3  

属性声明 ···································································································· 68 

5.2.4  

属性校验 ···································································································· 69 

5.

3计算属性与监听器 ································································································· 70 

5.3.1  

计算属性 ···································································································· 70 

5.3.2  

计算属性赋值 ····························································································· 71 

5.3.3  

属性监听 ···································································································· 72 

5.3.4  

函数限流 ···································································································· 73 

5.4双向绑定 

················································································································ 74 

5.4.1  

文本输入框 ································································································ 74 

5.4.2  

复选框与单选框 ························································································· 75 

5.4.3  

选择列表 ···································································································· 76 

5.5样式绑定 

················································································································ 76 

5.5.1  

class属性样式···························································································· 76 

5.5.2  

内联样式 ···································································································· 78 

5.5.3  

样式表作用域 ····························································································· 78 

5.6习题

························································································································ 80 

第 6章 Vue组件进阶·········································································································· 81 

6.

1组件的生命周期 ···································································································· 81 

6.2组件通信 

················································································································ 82 

6.2.1  

父子组件通信 ····························································································· 83 

6.2.2  

兄弟组件通信 ····························································································· 84 

6.2.3  

全局组件通信 ····························································································· 86 

6.3组件混入 

················································································································ 88 

6.3.1  

混入基础 ···································································································· 88 

6.3.2  

选项合并 ···································································································· 89 

6.3.3  

全局混入 ···································································································· 89 

6.4组件插槽 

················································································································ 90 

6.4.1  

插槽简介 ···································································································· 90 

6.4.2  

具名插槽 ···································································································· 91 

6.4.3  

默认插槽 ···································································································· 92 

6.4.4  

作用域插槽 ································································································ 92 

6.5动态组件 

················································································································ 93 

6.6异步组件 

················································································································ 94 

6.6.1  

基本用法 ···································································································· 94 

6.6.2  

加载与错误状态 ························································································· 95 

6.6.3  Suspense ····································································································· 96 

6.7习题

························································································································ 97 

第二部分 开发进阶

第 7章事件监听与处理 ··································································································· 101 

7.1事件监听 

·············································································································· 101 

7.1.1  

事件基础 ·································································································· 101 

7.1.2  

多事件处理 ······························································································ 102 

7.1.3  

事件修饰符 ······························································································ 103 

7.2事件类型 

·············································································································· 104 

7.2.1  

常用事件类型 ··························································································· 104 

7.2.2  

按键修饰符 ······························································································ 105 

7.2.3  

系统按键修饰符 ······················································································· 106 

7.3自定义事件 

·········································································································· 106 

7.4综合示例 

·············································································································· 107 

7.5习题

······················································································································ 108 

8.1动画概述 

·············································································································· 109 

8.2 

CSS动画 ·············································································································· 109 

8.2.1  

过渡动画 ·································································································· 110 

8.2.2  

关键帧动画 ·······························································································111 

8.3

  JavaScript动画····································································································· 112 

8.3.1  setInterval ································································································· 112 

8.3.2  requestAnimationFrame ············································································ 113 

8.3.3  动画事件监听 ··························································································· 115 

8.4

  Vue过渡动画 ······································································································· 116 

8.4.1  

Transition组件 ························································································· 116 

8.4.2  

多元素过渡 ······························································································ 117 

8.4.3  

多组件过渡 ······························································································ 119 

8.4.4  

列表过渡 ·································································································· 120 

8.4.5  

动画监听 ·································································································· 122 

8.5  

Lottie动画············································································································ 123 

8.5.1  

Lottie简介································································································ 123 

8.5.2  

基本使用 ·································································································· 124 

8.5.3  

动画配置 ·································································································· 126 

8.6习题

······················································································································ 127 

第 8章动画 ······················································································································· 109 

目录 VII 

第 9章导航与路由 ··········································································································· 128 

9.1  Vue Router············································································································ 128 

9.1.1  

路由概述 ·································································································· 128 

9.1.2

  Vue Router安装 ······················································································· 129 

9.1.3  

快速上手 ·································································································· 129 

9.2路由匹配 

·············································································································· 132 

9.2.1  

路由参数匹配 ··························································································· 132 

9.2.2  

路由通配符 ······························································································ 133 

9.2.3  

路由参数语法 ··························································································· 134 

9.2.4  

嵌套路由 ·································································································· 135 

9.2.5  

命名路由 ·································································································· 137 

9.2.6  

路由重定向 ······························································································ 138 

9.3编程式导航 

·········································································································· 138 

9.3.1  

路由导航 ·································································································· 138 

9.3.2  

导航历史 ·································································································· 139 

9.3.3  

导航历史模式 ··························································································· 140 

9.4路由传参 

·············································································································· 141 

9.5导航守卫 

·············································································································· 143 

9.5.1  

全局前置守卫 ··························································································· 143 

9.5.2  

全局解析守卫 ··························································································· 144 

9.5.3  

路由独享守卫 ··························································································· 146 

9.5.4  

组件级守卫 ······························································································ 147 

9.6动态路由 

·············································································································· 148 

9.6.1  

添加路由 ·································································································· 149 

9.6.2  

删除路由 ·································································································· 150 

9.7习题

······················································································································ 151 

第 10章网络请求 ············································································································· 152 

10.1  网络基础 ············································································································ 152 

10.1.1  HTTP····································································································· 152 

10.1.2  GET与 POST ······················································································· 154 

10.2  Axios ·················································································································· 155 

10.2.1  

免费数据服务 ······················································································· 155 

10.2.2  

vue-axios基本操作 ··············································································· 158 

10.2.3  

vue-axios实用功能 ··············································································· 160 

10.2.4  

请求配置与响应结构 ··········································································· 162 

10.2.5  

拦截器 ··································································································· 163 

10.2.6  

取消请求 ······························································································· 164 

10.3  Fetch ··················································································································· 165 

10.3.1  

Fetch简介 ····························································································· 165 

10.3.2  

Fetch基本操作 ····················································································· 166 

10.3.3  

Request接口 ························································································· 167 

10.3.4  

Response接口······················································································· 168 

10.4  Mock··················································································································· 169 

10.4.1  Mock简介····························································································· 169 

10.4.2  Mock.js·································································································· 170 

10.4.3  Apifox ··································································································· 171 

10.5  习题 ···················································································································· 174 

第 11章状态管理 ············································································································· 176 

11.1概述 

···················································································································· 176 

11.

2本地状态管理 ····································································································· 177 

11.3  Vuex···················································································································· 178 

目录 IX 

11.3.1  

Vuex简介······························································································ 178 

11.3.2  

Vuex组成······························································································ 179 

11.3.3  

Vuex基本操作······················································································ 180 

11.3.4  

Vuex核心概念······················································································ 182 

11.4  Pinia···················································································································· 189 

11.4.1  

Pinia简介······························································································ 189 

11.4.2  

Pinia基本使用 ······················································································ 190 

11.4.3  

Pinia持久化·························································································· 193 

11.4.4  

Pinia核心概念 ······················································································ 195 

11.4.5  

Pinia插件······························································································ 199 

11.5习题 ···················································································································· 200 

第 12章 Element Plus······································································································· 201 

12.1  

Element Plus简介 ······························································································ 201 

12.1.1  

UI框架简介·························································································· 201 

12.1.2  

Element Plus入门 ················································································· 201 

12.2  

常用组件 ············································································································ 203 

12.2.1  

基础组件 ······························································································· 203 

12.2.2  

表单组件 ······························································································· 204 

12.2.3  

下拉选择器 ··························································································· 208 

12.2.4  

日期选择器 ··························································································· 210 

12.2.5  

数据类组件 ··························································································· 213 

12.2.6  

导航组件 ······························································································ 215 

12.3  

综合示例 ············································································································ 219 

12.4  

习题 ···················································································································· 222 

第 13章 Vant ····················································································································· 223 

13.1  

Vant简介············································································································ 223 

13.2  

Vant基础入门 ···································································································· 223 

13.2.1  

安装 Vant ······························································································ 223 

13.2.2  

引入 Vant组件······················································································ 224 

13.2.3  

浏览器适配 ··························································································· 226 

13.3  

常用组件 ············································································································ 228 

13.3.1  

基础组件 ······························································································· 228 

13.3.2  

导航组件 ······························································································· 230 

13.3.3  

展示组件 ······························································································· 233 

13.4  

综合示例 ············································································································ 237 

13.5  

习题 ···················································································································· 238 

第 14章 Vite ······················································································································ 239 

14.1  

Vite简介············································································································· 239 

14.1.1  

Vite诞生背景 ······················································································· 239 

14.1.2  

Vite特性 ······························································································· 240 

14.2  

Vite基础入门 ····································································································· 241 

14.2.1  

环境搭建 ······························································································· 241 

14.2.2  

项目结构 ······························································································· 241 

14.2.3  

配置文件 ······························································································· 243 

14.3  

Vite核心概念 ····································································································· 243 

14.3.1  

Vite构建过程 ······················································································· 243 

14.3.2  

Esbuild预构建······················································································ 245 

14.3.3  

Rollup打包 ··························································································· 246 

14.4  

Vite插件开发 ····································································································· 247 

14.4.1  

Vite插件简介 ······················································································· 247 

14.4.2  

Vite通用 API························································································ 248 

14.4.3  

Vite独有 API························································································ 249 

14.4.4  

插件开发实战 ······················································································· 252 

14.5  

静态资源处理 ···································································································· 255 

14.5.1  

图片加载 ······························································································· 255 

14.5.2  

JSON加载 ···························································································· 256 

14.5.3  Web Worker··························································································· 256 

14.5.4  WebAssembly························································································ 257 

14.6  

服务器渲染 ········································································································ 258 

14.6.1  

SSR基本概念······················································································· 258 

14.6.2  

SSR生命周期······················································································· 260 

14.6.3  

使用 Vite构建 SSR ·············································································· 260 

14.7  

习题 ···················································································································· 265 

第三部分 项目实战

第 15章移动招聘客户端 ·································································································· 269 

15.1  

项目概述 ············································································································ 269 

15.2  

项目搭建 ············································································································ 270 

15.2.1  

初始化项目 ··························································································· 270 

15.2.2  

搭建主页面 ··························································································· 271 

15.2.3  

路由管理 ······························································································· 272 

15.2.4  

请求 API ······························································································· 275 

15.2.5  

引入 Pinia······························································································ 277 

15.3  

账号管理 ············································································································ 278 

15.3.1  

账号登录 ······························································································· 278 

15.3.2  

用户协议 ······························································································· 281 

15.4  

任务模块 ············································································································ 283 

15.4.1  

任务首页 ······························································································· 283 

15.4.2  

城市切换 ······························································································· 286 

15.4.3  

任务筛选 ······························································································· 287 

15.4.4  

任务搜索 ······························································································· 289 

15.4.5  

任务详情 ······························································································· 291 

15.5  

合约模块 ············································································································ 294 

15.5.1  

合约首页 ······························································································· 294 

15.5.2  

合约详情 ······························································································· 295 

15.6  

消息模块 ············································································································ 297 

15.6.1  

消息首页 ······························································································· 297 

15.6.2  

系统消息 ······························································································· 300 

15.6.3  

表情输入 ······························································································· 302 

15.6.4  

聊天详情 ······························································································· 303 

15.7  

本章小结 ············································································································ 305 

第 16章知乎社区客户端 ·································································································· 307 

16.1  

项目概述 ············································································································ 307 

16.2  

服务端开发 ········································································································ 308 

16.2.1  

Spring Boot简介··················································································· 308 

16.2.2  

搭建 Spring Boot项目 ·········································································· 309 

16.2.3  

安装 MySQL························································································· 312 

16.2.4  

MySQL数据服务 ················································································· 314 

16.2.5  

集成 Redis····························································································· 316 

16.2.6  

集成 Knife4j·························································································· 318 

16.2.7  

JWT登录接口 ······················································································ 321 

16.3  

项目搭建 ············································································································ 327 

16.3.1  

初始化项目 ··························································································· 327 

16.3.2  

引入 UnoCSS ························································································ 328 

16.3.3  

引入 SVG······························································································ 331 

16.3.4  

网络请求 API························································································ 332 

16.3.5  

路由管理 ······························································································· 333 

16.4  

功能开发 ············································································································ 334 

16.4.1  

搭建主页面 ··························································································· 334 

16.4.2  

推荐模块 ······························································································· 337 

16.4.3  

话题搜索 ······························································································· 339 

16.4.4  

文章详情 ······························································································· 341 

16.4.5  

视频列表 ······························································································· 344 

16.4.6  

视频详情 ······························································································· 345 

16.4.7  

文章评论 ······························································································· 348 

16.5  

账号管理 ············································································································ 351 

16.5.1  

账号登录 ······························································································· 351 

16.5.2  

二维码登录 ··························································································· 354 

16.5.3  

第三方登录 ··························································································· 356 

16.6  

创作中心 ············································································································ 358 

16.7  

国际化 ················································································································ 361 

16.8  

本章小结 ············································································································ 363 

第 17章性能优化与版本发布 ·························································································· 365 

17.1  

性能优化 ············································································································ 365 

17.1.1  

性能优化简介 ······················································································· 365 

17.1.2  

网络优化 ······························································································· 365 

17.1.3  

资源压缩 ······························································································· 368 

17.1.4  

资源加载优化 ······················································································· 370 

17.1.5  

预渲染优化 ··························································································· 372 

17.2  

构建生成版本 ···································································································· 376 

17.2.1  

修改默认配置 ······················································································· 376 

17.2.2  

构建生产版本 ······················································································· 377 

17.2.3  

Nginx部署···························································································· 378 

17.3  

本章小结 ············································································································ 380