黨的二十大報(bào)告提出實(shí)施科教興國(guó)戰(zhàn)略，強(qiáng)化現(xiàn)代化建設(shè)人才支撐。深入實(shí)施人才強(qiáng)國(guó)戰(zhàn)略，培養(yǎng)造就大批德才兼?zhèn)涞母咚刭|(zhì)人才，是國(guó)家和民族長(zhǎng)遠(yuǎn)發(fā)展的大計(jì)。為貫徹落實(shí)黨的二十大精神，筑牢政治思想之魂，編者在牢牢把握這個(gè)原則的基礎(chǔ)上編寫了本書。
信創(chuàng)作為國(guó)家的戰(zhàn)略性發(fā)展方向，近兩年得到了長(zhǎng)足發(fā)展，尤其是在當(dāng)前大環(huán)境下，信創(chuàng)產(chǎn)業(yè)已成為國(guó)家信息產(chǎn)業(yè)的重點(diǎn)方向之一，因此，在信創(chuàng)技術(shù)平臺(tái)下進(jìn)行項(xiàng)目開(kāi)發(fā)也成了學(xué)習(xí)的重點(diǎn)。
Vue.js是當(dāng)下火熱的前端開(kāi)發(fā)技術(shù)之一，廣泛用于Web開(kāi)發(fā)和單頁(yè)面應(yīng)用程序，很容易與其他項(xiàng)目和庫(kù)集成，使用起來(lái)也非常簡(jiǎn)單。即使是初學(xué)者，也可以輕松理解Vue.js，并構(gòu)建自己的用戶界面。
本書涵蓋基礎(chǔ)知識(shí)和項(xiàng)目實(shí)戰(zhàn)，專為初學(xué)者和專業(yè)人士設(shè)計(jì)。本書基于當(dāng)前最新的Vue.js 3.0版本進(jìn)行編寫。本書分為11章，主要內(nèi)容如下。
第1章介紹信創(chuàng)技術(shù)的發(fā)展情況，包括基于統(tǒng)信UOS開(kāi)發(fā)環(huán)境的建立、Vue的基本概念，以及如何創(chuàng)建基于Vue CLI的項(xiàng)目。
第2章完整介紹Vue實(shí)例對(duì)象的創(chuàng)建方式、Vue模板語(yǔ)法、數(shù)據(jù)綁定以及常用內(nèi)置指令的使用。
第3章詳細(xì)介紹Vue的事件機(jī)制、Vue組件的創(chuàng)建和注冊(cè)、父子組件數(shù)據(jù)傳遞，以及Vue的生命周期鉤子函數(shù)。
第4章主要介紹Vue全局API的使用、Vue常用實(shí)例屬性的使用，以及Vue全局配置。
第5章介紹Vue中使用過(guò)渡和動(dòng)畫對(duì)頁(yè)面進(jìn)行渲染。
第6章詳細(xì)介紹Vue中路由的基本概念、路由對(duì)象的屬性、VueRouter的基本使用。
第7章主要介紹Vuex的下載和安裝、Vuex的5個(gè)核心對(duì)象，以及如何利用Vuex進(jìn)行狀態(tài)管理。
第8章主要講解Vue CLI的安裝和基本使用、CLI插件及其相關(guān)配置。
第9章講解服務(wù)器端渲染的概念及使用、客戶端渲染和服務(wù)器端渲染的區(qū)別。
第10章講解與信創(chuàng)相關(guān)的前端靜態(tài)資源服務(wù)器Tengine的安裝及項(xiàng)目的部署方式。
第11章通過(guò)新聞Web App項(xiàng)目的開(kāi)發(fā)對(duì)ElementUI、Vuex、VueRouter、axios等前端庫(kù)和組件庫(kù)及插件的使用方法進(jìn)行綜合演示。
第1～7章的內(nèi)容相對(duì)容易，剛?cè)腴TVue.js的開(kāi)發(fā)者也能很快掌握。
第8～11章首先介紹Vue CLI，然后充分利用Vue.js的基礎(chǔ)知識(shí)完成實(shí)戰(zhàn)項(xiàng)目的開(kāi)發(fā)。
本書特色
●包含信創(chuàng)技術(shù)體系知識(shí)，有助于讀者在新平臺(tái)下學(xué)習(xí)開(kāi)發(fā)。
●針對(duì)Vue的使用者，是前端開(kāi)發(fā)的書籍。
●從介紹到使用再到實(shí)戰(zhàn)，可以作為一本Vue使用手冊(cè)。
●代碼清晰、迭代完整，便于讀者完整、全面地掌握和學(xué)習(xí)Vue。
●注重從實(shí)戰(zhàn)經(jīng)驗(yàn)方面進(jìn)行講解，非常實(shí)用。
閱讀指南
本書基礎(chǔ)內(nèi)容和實(shí)戰(zhàn)項(xiàng)目共存，適用于剛接觸信創(chuàng)技術(shù)并對(duì)Vue.js的前端或后端有興趣的開(kāi)發(fā)者。當(dāng)然，有一定Vue.js或信創(chuàng)技術(shù)開(kāi)發(fā)經(jīng)驗(yàn)的讀者也能從中收獲不少實(shí)戰(zhàn)經(jīng)驗(yàn)。
本書要求讀者已經(jīng)了解和掌握HTML和CSS的相關(guān)知識(shí)，并有一定的JavaScript語(yǔ)法基礎(chǔ)，同時(shí)對(duì)Linux知識(shí)有一定程度的認(rèn)知，否則閱讀本書會(huì)有一定的難度。
使用本書要求
本書第1～7章中的示例只需要一臺(tái)獨(dú)立的計(jì)算機(jī)，用于信創(chuàng)環(huán)境的搭建，包括瀏覽器和編譯器兩個(gè)環(huán)境，瀏覽器以Chrome為例進(jìn)行演示；第8～11章中的示例需要讀者了解并安裝Node.js和Vue CLI,開(kāi)發(fā)工具可使用Visual Studio Code或者WebStorm。
其他
盡管我們希望在最大程度上做到盡善盡美，但錯(cuò)誤依然在所難免。
讀者如對(duì)本書有任何疑問(wèn)，均可發(fā)送郵件至511167169@qq.com,我們將竭誠(chéng)為您服務(wù)。
編者2023年7月
第1章統(tǒng)信UOS環(huán)境搭建1
1.1統(tǒng)信UOS概述2
1.1.1統(tǒng)信概述2
1.1.2功能列表3
1.1.3統(tǒng)信UOS應(yīng)用商店6
1.2使用U盤安裝統(tǒng)信UOS7
1.2.1UOS鏡像的下載8
1.2.2安裝前準(zhǔn)備8
1.2.3正式安裝（推薦全盤
安裝）10
1.2.4啟動(dòng)及激活16
1.3初識(shí)Vue.js18
1.3.1前端技術(shù)的發(fā)展18
1.3.2什么是Vue.js19
1.4Vue開(kāi)發(fā)環(huán)境安裝和配置21
1.4.1Vue下載和引入21
1.4.2Node.js安裝及環(huán)境
配置22
1.4.3npm包管理工具25
1.4.4Vue入門程序
Hello Vue.js26
1.5使用WebStorm創(chuàng)建Vue
項(xiàng)目28
1.6解讀Vue項(xiàng)目文件目錄
結(jié)構(gòu)31
1.7綜合案例實(shí)現(xiàn)簡(jiǎn)單邏輯
計(jì)算器32
本章小結(jié)34
經(jīng)典面試題35
上機(jī)練習(xí)35
第2章Vue實(shí)例、數(shù)據(jù)綁定及指令36
2.1Vue實(shí)例37
2.1.1創(chuàng)建Vue實(shí)例37
2.1.2el參數(shù)37
2.1.3data數(shù)據(jù)對(duì)象38
2.1.4methods實(shí)例方法39
2.1.5computed屬性41
2.1.6watch狀態(tài)監(jiān)聽(tīng)43
2.2Vue數(shù)據(jù)綁定45
2.2.1屬性綁定46
2.2.2雙向數(shù)據(jù)綁定47
2.3Vue指令48
2.3.1vmodel49
2.3.2vtext52
2.3.3vhtml53
2.3.4vbind54
2.3.5von55
2.3.6vif57
2.3.7vshow59
2.3.8vfor62
2.4綜合案例實(shí)現(xiàn)購(gòu)物清單
功能65
本章小結(jié)66
經(jīng)典面試題67
上機(jī)練習(xí)67
第3章Vue事件、組件及生命周期68
3.1Vue事件69
3.1.1事件監(jiān)聽(tīng)69
3.1.2事件修飾符703.1.3按鍵修飾符71
3.2Vue組件72
3.2.1什么是組件72
3.2.2局部注冊(cè)組件73
3.2.3組件之間的數(shù)據(jù)
傳遞75
3.2.4組件切換81
3.3Vue生命周期83
3.3.1鉤子函數(shù)83
3.3.2實(shí)例創(chuàng)建84
3.3.3頁(yè)面掛載85
3.3.4數(shù)據(jù)更新87
3.3.5實(shí)例銷毀89
本章小結(jié)92
經(jīng)典面試題92
上機(jī)練習(xí)92
第4章Vue全局API及實(shí)例屬性93
4.1全局API94
4.1.1自定義全局指令94
4.1.2使用插件95
4.1.3組件構(gòu)造器97
4.1.4設(shè)置值98
4.1.5全局注冊(cè)混入100
4.2實(shí)例屬性101
4.2.1vm.$el102
4.2.2vm.$data103
4.2.3vm.$options104
4.2.4vm.$root105
4.2.5vm.$children106
4.2.6vm.$slots108
4.3全局配置110
4.3.1silent110
4.3.2devtools111
4.3.3productionTip112
4.4組件進(jìn)階113
4.4.1mixins113
4.4.2render115
4.4.3createElement117
本章小結(jié)119
經(jīng)典面試題119
上機(jī)練習(xí)119
第5章Vue過(guò)渡和動(dòng)畫120
5.1過(guò)渡與動(dòng)畫121
5.1.1了解過(guò)渡與動(dòng)畫121
5.1.2transition組件121
5.2單元素/組件的過(guò)渡124
5.2.1使用@keyframes
創(chuàng)建CSS動(dòng)畫124
5.2.2animate.css結(jié)合
transition實(shí)現(xiàn)動(dòng)畫 …126
5.2.3鉤子函數(shù)實(shí)現(xiàn)
動(dòng)畫128
5.3多個(gè)元素的過(guò)渡130
5.3.1不同標(biāo)簽名元素的
過(guò)渡130
5.3.2相同標(biāo)簽名元素的
過(guò)渡132
5.4多個(gè)組件的過(guò)渡133
5.5列表過(guò)渡135
5.5.1什么是列表過(guò)渡135
5.5.2列表的進(jìn)入和離開(kāi)
過(guò)渡135
5.5.3列表的排序過(guò)渡138
本章小結(jié)140
經(jīng)典面試題140
上機(jī)練習(xí)141
第6章Vue路由142
6.1初識(shí)路由143
6.1.1后端路由143
6.1.2前端路由143
6.2Vue Router144
6.2.1Vue Router的工作
原理144
6.2.2Vue Router的安裝和
使用145
6.2.3路由對(duì)象的屬性148
6.3動(dòng)態(tài)路由148
6.3.1什么是動(dòng)態(tài)路由148
6.3.2query方式傳參149
6.3.3params方式傳參151
6.4嵌套路由153
6.4.1什么是嵌套路由153
6.4.2嵌套路由案例154
6.5程序化導(dǎo)航157
6.5.1頁(yè)面導(dǎo)航的兩種
方式157
6.5.2router.push（）157
6.5.3router.go（）160
6.6命名路由161
6.6.1什么是命名路由161
6.6.2綜合案例161
6.7命名視圖163
6.7.1什么是命名視圖163
6.7.2綜合案例163
本章小結(jié)166
經(jīng)典面試題166
上機(jī)練習(xí)166
第7章Vuex狀態(tài)管理167
7.1初識(shí)Vuex168
7.1.1什么是Vuex168
7.1.2狀態(tài)管理模式169
7.1.3Vuex的下載和
安裝170
7.2核心概念172
7.2.1state172
7.2.2getters175
7.2.3mutations177
7.2.4actions178
7.2.5module180
7.3Vuex中的API185
7.3.1模塊注冊(cè)185
7.3.2狀態(tài)替換186
7.4綜合案例實(shí)現(xiàn)購(gòu)物車
功能187
7.4.1案例分析187
7.4.2代碼實(shí)現(xiàn)188
本章小結(jié)196
經(jīng)典面試題196
上機(jī)練習(xí)196
第8章Vue CLI（Vue腳手架）197
8.1初識(shí)Vue CLI198
8.1.1安裝前的注意事項(xiàng) … 198
8.1.2全局安裝@vue/CLI … 198
8.1.3使用vue create命令
創(chuàng)建項(xiàng)目 198
8.1.4使用GUI創(chuàng)建
項(xiàng)目200
8.2插件204
8.2.1CLI插件204
8.2.2安裝插件204
8.3CLI服務(wù)和配置文件205
8.3.1CLI服務(wù)205
8.3.2配置文件207
8.3.3配置多頁(yè)應(yīng)用209
8.4環(huán)境變量和模式212
8.4.1環(huán)境變量212
8.4.2模式213
8.5靜態(tài)資源管理214
8.5.1相對(duì)路徑引入靜態(tài)
資源214
8.5.2public目錄引入靜態(tài)
資源215
8.6綜合案例使用Vue CLI
快速創(chuàng)建Vue項(xiàng)目215
8.6.1項(xiàng)目配置215
8.6.2安裝插件218
本章小結(jié)220
經(jīng)典面試題220
上機(jī)練習(xí)221
第9章服務(wù)器端渲染222
9.1初識(shí)服務(wù)器端渲染223
9.1.1客戶端渲染與服務(wù)
器端渲染的區(qū)別223
9.1.2服務(wù)器端渲染的
注意事項(xiàng)224
9.2服務(wù)器端渲染的簡(jiǎn)單
實(shí)現(xiàn)224
9.2.1創(chuàng)建vuessr項(xiàng)目224
9.2.2渲染Vue實(shí)例225
9.2.3Express搭建SSR …225
9.2.4Koa搭建SSR227
9.3webpack搭建服務(wù)器端
渲染229
9.3.1基本流程229
9.3.2項(xiàng)目搭建229
9.4Nuxt.js服務(wù)器端渲染
框架234
9.4.1創(chuàng)建Nuxt.js項(xiàng)目 …234
9.4.2頁(yè)面和路由236
9.4.3頁(yè)面跳轉(zhuǎn)237
9.5綜合案例通過(guò)Node.js
Express實(shí)現(xiàn)Web服務(wù)器端
渲染238
本章小結(jié)241
經(jīng)典面試題241
上機(jī)練習(xí)241
第10章信創(chuàng)靜態(tài)資源服務(wù)器242
10.1Tengine服務(wù)器基礎(chǔ)243
10.1.1Tengine概述243
10.1.2Tengine下載及
安裝244
10.2靜態(tài)資源服務(wù)器基本
概念245
10.2.1Tengine服務(wù)器的
基本架構(gòu)及工作
特點(diǎn)245
10.2.2Tengine基礎(chǔ)概念 …246
10.3Tengine服務(wù)器的部署251
10.3.1Tengine平臺(tái)初
始化251
10.3.2Tengine主配置
文件說(shuō)明254
本章小結(jié)256
經(jīng)典面試題256
上機(jī)練習(xí)256
第11章綜合項(xiàng)目構(gòu)建電商后臺(tái)
管理系統(tǒng)257
11.1開(kāi)發(fā)準(zhǔn)備258
11.1.1項(xiàng)目展示258
11.1.2技術(shù)方案259
11.1.3項(xiàng)目開(kāi)發(fā)流程260
11.2項(xiàng)目搭建260
11.2.1使用vite構(gòu)建
Vue3項(xiàng)目260
11.2.2配置Element
Plus 261
11.2.3配置路由262
11.2.4配置ElementPlus
圖標(biāo)264
11.2.5引入less265
11.2.6配置vuex265
11.2.7配置mock.js266
11.2.8二次封裝axios …268
11.2.9目錄結(jié)構(gòu)272
11.3頁(yè)面的布局結(jié)構(gòu)273
11.3.1頂部標(biāo)簽欄273
11.3.2左側(cè)菜單欄275
11.3.3tag標(biāo)簽276
11.3.4模塊頁(yè)面區(qū)279
11.3.5頁(yè)面結(jié)構(gòu)組合
效果280
11.4登錄頁(yè)面281
11.4.1動(dòng)態(tài)路由的
實(shí)現(xiàn)281
11.4.2登錄退出功能的
實(shí)現(xiàn)281
11.4.3路由守衛(wèi)的
實(shí)現(xiàn)282
11.5首頁(yè)283
11.5.1用戶信息283
11.5.2數(shù)據(jù)展示284
11.5.3折線圖（Echart
表格）286
11.5.4柱狀圖（Echart
表格）289
11.5.5餅狀圖（Echart
表格）291
11.6用戶管理292
11.6.1獲取用戶數(shù)據(jù)292
11.6.2用戶的分頁(yè)
實(shí)現(xiàn)295
11.6.3用戶數(shù)據(jù)的增刪
改查296
本章小結(jié)303
經(jīng)典面試題304
書單推薦
