第1章 智汇企业官网首页设计 1

——事件处理 + 表单元素绑定 + 样式绑定 + CSS过渡

1.1 开发背景 1

1.2 系统设计 2

1.2.1 开发环境 2

1.2.2 业务流程 2

1.2.3 功能结构 2

1.3 技术准备 2

1.4 功能设计 5

1.4.1 导航栏的设计 5

1.4.2 活动图片展示界面 7

1.4.3 企业新闻展示界面 9

1.4.4 产品推荐界面 11

1.4.5 浮动窗口设计 13

1.5 项目运行 14

1.6 源码下载 15

第2章 贪吃蛇小游戏 16

——v-show指令 + 事件处理 + 表单元素绑定

2.1 开发背景 16

2.2 系统设计 17

2.2.1 开发环境 17

2.2.2 业务流程 17

2.2.3 功能结构 17

2.3 技术准备 18

2.4 游戏初始界面设计 19

2.4.1 创建主页 19

2.4.2 游戏初始化 21

2.4.3 设置游戏速度 22

2.5 游戏操作 22

2.5.1 键盘按键控制 22

2.5.2 蛇的移动 23

2.5.3 游戏结束 24

2.6 项目运行 24

2.7 源码下载 25

第3章 时光音乐网首页设计 26

——Vue CLI + axios

3.1 开发背景 26

3.2 系统设计 27

3.2.1 开发环境 27

3.2.2 业务流程 27

3.2.3 功能结构 27

3.3 技术准备 27

3.4 功能设计 29

3.4.1 导航栏的设计 29

3.4.2 歌曲列表展示界面 31

3.4.3 轮播图的设计 33

3.4.4 歌曲排行榜 35

3.4.5 最新音乐资讯 38

3.4.6 新歌首发 40

3.4.7 首页底部的设计 44

3.4.8 在根组件中构建音乐网首页 44

3.5 项目运行 45

3.6 源码下载 46

第4章 游戏公园博客 47

——Vue CLI + Vue Router + Vuex

4.1 开发背景 47

4.2 系统设计 48

4.2.1 开发环境 48

4.2.2 业务流程 48

4.2.3 功能结构 48

4.3 技术准备 48

4.4 创建项目 49

4.5 功能设计 50

4.5.1 主页设计 50

4.5.2 博客列表页面设计 57

4.5.3 博客详情页面设计 59

4.5.4 关于我们页面设计 62

4.5.5 路由配置 65

4.6 项目运行 66

4.7 源码下载 67

第5章 电影易购APP 68

——Vue CLI + Vue Router + Vuex + axios

5.1 开发背景 68

5.2 系统设计 69

5.2.1 开发环境 69

5.2.2 业务流程 69

5.2.3 功能结构 69

5.3 技术准备 70

5.4 创建项目 70

5.5 公共组件设计 70

5.5.1 头部组件设计 71

5.5.2 底部导航栏组件设计 71

5.6 影片页面设计 73

5.6.1 正在热映影片组件设计 73

5.6.2 即将上映影片组件设计 76

5.6.3 影片搜索组件设计 78

5.6.4 影片页面组件设计 81

5.7 选择城市页面设计 84

5.8 影院页面设计 90

5.8.1 影院列表组件设计 91

5.8.2 影院页面组件设计 93

5.9 我的页面设计 94

5.9.1 用户登录组件设计 94

5.9.2 用户注册组件设计 97

5.9.3 用户订单和服务组件设计 99

5.9.4 我的页面组件设计 102

5.10 路由配置 102

5.11 项目运行 104

5.12 源码下载 104

第6章 淘贝电子商城 105

——Vue CLI + Vue Router + Vuex + localStorage

6.1 开发背景 105

6.2 系统设计 106

6.2.1 开发环境 106

6.2.2 业务流程 106

6.2.3 功能结构 106

6.3 技术准备 107

6.4 主页的设计与实现 108

6.4.1 主页的设计 108

6.4.2 顶部区和底部区功能的实现 108

6.4.3 商品分类导航功能的实现 112

6.4.4 轮播图功能的实现 114

6.4.5 商品推荐功能的实现 115

6.5 商品详情页面的设计与实现 117

6.5.1 商品详情页面的设计 117

6.5.2 图片放大镜效果的实现 119

6.5.3 商品概要功能的实现 120

6.5.4 猜你喜欢功能的实现 123

6.5.5 选项卡切换效果的实现 125

6.6 购物车页面的设计与实现 127

6.6.1 购物车页面的设计 127

6.6.2 购物车页面的实现 127

6.7 付款页面的设计与实现 129

6.7.1 付款页面的设计 129

6.7.2 付款页面的实现 130

6.8 注册和登录页面的设计与实现 133

6.8.1 注册和登录页面的设计 133

6.8.2 注册页面的实现 134

