教材遵循“项目导向、任务驱动”的教学理念，将“畅游八闽”项目分解成若干个能够实现阶段性成果的任务，落实到教材各个模块中实施。其中：

模块一“开发环境搭建”：使用 Vite 工具搭建 Vue 项目，并根据提供的 HTML 素材将项目通过 Vue 框架进行改写，实现项目页面的布局与样式效果。

模块二“留言板设计”：使用 Vue.js 的绑定特性设计与开发留言板。

模块三“发表留言功能开发”：使用 Vue.js 的基本指令实现留言点赞、匿名评论、留言列表渲染、发表留言等功能。

模块四“留言板异步数据渲染”：借助 Axios 第三方库，使用 Vue.js 的数据交互技术实现留言板异步数据渲染。

模块五“留言列表组件开发”：通过组件实现“留言列表”“、点赞”和“标题”组件的开发。

模块六“热点文章页面开发”：使用 Vue.js 的路由实现“热点文章”页面跳转功能。

模块七“页面切换效果设计”：通过 Vue 的动画组件设计页面之间的切换效果。

模块八“推荐好文页面开发”：使用 Vuex 统一管理“推荐好文”的阅读量、热度等状态信息。

模块九“留言后台管理系统设计”：使用第三方 UI 插件 Element Plus 与 Echarts 结合，设计后台留言管理页面。留言后台管理分为留言内容管理和留言数据看板两个模块。

模块十“Vue3 项目重构”：使用 Vue3 组合式 API 对之前模块设计的项目进行重构。

模块一 开发环境搭建………………………………………………………………1

　任务一 Vue 开发环境搭建 …………………………………………………………………3

　　　1. 什么是 Vue？ ……………………………………………………………………3

　　　2. Vue 开发环境搭建 ………………………………………………………………4

　任务二 Vue 旅游论坛项目初始化 ………………………………………………………13

　　　1. package.json 文件 ………………………………………………………………14

　　　2. src 目录文件……………………………………………………………………16

模块二 留言板设计 ………………………………………………………………20

　任务一 留言列表单向数据绑定 …………………………………………………………22

　　　1. 认识 MVVM 框架 ………………………………………………………………23

　　　2. MVVM 架构的优点 ……………………………………………………………24

　　　3. Vue 组件解析 …………………………………………………………………24

　　　4. 插值语法 ………………………………………………………………………25

　　　5. v-text 指令 ……………………………………………………………………26

　　　6. v-html 指令 ……………………………………………………………………26

　任务二 用户头像渲染 ……………………………………………………………………30

　　　1. v-bind 指令初识 ………………………………………………………………31

　　　2. 指令预期值 ……………………………………………………………………32

　　　3. v-bind 指令支持的数据类型 …………………………………………………33

　任务三 用户表单信息渲染 ………………………………………………………………36

　　　1. v-model 绑定输入框 …………………………………………………………36

　　　2. v-model 绑定下拉框 …………………………………………………………37

　　　3. v-model 绑定单选框和复选框 ………………………………………………38

　　　4. v-model 修饰符 ………………………………………………………………39

　任务四 信息预览框设计 …………………………………………………………………43

　　　1. 认识计算属性 …………………………………………………………………44

　　　2. 计算属性注意事项 ……………………………………………………………45

　　　3. getter 和 setter 函数 ……………………………………………………………45

　任务五 留言内容输入框字符数判定 ……………………………………………………48

　　　1. watch 侦听器基础应用 ………………………………………………………49

　　　2. watch 侦听器中的参数应用 …………………………………………………50

　　　3. 侦听器和计算属性的区别 ……………………………………………………53

模块三 发表留言功能开发 ………………………………………………………58

　任务一 留言点赞功能开发 ………………………………………………………………59

　　　1. v-on 指令 ………………………………………………………………………59

　　　2. 事件修饰符 ……………………………………………………………………62

　任务二 匿名评论功能开发 ………………………………………………………………69

　　　1. v-if 系列指令 …………………………………………………………………70

　　　2. v-show 指令 ……………………………………………………………………72

　任务三 留言列表渲染 ……………………………………………………………………76

　　　v-for 指令 …………………………………………………………………………76

　任务四 发表留言功能开发 ………………………………………………………………81

　　　1. 鼠标事件 ………………………………………………………………………82

　　　2. 键盘事件 ………………………………………………………………………83

　　　3. 表单事件 ………………………………………………………………………85

模块四 留言板异步数据渲染 ……………………………………………………91

　任务一 MOCK 数据接口搭建 ……………………………………………………………93

　　　1. Axios 库的使用…………………………………………………………………94

　　　2. Vue 生命周期 …………………………………………………………………97

　　　3. Mock 数据接口 ………………………………………………………………103

　任务二 留言时间记录 …………………………………………………………………111

　　　1. 响应拦截器 …………………………………………………………………113

　　　2. 请求拦截器 …………………………………………………………………114

模块五 留言列表组件开发………………………………………………………119

　任务一 认识 Vue 组件……………………………………………………………………121

　　　1. 组件简介 ……………………………………………………………………121

