Vue.js 3.X 項目開發實錄

目    錄

第1章  Vue.js開發基礎 1

1.1  背景知識 2

1.1.1  客戶/服務器體系結構 2

1.1.2  HTML、CSS與JavaScript 2

1.1.3  RESTful架構 3

1.1.4  大前端時代的來臨 3

1.2  MVC、MVP和MVVM架構模式 4

1.2.1  MVC架構模式 4

1.2.2  MVP架構模式 5

1.2.3  MVVM架構模式 7

1.2.4  三者的區別和優劣 8

1.3  前端開發調試必備利器 10

1.3.1  開發者的眼——Chrome 10

1.3.2  開發者的手——VS Code 10

1.3.3  開發者的心——Terminal 11

1.4  搭建編程測試環境 12

1.4.1  Vue.js的安裝 12

1.4.2  使用NPM搭建Vue運行環境 13

1.4.3  項目開發工具 17

1.4.4  源碼管理機制 24

1.5  代碼調試方法 25

1.5.1  使用Console工具 25

1.5.2  使用調試工具 27

1.6  本章小結 29

第2章  熟練使用Vue對象、組件與庫 31

2.1  掛載Vue對象 32

2.2  操作關聯數據 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組件基礎 41

2.4.1  創建Vue組件 42

2.4.2  Vue專用組件 44

2.5  設計Vue組件 46

2.5.1  面向組件的v-on指令 46

2.5.2  面向組件的v-model指令 47

2.5.3  預留組件插槽 48

2.6  使用現有組件 49

2.6.1  使用內置組件 49

2.6.2  引入外部組件 53

2.7  使用現有庫 54

2.7.1  使用內置庫 54

2.7.2  引入外部庫 55

2.8  本章小結 57

第3章  企業網站系統 59

3.1  項目環境及框架 60

3.1.1  系統開發環境要求 60

3.1.2  軟件框架 60

3.2  搭建Vue項目 61

3.2.1  項目創建 61

3.2.2  安裝Vue組件和庫 62

3.3  系統分析 64

3.3.1  系統功能設計 65

3.3.2  系統功能結構圖 65

3.4  企業網站系統運行 65

3.4.1  系統文件結構 66

3.4.2  運行系統 67

3.5  系統主要功能實現 68

3.5.1  首頁的實現 68

3.5.2  關於我們頁面的實現 75

3.5.3  核心業務頁面的實現 77

3.5.4  新聞動態頁面的實現 79

3.5.5  聯系我們頁面的實現 80

3.5.6  “在線咨詢”彈窗的實現 81

3.6  本章小結 82

第4章  商城網站系統 83

4.1  項目環境及框架 84

4.1.1  系統開發環境要求 84

4.1.2  軟件框架 84

4.2  系統分析 85

4.2.1  系統功能設計 85

4.2.2  系統功能結構圖 85

4.3  商城網站系統運行 86

4.3.1  系統文件結構 86

4.3.2  運行系統 87

4.4  系統主要功能實現 88

4.4.1  首頁的實現 88

4.4.2  商品詳情頁面的實現 95

4.4.3  商品分類頁面的實現 96

4.4.4  商品結算頁面的實現 98

4.4.5  個人信息頁面的實現 102

4.4.6  訂單信息頁面的實現 104

4.5  本章小結 106

第5章  金融管理系統 107

5.1  項目環境及框架 108

5.1.1  系統開發環境要求 108

5.1.2  軟件框架 108

5.2  系統分析 109

5.2.1  系統功能設計 109

5.2.2  系統功能結構圖 109

5.3  金融管理系統運行 110

5.3.1  系統文件結構 110

5.3.2  運行系統 111

5.4  系統主要功能實現 112

5.4.1  登錄頁面的實現 112

5.4.2  註冊頁面的實現 114

5.4.3  首頁的實現 116

5.4.4  用戶信息頁面的實現 119

5.4.5  放貸信息頁面的實現 123

5.4.6  還款信息頁面的實現 123

5.5  本章小結 124

第6章  游戲娛樂網站系統 125

6.1  項目環境及框架 126

6.1.1  系統開發環境要求 126

6.1.2  軟件框架 126

6.2  系統分析 127

6.2.1  系統功能設計 127

6.2.2  系統功能結構圖 127

6.3  游戲娛樂網站系統運行 128

6.3.1  系統文件結構 128

6.3.2  運行系統 129

6.4  系統主要功能實現 130

6.4.1  登錄頁面的實現 130

6.4.2  註冊頁面的實現 132

6.4.3  首頁的實現 133

6.4.4  游戲詳情頁面的實現 137

6.4.5  游戲列表頁面的實現 141

6.4.6  我的收藏頁面的實現 141

6.5  本章小結 142

第7章  在線教育網站系統 143

7.1  項目環境及框架 144

7.1.1  系統開發環境要求 144

7.1.2  軟件框架 144

7.2  系統分析 145

7.2.1  系統功能設計 145

7.2.2  系統功能結構圖 145

7.3  在線教育網站系統運行 146

7.3.1  系統文件結構 146

7.3.2  運行系統 147

7.4  系統主要功能實現 149

7.4.1  首頁的實現 149

7.4.2  課程列表頁面的實現 156

7.4.3  合作院校頁面的實現 158

7.4.4  高職課堂頁面的實現 159

7.4.5  課程詳情頁面的實現 160

7.4.6  登錄註冊頁面的實現 162

7.5  本章小結 168

第8章  物流運輸管理系統 169

8.1  項目環境及框架 170

8.1.1  系統開發環境要求 170

