Vue.js項目開發全程實錄

第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