Vue.js 3.X 項目開發(fā)實錄

第1章  Vue.js開發(fā)基礎(chǔ) 1
1.1  背景知識 2
1.1.1  客戶/服務(wù)器體系結(jié)構(gòu) 2
1.1.2  HTML、CSS與JavaScript 2
1.1.3  RESTful架構(gòu) 3
1.1.4  大前端時代的來臨 3
1.2  MVC、MVP和MVVM架構(gòu)模式 4
1.2.1  MVC架構(gòu)模式 4
1.2.2  MVP架構(gòu)模式 5
1.2.3  MVVM架構(gòu)模式 7
1.2.4  三者的區(qū)別和優(yōu)劣 8
1.3  前端開發(fā)調(diào)試?yán)?10
1.3.1  開發(fā)者的眼——Chrome 10
1.3.2  開發(fā)者的手——VS Code 10
1.3.3  開發(fā)者的心——Terminal 11
1.4  搭建編程測試環(huán)境 12
1.4.1  Vue.js的安裝 12
1.4.2  使用NPM搭建Vue運(yùn)行環(huán)境 13
1.4.3  項目開發(fā)工具 17
1.4.4  源碼管理機(jī)制 24
1.5  代碼調(diào)試方法 25
1.5.1  使用Console工具 25
1.5.2  使用調(diào)試工具 27
1.6  本章小結(jié) 29
第2章  熟練使用Vue對象、組件與庫 31
2.1  掛載Vue對象 32
2.2  操作關(guān)聯(lián)數(shù)據(jù) 33
2.2.1  data成員 33
2.2.2  computed成員 34
2.2.3  methods成員 35
2.2.4  watch成員 36
2.3  處理生命周期 37
2.4  Vue組件基礎(chǔ) 41
2.4.1  創(chuàng)建Vue組件 42
2.4.2  Vue專用組件 44
2.5  設(shè)計Vue組件 46
2.5.1  面向組件的v-on指令 46
2.5.2  面向組件的v-model指令 47
2.5.3  預(yù)留組件插槽 48
2.6  使用現(xiàn)有組件 49
2.6.1  使用內(nèi)置組件 49
2.6.2  引入外部組件 53
2.7  使用現(xiàn)有庫 54
2.7.1  使用內(nèi)置庫 54
2.7.2  引入外部庫 55
2.8  本章小結(jié) 57
第3章  企業(yè)網(wǎng)站系統(tǒng) 59
3.1  項目環(huán)境及框架 60
3.1.1  系統(tǒng)開發(fā)環(huán)境要求 60
3.1.2  軟件框架 60
3.2  搭建Vue項目 61
3.2.1  項目創(chuàng)建 61
3.2.2  安裝Vue組件和庫 62
3.3  系統(tǒng)分析 64
3.3.1  系統(tǒng)功能設(shè)計 65
3.3.2  系統(tǒng)功能結(jié)構(gòu)圖 65
3.4  企業(yè)網(wǎng)站系統(tǒng)運(yùn)行 65
3.4.1  系統(tǒng)文件結(jié)構(gòu) 66
3.4.2  運(yùn)行系統(tǒng) 67
3.5  系統(tǒng)主要功能實現(xiàn) 68
3.5.1  首頁的實現(xiàn) 68
3.5.2  關(guān)于我們頁面的實現(xiàn) 75
3.5.3  核心業(yè)務(wù)頁面的實現(xiàn) 77
3.5.4  新聞動態(tài)頁面的實現(xiàn) 79
3.5.5  聯(lián)系我們頁面的實現(xiàn) 80
3.5.6  “在線咨詢”彈窗的實現(xiàn) 81
3.6  本章小結(jié) 82
第4章  商城網(wǎng)站系統(tǒng) 83
4.1  項目環(huán)境及框架 84
4.1.1  系統(tǒng)開發(fā)環(huán)境要求 84
4.1.2  軟件框架 84
4.2  系統(tǒng)分析 85
4.2.1  系統(tǒng)功能設(shè)計 85
4.2.2  系統(tǒng)功能結(jié)構(gòu)圖 85
4.3  商城網(wǎng)站系統(tǒng)運(yùn)行 86
4.3.1  系統(tǒng)文件結(jié)構(gòu) 86
4.3.2  運(yùn)行系統(tǒng) 87
4.4  系統(tǒng)主要功能實現(xiàn) 88
4.4.1  首頁的實現(xiàn) 88
4.4.2  商品詳情頁面的實現(xiàn) 95
4.4.3  商品分類頁面的實現(xiàn) 96
4.4.4  商品結(jié)算頁面的實現(xiàn) 98
4.4.5  個人信息頁面的實現(xiàn) 102
4.4.6  訂單信息頁面的實現(xiàn) 104
4.5  本章小結(jié) 106
第5章  金融管理系統(tǒng) 107
5.1  項目環(huán)境及框架 108
5.1.1  系統(tǒng)開發(fā)環(huán)境要求 108
5.1.2  軟件框架 108
5.2  系統(tǒng)分析 109
5.2.1  系統(tǒng)功能設(shè)計 109
5.2.2  系統(tǒng)功能結(jié)構(gòu)圖 109
5.3  金融管理系統(tǒng)運(yùn)行 110
5.3.1  系統(tǒng)文件結(jié)構(gòu) 110
5.3.2  運(yùn)行系統(tǒng) 111
5.4  系統(tǒng)主要功能實現(xiàn) 112
5.4.1  登錄頁面的實現(xiàn) 112
5.4.2  注冊頁面的實現(xiàn) 114
5.4.3  首頁的實現(xiàn) 116
5.4.4  用戶信息頁面的實現(xiàn) 119
5.4.5  放貸信息頁面的實現(xiàn) 123
5.4.6  還款信息頁面的實現(xiàn) 123
5.5  本章小結(jié) 124
第6章  游戲娛樂網(wǎng)站系統(tǒng) 125
6.1  項目環(huán)境及框架 126
6.1.1  系統(tǒng)開發(fā)環(huán)境要求 126
6.1.2  軟件框架 126
6.2  系統(tǒng)分析 127
6.2.1  系統(tǒng)功能設(shè)計 127
6.2.2  系統(tǒng)功能結(jié)構(gòu)圖 127
6.3  游戲娛樂網(wǎng)站系統(tǒng)運(yùn)行 128
6.3.1  系統(tǒng)文件結(jié)構(gòu) 128
6.3.2  運(yùn)行系統(tǒng) 129
6.4  系統(tǒng)主要功能實現(xiàn) 130
6.4.1  登錄頁面的實現(xiàn) 130
6.4.2  注冊頁面的實現(xiàn) 132
6.4.3  首頁的實現(xiàn) 133
6.4.4  游戲詳情頁面的實現(xiàn) 137
6.4.5  游戲列表頁面的實現(xiàn) 141
6.4.6  我的收藏頁面的實現(xiàn) 141
6.5  本章小結(jié) 142
第7章  在線教育網(wǎng)站系統(tǒng) 143
7.1  項目環(huán)境及框架 144
7.1.1  系統(tǒng)開發(fā)環(huán)境要求 144
7.1.2  軟件框架 144
7.2  系統(tǒng)分析 145
7.2.1  系統(tǒng)功能設(shè)計 145
7.2.2  系統(tǒng)功能結(jié)構(gòu)圖 145
7.3  在線教育網(wǎng)站系統(tǒng)運(yùn)行 146
7.3.1  系統(tǒng)文件結(jié)構(gòu) 146
7.3.2  運(yùn)行系統(tǒng) 147
7.4  系統(tǒng)主要功能實現(xiàn) 149
7.4.1  首頁的實現(xiàn) 149
7.4.2  課程列表頁面的實現(xiàn) 156
7.4.3  合作院校頁面的實現(xiàn) 158
7.4.4  高職課堂頁面的實現(xiàn) 159
7.4.5  課程詳情頁面的實現(xiàn) 160
7.4.6  登錄注冊頁面的實現(xiàn) 162
7.5  本章小結(jié) 168
第8章  物流運(yùn)輸管理系統(tǒng) 169
8.1  項目環(huán)境及框架 170
8.1.1  系統(tǒng)開發(fā)環(huán)境要求 170
8.1.2  軟件框架 170
8.2  系統(tǒng)分析 171
8.2.1  系統(tǒng)功能設(shè)計 171
8.2.2  系統(tǒng)功能結(jié)構(gòu)圖 171
8.3  物流運(yùn)輸管理系統(tǒng)運(yùn)行 172
8.3.1  系統(tǒng)文件結(jié)構(gòu) 172
8.3.2  運(yùn)行系統(tǒng) 173
8.4  系統(tǒng)主要功能實現(xiàn) 174
8.4.1  登錄頁面的實現(xiàn) 174
8.4.2  注冊頁面的實現(xiàn) 176
8.4.3  工作臺頁面的實現(xiàn) 177
8.4.4  物流管理頁面的實現(xiàn) 182
8.4.5  用戶管理頁面的實現(xiàn) 186
8.5  本章小結(jié) 187
第9章  圖書管理系統(tǒng) 189
9.1  項目環(huán)境及框架 190
9.1.1  系統(tǒng)開發(fā)環(huán)境要求 190
9.1.2  軟件框架 190
9.2  系統(tǒng)分析 191
9.2.1  系統(tǒng)功能設(shè)計 191
9.2.2  系統(tǒng)功能結(jié)構(gòu)圖 191
9.3  圖書管理系統(tǒng)運(yùn)行 192
9.3.1  系統(tǒng)文件結(jié)構(gòu) 192
9.3.2  運(yùn)行系統(tǒng) 193
9.4  系統(tǒng)主要功能實現(xiàn) 194
9.4.1  登錄頁面的實現(xiàn) 194
9.4.2  注冊頁面的實現(xiàn) 196
9.4.3  首頁的實現(xiàn) 196
9.4.4  個人中心頁面的實現(xiàn) 202
9.4.5  書籍管理頁面的實現(xiàn) 204
9.4.6  用戶管理頁面的實現(xiàn) 207
9.5  本章小結(jié) 207
第10章  咖啡館網(wǎng)站系統(tǒng) 209
10.1  項目環(huán)境及框架 210
10.1.1  系統(tǒng)開發(fā)環(huán)境要求 210
10.1.2  軟件框架 210
10.2  系統(tǒng)分析 211
10.2.1  系統(tǒng)功能設(shè)計 211
10.2.2  系統(tǒng)功能結(jié)構(gòu)圖 211
10.3  咖啡館網(wǎng)站系統(tǒng)運(yùn)行 212
10.3.1  系統(tǒng)文件結(jié)構(gòu) 212
10.3.2  運(yùn)行系統(tǒng) 213
10.4  系統(tǒng)主要功能實現(xiàn) 214
10.4.1  首頁的實現(xiàn) 214
10.4.2  商品列表頁面的實現(xiàn) 220
10.4.3  商品詳情頁面的實現(xiàn) 222
10.4.4  意見/投訴頁面的實現(xiàn) 224
10.4.5  登錄頁面的實現(xiàn) 226
10.4.6  注冊頁面的實現(xiàn) 227
10.5  本章小結(jié) 227
第11章  家庭裝修網(wǎng)站系統(tǒng) 229
11.1  項目環(huán)境及框架 230
11.1.1  系統(tǒng)開發(fā)環(huán)境要求 230
11.1.2  軟件框架 230
11.2  系統(tǒng)分析 231
11.2.1  系統(tǒng)功能設(shè)計 231
11.2.2  系統(tǒng)功能結(jié)構(gòu)圖 231
11.3  家庭裝修網(wǎng)站系統(tǒng)運(yùn)行 232
11.3.1  系統(tǒng)文件結(jié)構(gòu) 232
11.3.2  運(yùn)行系統(tǒng) 233
11.4  系統(tǒng)主要功能實現(xiàn) 234
11.4.1  首頁的實現(xiàn) 235
11.4.2  關(guān)于我們頁面的實現(xiàn) 242
11.4.3  新聞資訊頁面的實現(xiàn) 244
11.4.4  經(jīng)典案例頁面的實現(xiàn) 245
11.4.5  合作與支持頁面的實現(xiàn) 246
11.5  本章小結(jié) 248
第12章  訂票系統(tǒng) 249
12.1  項目環(huán)境及框架 250
12.1.1  系統(tǒng)開發(fā)環(huán)境要求 250
12.1.2  軟件框架 250
12.2  系統(tǒng)分析 251
12.2.1  系統(tǒng)功能設(shè)計 251
12.2.2  系統(tǒng)功能結(jié)構(gòu)圖 251
12.3  訂票系統(tǒng)運(yùn)行 252
12.3.1  系統(tǒng)文件結(jié)構(gòu) 252
12.3.2  運(yùn)行系統(tǒng) 253
12.4  系統(tǒng)主要功能實現(xiàn) 254
12.4.1  在線購票頁面的實現(xiàn) 254
12.4.2  車次列表頁面的實現(xiàn) 260
12.4.3  在線搶票頁面的實現(xiàn) 262
12.4.4  我的訂單頁面的實現(xiàn) 264
12.4.5  訂單詳情頁面的實現(xiàn) 267
12.4.6  我的信息頁面的實現(xiàn) 268
12.5  本章小結(jié) 268
第13章  財務(wù)管理系統(tǒng) 269
13.1  項目環(huán)境及框架 270
13.1.1  系統(tǒng)開發(fā)環(huán)境要求 270
13.1.2  軟件框架 270
13.2  系統(tǒng)分析 271
13.2.1  系統(tǒng)功能設(shè)計 271
13.2.2  系統(tǒng)功能結(jié)構(gòu)圖 271
13.3  財務(wù)管理系統(tǒng)運(yùn)行 272
13.3.1  系統(tǒng)文件結(jié)構(gòu) 272
13.3.2  運(yùn)行系統(tǒng) 273
13.4  系統(tǒng)主要功能實現(xiàn) 274
13.4.1  登錄頁面的實現(xiàn) 274
13.4.2  注冊頁面的實現(xiàn) 276
13.4.3  營收分析頁面的實現(xiàn) 278
13.4.4  審批列表頁面的實現(xiàn) 280
13.4.5  預(yù)算列表頁面的實現(xiàn) 281
13.5  本章小結(jié) 284
第14章  項目信息化管理系統(tǒng) 285
14.1  項目環(huán)境及框架 286
14.1.1  系統(tǒng)開發(fā)環(huán)境要求 286
14.1.2  軟件框架 286
14.2  系統(tǒng)分析 287
14.2.1  系統(tǒng)功能設(shè)計 287
14.2.2  系統(tǒng)功能結(jié)構(gòu)圖 287
14.3  項目信息化管理系統(tǒng)運(yùn)行 288
14.3.1  系統(tǒng)文件結(jié)構(gòu) 288
14.3.2  運(yùn)行系統(tǒng) 289
14.4  系統(tǒng)主要功能實現(xiàn) 290
14.4.1  登錄頁面的實現(xiàn) 290
14.4.2  注冊頁面的實現(xiàn) 292
14.4.3  首頁的實現(xiàn) 292
14.4.4  我的項目頁面的實現(xiàn) 296
14.4.5  項目跟進(jìn)頁面的實現(xiàn) 299
14.4.6  項目報備頁面的實現(xiàn) 303
14.5  本章小結(jié) 303
第15章  辦公自動化系統(tǒng) 305
15.1  項目環(huán)境及框架 306
15.1.1  系統(tǒng)開發(fā)環(huán)境要求 306
15.1.2  軟件框架 306
15.2  系統(tǒng)分析 307
15.2.1  系統(tǒng)功能設(shè)計 307
15.2.2  系統(tǒng)功能結(jié)構(gòu)圖 307
15.3  辦公自動化系統(tǒng)運(yùn)行 308
15.3.1  系統(tǒng)文件結(jié)構(gòu) 308
15.3.2  運(yùn)行系統(tǒng) 309
15.4  系統(tǒng)主要功能實現(xiàn) 310
15.4.1  登錄頁面的實現(xiàn) 310
15.4.2  概況頁面的實現(xiàn) 312
15.4.3  員工信息頁面的實現(xiàn) 316
15.4.4  招聘崗位頁面的實現(xiàn) 318
15.4.5  招聘者信息頁面的實現(xiàn) 318
15.4.6  考勤信息頁面的實現(xiàn) 319
15.4.7  簽到信息頁面的實現(xiàn) 319
15.5  本章小結(jié) 320