　　　2. 组件分类………………………………………………………………………122

　　　3. 全局组件………………………………………………………………………122

　　　4. 局部组件………………………………………………………………………123

　任务二 留言列表组件设计 ……………………………………………………………127

　　　1. 父、子组件 ……………………………………………………………………127

　　　2. 父组件向子组件传值…………………………………………………………128

　任务三 点赞组件设计 …………………………………………………………………135

　　　子组件向父组件传值 …………………………………………………………136

　任务四 标题组件设计 …………………………………………………………………141

　　　1. 插槽 …………………………………………………………………………142

　　　2. 匿名插槽 ……………………………………………………………………142

　　　3. 具名插槽 ……………………………………………………………………143

　　　4. 作用域插槽 …………………………………………………………………144

模块六 热点文章页面开发………………………………………………………150

　任务一 “热点文章”导航设计 …………………………………………………………151

　　　1. 认识前端路由和后端路由的区别 …………………………………………152

　　　2. 认识 Vue-router ………………………………………………………………153

　　　3. Vue-router 的安装与导入 ……………………………………………………153

　　　4. 路由配置 ……………………………………………………………………153

　　　5. 路由渲染 ……………………………………………………………………154

　任务二 “热点文章”嵌套路由开发 ……………………………………………………159

　　　1. 什么是嵌套路由？ …………………………………………………………159

　　　2. 设计嵌套路由 ………………………………………………………………160

　任务三 “热点文章”路由激活样式和重定向设计 ……………………………………165

　　　1. 路由激活样式 ………………………………………………………………166

　　　2. 路由重定向 …………………………………………………………………167

　任务四 “推荐好文”详情页跳转与返回 ………………………………………………169

　　　1. 动态路由匹配 ………………………………………………………………170

　　　2. 编程式导航 …………………………………………………………………171

　任务五 用户权限控制 …………………………………………………………………176

　　1. 导航守卫 ……………………………………………………………………177

　　2. 动态路由 ……………………………………………………………………179

模块七 页面切换效果设计………………………………………………………190

　任务一 使用 Animate.css 设计动画 ……………………………………………………191

　　　1. Vue 过渡动画 …………………………………………………………………192

　　　2. Vue 过渡模式 …………………………………………………………………195

　　　3. 自定义动画 …………………………………………………………………195

　　　4. 动画库的使用 ………………………………………………………………199

　任务二 使用钩子函数设计动画 ………………………………………………………206

　　　动画钩子函数介绍 ……………………………………………………………206

模块八 推荐好文页面开发………………………………………………………214

　任务一 “推荐好文”共享数据定义 ……………………………………………………216

　　　1. Vuex 简介 ……………………………………………………………………216

　　　2. 安装与配置 Vuex ……………………………………………………………217

　　　3. state 的使用 …………………………………………………………………217

　任务二 “推荐好文”共享数据管理 ……………………………………………………222

　　　1. mutations 方法 ………………………………………………………………222

　　　2. actions 方法 …………………………………………………………………224

　　　3. getters 属性 ……………………………………………………………………226

　　　4. Vuex 模块化处理 ……………………………………………………………227

　　　5. 组合辅助函数 ………………………………………………………………229

模块九 留言后台管理系统设计…………………………………………………238

　任务一 留言管理页面结构设计 ………………………………………………………240

　　　1. 什么是 Element Plus？ ………………………………………………………240

　　　2. 使用前端 UI 框架的优点 ……………………………………………………241

　　　3. 安装与配置 Element Plus ……………………………………………………241

　　　4. 使用 Element Plus 组件 ………………………………………………………243

　任务二 “留言内容管理”设计 …………………………………………………………250

　　　1. Vue 内置组件 …………………………………………………………………251

　　　2. 动态切换组件 ………………………………………………………………252

　任务三 “数据看板”设计 ………………………………………………………………263

　　　1. 认识 ECharts …………………………………………………………………264

　　　2. Vue 中 ECharts 的安装与使用 ………………………………………………264

　任务四 项目打包 ………………………………………………………………………271

　　　1. 为什么要进行项目打包？ …………………………………………………272

　　　2. Vite 打包介绍…………………………………………………………………272

模块十 Vue3项目重构 …………………………………………………………276

　任务一 “热点文章”页面重构 …………………………………………………………277

　　　1. 组合式 API 介绍………………………………………………………………277

　　　2. 组合式 API 基础………………………………………………………………278

　任务二 “留言列表”组件重构 …………………………………………………………288

　　　1. 父子组件通信 ………………………………………………………………288

　　　2. 跨代组件通信 ………………………………………………………………291

　任务三 pinia 实现全局状态管理 ………………………………………………………295

　　　1. pinia 介绍 ……………………………………………………………………295

　　　2. pinia 的优势 …………………………………………………………………295

　　　3. pinia 的安装和导入 …………………………………………………………296

　　　4. store 的使用 …………………………………………………………………296

　　　5. state 的使用 …………………………………………………………………297

　　　6. action 的使用 …………………………………………………………………299

　　　7. getter 的使用 …………………………………………………………………300

参考文献 …………………………………………………………………………306