黨的二十大報告提出實施科教興國戰(zhàn)略，強化現(xiàn)代化建設(shè)人才支撐。深入實施人才強國戰(zhàn)略，培養(yǎng)造就大批德才兼?zhèn)涞母咚刭|(zhì)人才，是國家和民族長遠發(fā)展的大計。為貫徹落實黨的二十大精神，筑牢政治思想之魂，編者在牢牢把握這個原則的基礎(chǔ)上編寫了本書。
信創(chuàng)作為國家的戰(zhàn)略性發(fā)展方向，近兩年得到了長足發(fā)展，尤其是在當前大環(huán)境下，信創(chuàng)產(chǎn)業(yè)已成為國家信息產(chǎn)業(yè)的重點方向之一，因此，在信創(chuàng)技術(shù)平臺下進行項目開發(fā)也成了學(xué)習(xí)的重點。
Vue.js是當下火熱的前端開發(fā)技術(shù)之一，廣泛用于Web開發(fā)和單頁面應(yīng)用程序，很容易與其他項目和庫集成，使用起來也非常簡單。即使是初學(xué)者，也可以輕松理解Vue.js，并構(gòu)建自己的用戶界面。
本書涵蓋基礎(chǔ)知識和項目實戰(zhàn)，專為初學(xué)者和專業(yè)人士設(shè)計。本書基于當前最新的Vue.js 3.0版本進行編寫。本書分為11章，主要內(nèi)容如下。
第1章介紹信創(chuàng)技術(shù)的發(fā)展情況，包括基于統(tǒng)信UOS開發(fā)環(huán)境的建立、Vue的基本概念，以及如何創(chuàng)建基于Vue CLI的項目。
第2章完整介紹Vue實例對象的創(chuàng)建方式、Vue模板語法、數(shù)據(jù)綁定以及常用內(nèi)置指令的使用。
第3章詳細介紹Vue的事件機制、Vue組件的創(chuàng)建和注冊、父子組件數(shù)據(jù)傳遞，以及Vue的生命周期鉤子函數(shù)。
第4章主要介紹Vue全局API的使用、Vue常用實例屬性的使用，以及Vue全局配置。
第5章介紹Vue中使用過渡和動畫對頁面進行渲染。
第6章詳細介紹Vue中路由的基本概念、路由對象的屬性、VueRouter的基本使用。
第7章主要介紹Vuex的下載和安裝、Vuex的5個核心對象，以及如何利用Vuex進行狀態(tài)管理。
第8章主要講解Vue CLI的安裝和基本使用、CLI插件及其相關(guān)配置。
第9章講解服務(wù)器端渲染的概念及使用、客戶端渲染和服務(wù)器端渲染的區(qū)別。
第10章講解與信創(chuàng)相關(guān)的前端靜態(tài)資源服務(wù)器Tengine的安裝及項目的部署方式。
第11章通過新聞Web App項目的開發(fā)對ElementUI、Vuex、VueRouter、axios等前端庫和組件庫及插件的使用方法進行綜合演示。
第1～7章的內(nèi)容相對容易，剛?cè)腴TVue.js的開發(fā)者也能很快掌握。
第8～11章首先介紹Vue CLI，然后充分利用Vue.js的基礎(chǔ)知識完成實戰(zhàn)項目的開發(fā)。
本書特色
●包含信創(chuàng)技術(shù)體系知識，有助于讀者在新平臺下學(xué)習(xí)開發(fā)。
●針對Vue的使用者，是前端開發(fā)的書籍。
●從介紹到使用再到實戰(zhàn)，可以作為一本Vue使用手冊。
●代碼清晰、迭代完整，便于讀者完整、全面地掌握和學(xué)習(xí)Vue。
●注重從實戰(zhàn)經(jīng)驗方面進行講解，非常實用。
閱讀指南
本書基礎(chǔ)內(nèi)容和實戰(zhàn)項目共存，適用于剛接觸信創(chuàng)技術(shù)并對Vue.js的前端或后端有興趣的開發(fā)者。當然，有一定Vue.js或信創(chuàng)技術(shù)開發(fā)經(jīng)驗的讀者也能從中收獲不少實戰(zhàn)經(jīng)驗。
本書要求讀者已經(jīng)了解和掌握HTML和CSS的相關(guān)知識，并有一定的JavaScript語法基礎(chǔ)，同時對Linux知識有一定程度的認知，否則閱讀本書會有一定的難度。
使用本書要求
本書第1～7章中的示例只需要一臺獨立的計算機，用于信創(chuàng)環(huán)境的搭建，包括瀏覽器和編譯器兩個環(huán)境，瀏覽器以Chrome為例進行演示；第8～11章中的示例需要讀者了解并安裝Node.js和Vue CLI,開發(fā)工具可使用Visual Studio Code或者WebStorm。
其他
盡管我們希望在最大程度上做到盡善盡美，但錯誤依然在所難免。
讀者如對本書有任何疑問，均可發(fā)送郵件至511167169@qq.com,我們將竭誠為您服務(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安裝前準備8
1.2.3正式安裝（推薦全盤
安裝）10
1.2.4啟動及激活16
1.3初識Vue.js18
1.3.1前端技術(shù)的發(fā)展18
1.3.2什么是Vue.js19
1.4Vue開發(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
項目28
1.6解讀Vue項目文件目錄
結(jié)構(gòu)31
1.7綜合案例實現(xiàn)簡單邏輯
計算器32
本章小結(jié)34
經(jīng)典面試題35
上機練習(xí)35
第2章Vue實例、數(shù)據(jù)綁定及指令36
2.1Vue實例37
2.1.1創(chuàng)建Vue實例37
2.1.2el參數(shù)37
2.1.3data數(shù)據(jù)對象38
2.1.4methods實例方法39
2.1.5computed屬性41
2.1.6watch狀態(tài)監(jiān)聽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綜合案例實現(xiàn)購物清單
功能65
本章小結(jié)66
經(jīng)典面試題67
上機練習(xí)67
第3章Vue事件、組件及生命周期68
3.1Vue事件69
3.1.1事件監(jiān)聽69
3.1.2事件修飾符703.1.3按鍵修飾符71
3.2Vue組件72
3.2.1什么是組件72
3.2.2局部注冊組件73
3.2.3組件之間的數(shù)據(jù)
傳遞75
3.2.4組件切換81
3.3Vue生命周期83
3.3.1鉤子函數(shù)83
3.3.2實例創(chuàng)建84
3.3.3頁面掛載85
3.3.4數(shù)據(jù)更新87
3.3.5實例銷毀89
本章小結(jié)92
經(jīng)典面試題92
上機練習(xí)92
第4章Vue全局API及實例屬性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全局注冊混入100
4.2實例屬性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組件進階113
4.4.1mixins113
4.4.2render115
4.4.3createElement117
本章小結(jié)119
經(jīng)典面試題119
上機練習(xí)119
第5章Vue過渡和動畫120
5.1過渡與動畫121
5.1.1了解過渡與動畫121
5.1.2transition組件121
5.2單元素/組件的過渡124
5.2.1使用@keyframes
創(chuàng)建CSS動畫124
5.2.2animate.css結(jié)合
transition實現(xiàn)動畫 …126
5.2.3鉤子函數(shù)實現(xiàn)
動畫128
5.3多個元素的過渡130
5.3.1不同標簽名元素的
過渡130
5.3.2相同標簽名元素的
過渡132
5.4多個組件的過渡133
5.5列表過渡135
5.5.1什么是列表過渡135
5.5.2列表的進入和離開
過渡135
5.5.3列表的排序過渡138
本章小結(jié)140
經(jīng)典面試題140
上機練習(xí)141
第6章Vue路由142
6.1初識路由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路由對象的屬性148
6.3動態(tài)路由148
6.3.1什么是動態(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頁面導(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
上機練習(xí)166
第7章Vuex狀態(tài)管理167
7.1初識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模塊注冊185
7.3.2狀態(tài)替換186
7.4綜合案例實現(xiàn)購物車
功能187
7.4.1案例分析187
7.4.2代碼實現(xiàn)188
本章小結(jié)196
經(jīng)典面試題196
上機練習(xí)196
第8章Vue CLI（Vue腳手架）197
8.1初識Vue CLI198
8.1.1安裝前的注意事項 … 198
8.1.2全局安裝@vue/CLI … 198
8.1.3使用vue create命令
創(chuàng)建項目 198
8.1.4使用GUI創(chuà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ī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相對路徑引入靜態(tài)
資源214
8.5.2public目錄引入靜態(tài)
資源215
8.6綜合案例使用Vue CLI
快速創(chuàng)建Vue項目215
8.6.1項目配置215
8.6.2安裝插件218
本章小結(jié)220
經(jīng)典面試題220
上機練習(xí)221
第9章服務(wù)器端渲染222
9.1初識服務(wù)器端渲染223
9.1.1客戶端渲染與服務(wù)
器端渲染的區(qū)別223
9.1.2服務(wù)器端渲染的
注意事項224
9.2服務(wù)器端渲染的簡單
實現(xiàn)224
9.2.1創(chuàng)建vuessr項目224
9.2.2渲染Vue實例225
9.2.3Express搭建SSR …225
9.2.4Koa搭建SSR227
9.3webpack搭建服務(wù)器端
渲染229
9.3.1基本流程229
9.3.2項目搭建229
9.4Nuxt.js服務(wù)器端渲染
框架234
9.4.1創(chuàng)建Nuxt.js項目 …234
9.4.2頁面和路由236
9.4.3頁面跳轉(zhuǎn)237
9.5綜合案例通過Node.js
Express實現(xiàn)Web服務(wù)器端
渲染238
本章小結(jié)241
經(jīng)典面試題241
上機練習(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)及工作
特點245
10.2.2Tengine基礎(chǔ)概念 …246
10.3Tengine服務(wù)器的部署251
10.3.1Tengine平臺初
始化251
10.3.2Tengine主配置
文件說明254
本章小結(jié)256
經(jīng)典面試題256
上機練習(xí)256
第11章綜合項目構(gòu)建電商后臺
管理系統(tǒng)257
11.1開發(fā)準備258
11.1.1項目展示258
11.1.2技術(shù)方案259
11.1.3項目開發(fā)流程260
11.2項目搭建260
11.2.1使用vite構(gòu)建
Vue3項目260
11.2.2配置Element
Plus 261
11.2.3配置路由262
11.2.4配置ElementPlus
圖標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頁面的布局結(jié)構(gòu)273
11.3.1頂部標簽欄273
11.3.2左側(cè)菜單欄275
11.3.3tag標簽276
11.3.4模塊頁面區(qū)279
11.3.5頁面結(jié)構(gòu)組合
效果280
11.4登錄頁面281
11.4.1動態(tài)路由的
實現(xiàn)281
11.4.2登錄退出功能的
實現(xiàn)281
11.4.3路由守衛(wèi)的
實現(xiàn)282
11.5首頁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用戶的分頁
實現(xiàn)295
11.6.3用戶數(shù)據(jù)的增刪
改查296
本章小結(jié)303
經(jīng)典面試題304
書單推薦