8.1.2  軟件框架 170

8.2  系統分析 171

8.2.1  系統功能設計 171

8.2.2  系統功能結構圖 171

8.3  物流運輸管理系統運行 172

8.3.1  系統文件結構 172

8.3.2  運行系統 173

8.4  系統主要功能實現 174

8.4.1  登錄頁面的實現 174

8.4.2  註冊頁面的實現 176

8.4.3  工作台頁面的實現 177

8.4.4  物流管理頁面的實現 182

8.4.5  用戶管理頁面的實現 186

8.5  本章小結 187

第9章  圖書管理系統 189

9.1  項目環境及框架 190

9.1.1  系統開發環境要求 190

9.1.2  軟件框架 190

9.2  系統分析 191

9.2.1  系統功能設計 191

9.2.2  系統功能結構圖 191

9.3  圖書管理系統運行 192

9.3.1  系統文件結構 192

9.3.2  運行系統 193

9.4  系統主要功能實現 194

9.4.1  登錄頁面的實現 194

9.4.2  註冊頁面的實現 196

9.4.3  首頁的實現 196

9.4.4  個人中心頁面的實現 202

9.4.5  書籍管理頁面的實現 204

9.4.6  用戶管理頁面的實現 207

9.5  本章小結 207

第10章  咖啡館網站系統 209

10.1  項目環境及框架 210

10.1.1  系統開發環境要求 210

10.1.2  軟件框架 210

10.2  系統分析 211

10.2.1  系統功能設計 211

10.2.2  系統功能結構圖 211

10.3  咖啡館網站系統運行 212

10.3.1  系統文件結構 212

10.3.2  運行系統 213

10.4  系統主要功能實現 214

10.4.1  首頁的實現 214

10.4.2  商品列表頁面的實現 220

10.4.3  商品詳情頁面的實現 222

10.4.4  意見/投訴頁面的實現 224

10.4.5  登錄頁面的實現 226

10.4.6  註冊頁面的實現 227

10.5  本章小結 227

第11章  家庭裝修網站系統 229

11.1  項目環境及框架 230

11.1.1  系統開發環境要求 230

11.1.2  軟件框架 230

11.2  系統分析 231

11.2.1  系統功能設計 231

11.2.2  系統功能結構圖 231

11.3  家庭裝修網站系統運行 232

11.3.1  系統文件結構 232

11.3.2  運行系統 233

11.4  系統主要功能實現 234

11.4.1  首頁的實現 235

11.4.2  關於我們頁面的實現 242

11.4.3  新聞資訊頁面的實現 244

11.4.4  經典案例頁面的實現 245

11.4.5  合作與支持頁面的實現 246

11.5  本章小結 248

第12章  訂票系統 249

12.1  項目環境及框架 250

12.1.1  系統開發環境要求 250

12.1.2  軟件框架 250

12.2  系統分析 251

12.2.1  系統功能設計 251

12.2.2  系統功能結構圖 251

12.3  訂票系統運行 252

12.3.1  系統文件結構 252

12.3.2  運行系統 253

12.4  系統主要功能實現 254

12.4.1  在線購票頁面的實現 254

12.4.2  車次列表頁面的實現 260

12.4.3  在線搶票頁面的實現 262

12.4.4  我的訂單頁面的實現 264

12.4.5  訂單詳情頁面的實現 267

12.4.6  我的信息頁面的實現 268

12.5  本章小結 268

第13章  財務管理系統 269

13.1  項目環境及框架 270

13.1.1  系統開發環境要求 270

13.1.2  軟件框架 270

13.2  系統分析 271

13.2.1  系統功能設計 271

13.2.2  系統功能結構圖 271

13.3  財務管理系統運行 272

13.3.1  系統文件結構 272

13.3.2  運行系統 273

13.4  系統主要功能實現 274

13.4.1  登錄頁面的實現 274

13.4.2  註冊頁面的實現 276

13.4.3  營收分析頁面的實現 278

13.4.4  審批列表頁面的實現 280

13.4.5  預算列表頁面的實現 281

13.5  本章小結 284

第14章  項目信息化管理系統 285

14.1  項目環境及框架 286

14.1.1  系統開發環境要求 286

14.1.2  軟件框架 286

14.2  系統分析 287

14.2.1  系統功能設計 287

14.2.2  系統功能結構圖 287

14.3  項目信息化管理系統運行 288

14.3.1  系統文件結構 288

14.3.2  運行系統 289

14.4  系統主要功能實現 290

14.4.1  登錄頁面的實現 290

14.4.2  註冊頁面的實現 292

14.4.3  首頁的實現 292

14.4.4  我的項目頁面的實現 296

14.4.5  項目跟進頁面的實現 299

14.4.6  項目報備頁面的實現 303

14.5  本章小結 303

第15章  辦公自動化系統 305

15.1  項目環境及框架 306

15.1.1  系統開發環境要求 306

15.1.2  軟件框架 306

15.2  系統分析 307

15.2.1  系統功能設計 307

15.2.2  系統功能結構圖 307

15.3  辦公自動化系統運行 308

15.3.1  系統文件結構 308

15.3.2  運行系統 309

15.4  系統主要功能實現 310

15.4.1  登錄頁面的實現 310

15.4.2  概況頁面的實現 312

15.4.3  員工信息頁面的實現 316

15.4.4  招聘崗位頁面的實現 318

15.4.5  招聘者信息頁面的實現 318

15.4.6  考勤信息頁面的實現 319

15.4.7  簽到信息頁面的實現 319

15.5  本章小結 320