6.8.3 登录页面的实现 136

6.9 项目运行 138

6.10 源码下载 139

第7章 畅联通讯录 140

——Vue CLI + Vue Router + Vuex + localStorage + sessionStorage 140

7.1 开发背景 140

7.2 系统设计 141

7.2.1 开发环境 141

7.2.2 业务流程 141

7.2.3 功能结构 142

7.3 技术准备 142

7.4 创建项目 143

7.5 注册和登录页面设计 144

7.5.1 页面头部组件设计 145

7.5.2 用户注册组件设计 146

7.5.3 用户登录组件设计 149

7.6 通讯录页面设计 152

7.6.1 通讯录页面组件设计 152

7.6.2 通讯录列表组件设计 157

7.6.3 分页组件设计 160

7.6.4 联系人组件设计 162

7.7 添加联系人组件设计 164

7.8 个人中心组件设计 168

7.9 路由配置 173

7.10 项目运行 174

7.11 源码下载 175

第8章 仿饿了么APP 176

——Vue CLI + Router + axios + JSON Server + localStorage + SessionStorage

8.1 开发背景 176

8.2 系统设计 177

8.2.1 开发环境 177

8.2.2 业务流程 177

8.2.3 功能结构 177

8.3 技术准备 178

8.4 首页的设计与实现 180

8.4.1 商家分类页面设计 180

8.4.2 推荐商家列表页面设计 182

8.4.3 底部导航栏的设计 183

8.5 分类商家列表的设计与实现 185

8.6 商家详情页面的设计与实现 187

8.6.1 商家信息页面设计 187

8.6.2 购物车页面设计 190

8.7 确认订单页面的设计与实现 192

8.7.1 确认订单页面设计 192

8.7.2 新增收货地址页面的设计 194

8.7.3 地址管理页面的设计 196

8.8 支付页面的设计与实现 198

8.9 订单列表页面的设计与实现 201

8.10 注册和登录页面的设计与实现 203

8.10.1 注册页面的设计 204

8.10.2 登录页面的设计 206

8.11 我的页面的设计与实现 208

8.12 项目运行 209

8.13 源码下载 210

第9章 仿今日头条APP 211

——Vue CLI + Router + Vuex + axios + JSON Server + Vant + amfe-flexible + Day.js

9.1 开发背景 211

9.2 系统设计 212

9.2.1 开发环境 212

9.2.2 业务流程 212

9.2.3 功能结构 213

9.3 技术准备 213

9.3.1 技术概览 213

9.3.2 Vant 213

9.3.3 amfe-flexible 219

9.3.4 Day.js 219

9.4 创建项目 220

9.5 新闻列表页面的设计与实现 221

9.5.1 页面主组件设计 221

9.5.2 新闻列表组件设计 224

9.5.3 新闻列表项组件设计 227

9.5.4 频道管理组件设计 230

9.5.5 底部导航栏的设计 233

9.6 新闻搜索功能的设计与实现 234

9.6.1 搜索组件设计 234

9.6.2 搜索结果组件设计 236

9.7 新闻详情页面的设计与实现 238

9.7.1 新闻内容组件设计 238

9.7.2 用户评论组件的设计 241

9.8 注册和登录页面的设计与实现 250

9.8.1 注册页面的设计 250

9.8.2 登录页面的设计 252

9.9 我的页面的设计与实现 254

9.10 路由配置 256

9.11 项目运行 257

9.12 源码下载 258

第10章 四季旅游信息网 259

——Vue CLI + Vue Router + axios + JSON Server + ElementPlus + Day.js

10.1 开发背景 259

10.2 系统设计 260

10.2.1 开发环境 260

10.2.2 业务流程 260

10.2.3 功能结构 261

10.3 技术准备 261

10.3.1 技术概览 261

10.3.2 ElementPlus 261

10.3.3 Day.js中的add()方法和format()方法 266

10.4 创建项目 266

10.5 公共组件设计 267

10.5.1 页面头部组件设计 267

10.5.2 页面底部组件设计 269

10.6 首页设计 269

10.7 热门景点页面设计 273

10.7.1 景点列表组件设计 274

10.7.2 景点列表项组件设计 276

10.7.3 景点详情组件设计 277

10.8 酒店住宿页面设计 279

10.8.1 酒店列表组件设计 279

10.8.2 酒店列表项组件设计 282

10.8.3 酒店搜索结果组件设计 283

10.8.4 酒店详情组件设计 284

10.9 门票预订页面设计 286

10.10 游客服务页面设计 290

10.10.1 游客服务组件设计 291

10.10.2 导游组件设计 292

10.10.3 游客须知组件设计 294

10.11 用户中心页面设计 295

10.11.1 用户注册组件设计 295

10.11.2 用户登录组件设计 298

10.12 路由配置 300

10.13 项目运行 303

10.14 源码下载 304