Vue.js項目開發全程實錄
明日科技
相關主題
商品描述
《Vue.js項目開發全程實錄》精選Vue.js開發方向的10個熱門應用項目，實用性非常強。這些項目包含：智匯企業官網首頁設計、貪吃蛇小游戲、時光音樂網首頁設計、游戲公園博客、電影易購APP、淘貝電子商城、暢聯通訊錄、仿餓了麽APP、仿今日頭條APP、四季旅游信息網。本書從軟件工程的角度出發，按照項目開發的順序，系統而全面地講解每一個項目的開發實現過程。體例上，每章聚焦一個項目，統一採用“開發背景→系統設計→技術準備→各功能模塊的設計與實現→項目運行→源碼下載”的形式完整呈現項目。這樣的安排旨在讓讀者在學習過程中獲得清晰的成就感，並幫助讀者快速積累實際項目經驗與技巧，以早日實現就業目標。
目錄大綱
第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
