《終端數(shù)據(jù)可視化》課件-4 前端框架

單元4前端框架大數(shù)據(jù)可視化應用開發(fā)項目式教程單元描述1.技術(shù)要求：（1）會搭建Vue.js開發(fā)環(huán)境；（2）會使用搭建腳手架構(gòu)建Web項目；（3）會創(chuàng)建組件；（4）會使用Vue-Router實現(xiàn)動態(tài)頁面切換；（5）會使用Axios實現(xiàn)Json數(shù)據(jù)的讀取；（6）會利用Vue.js實現(xiàn)Json數(shù)據(jù)的呈現(xiàn)。2.能力要求：（1）熟練掌握Node.js及Vue.js安裝；（2）熟練使用腳手架構(gòu)建項目；（3）熟練掌握組件創(chuàng)建的方法；（4）熟練掌握Vue.js中Axios訪問數(shù)據(jù)方法，能夠獲取Json文件的數(shù)據(jù)；（5）熟練掌握Vue.js的基本原理，如模板、數(shù)據(jù)、方法與事件等；（6）熟練掌握內(nèi)置指令的使用，如數(shù)據(jù)綁定、條件渲染、列表渲染、事件處理等。3.素養(yǎng)要求：（1）具有較強的程序調(diào)試能力；（2）具備較強的網(wǎng)站規(guī)劃和建設能力；（3）具有較強的Web前端的設計、開發(fā)、調(diào)試及維護能力。新能源汽車可視化監(jiān)測平臺的前端功能中有很多共性的部分，使用傳統(tǒng)的開發(fā)方式存在代碼的重復，不易維護。當前涌現(xiàn)出的很多優(yōu)秀的框架實現(xiàn)了功能分層，提高了用戶對數(shù)據(jù)處理能力，能及時響應和交互能力，具有較好數(shù)據(jù)安全機制，可以使開發(fā)達到事半功倍的效果。本項目中結(jié)合實際業(yè)務需求，選用了輕量級響應式框架Vue.js完成了對項目基本框架的構(gòu)建，并在已建的框架中完成用戶基礎(chǔ)數(shù)據(jù)的顯示：將當前用戶的相關(guān)信息在頁面中呈現(xiàn)，頁面的最終設計效果圖如圖4-2所示。1圖4-1新能源汽車用戶信息頁面任務分解2知識要點前端框架簡介Vue.js安裝Webpack構(gòu)建項目Vue.js基礎(chǔ)常用插件任務名稱任務目標安排課時任務4.1搭建開發(fā)環(huán)境完成Vue.js安裝；使用腳手架搭建的項目2任務4.2新能源汽車大數(shù)據(jù)分析系統(tǒng)路由與組件設計完成本系統(tǒng)組件的構(gòu)建；使用Vue-Router完成頁面管理2任務4.3車輛管理頁面的實現(xiàn)了解Vue.js基礎(chǔ)特性；使用Axios獲取Json數(shù)據(jù)4任務4.4動態(tài)頁面的實現(xiàn)使用列表渲染完成動態(tài)頁面2總計：10知識要點Web前端承擔著用戶與服務器信息交互的重任，隨著用戶體驗要求的不斷提升，用戶對數(shù)據(jù)處理能力、數(shù)據(jù)安全機制、及時響應及交互能力的要求越來越高，前端開發(fā)的模式也產(chǎn)生了新的變化。如今國內(nèi)外涌現(xiàn)出很多優(yōu)秀的前端框架，這些框架實現(xiàn)了功能分層，方便地進行功能修改，可以有效簡化Web前端開發(fā)流程，降低開發(fā)難度，提高開發(fā)效率，實現(xiàn)Web系統(tǒng)前、后端開發(fā)完全分離，提高了系統(tǒng)的靈活性及可擴展性。1.前端框架簡介Angular.js是由Google創(chuàng)建的一種JS框架，使用它可以擴展應用程序中的HTML，從而在web應用程序中使用HTML聲明動態(tài)內(nèi)容。Angular.js可以擴展HTML的語法，以便清晰、簡潔地表示應用程序中的組件并允許將標準的HTML作為模板語言，Angular.js可以通過雙向數(shù)據(jù)綁定自動從擁有JavaScript對象（模型）的UI（視圖）中同步數(shù)據(jù)，程序架構(gòu)如圖4-2所示。（1）Angular.js圖4-2Angular程序架構(gòu)目前比較流行的React.js、Angular.js、Vue.js，下面對常見的幾種框架進行比較。1.前端框架基礎(chǔ)React是一個用于構(gòu)建用戶界面的JavaScript庫，主要用于構(gòu)建UI，很多人認為React是MVC中的V（視圖）。React擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關(guān)注和使用它。React采用聲明范式，可以輕松描述應用；通過對DOM的模擬，最大限度地減少與DOM的交互，可以與已知的庫或框架很好地配合，通過React構(gòu)建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發(fā)中；實現(xiàn)了單向響應的數(shù)據(jù)流，從而減少了重復代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單，具體架構(gòu)如圖4-3所示。（2）React.js圖4-3React架構(gòu)1.前端框架簡介Vue.js是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是，Vue被設計為可以自底向上逐層應用。Vue.js的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。當與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue.js也完全能夠為復雜的單頁應用提供驅(qū)動。其主要特點是：雙向數(shù)據(jù)綁定，會自動對頁面中某些數(shù)據(jù)的變化做出同步的響應；使用組件化開發(fā)，把一個單頁應用中的各種模塊拆分到一個一個單獨的組件（component）中，只要先在父級應用中寫好各種組件標簽，并且在組件標簽中寫好要傳入組件的參數(shù)就可以完成整個應用。預先通過JavaScript進行各種計算，把最終的DOM操作計算出來并優(yōu)化，計算完畢才真正將DOM操作提交，將DOM操作變化反映到DOM樹上。與其他框架不同的是，Vue.js是一套構(gòu)建用戶界面的漸進式框架，采用自底向上增量開發(fā)的設計方式，是更加靈活、開放的解決方案，架構(gòu)更加簡單，適合開發(fā)人員快速掌握其全部特性并投入使用，還便于與第三方庫或既有項目整合。Vue.js響應式原理如圖4-4所示。相對于Angular.js和React.js而言，Vue.js的學習曲線比較平穩(wěn)，上手比較簡單，是比較可靠的MVVM框架選擇之一，因此在本書中使用Vue.js來構(gòu)建項目。（3）Vue.js圖4-4Vue.js響應式原理圖2.Vue.js安裝Vue.js開發(fā)版本地址為/js/vue.js，可以通過該地址下載至本地，在頁面中通過<script></script>標簽進行引入。（1）下載.js文件用<script>標簽引入與jQuery相類似，JavaScript框架的安裝方式基本有以下幾種：（2）使用CDN方法●BootCDN（國內(nèi)）：/vue/2.2.2/vue.min.js●unpkg：/vue/dist/vue.js，會保持和npm發(fā)布的最新的版本一致。（推薦使用）●cdnjs:/ajax/libs/vue/2.1.8/vue.min.js，如（<scriptsrc="/ajax/libs/vue/2.1.8/vue.min.js"></script>）2.Vue.js安裝用Vue.js構(gòu)建大型應用的時候推薦使用npm安裝方法，npm能很好的和諸如Webpack或者Browserify模塊打包器配合使用。Vue.js也提供配套工具來開發(fā)單文件組件。（3）NPM方法首先，先列出接下來需要的東西：●Node.js環(huán)境（npm包管理器）●vue-cli腳手架構(gòu)建工具●cnpmnpm的淘寶鏡像2.Vue.js安裝從Node.js官網(wǎng)（/en/）下載并安裝node，安裝過程很簡單，一直單擊“下一步”按鈕就可以完成安裝。安裝完之后，可以通過以管理員的身份打開命令行工具（右擊“Win”圖標，選擇“WindowsPowerShell（管理員）”命令），輸入node-v命令，查看node的版本，若出現(xiàn)相應的版本號，則說明安裝成功了，操作如圖4-5所示。①安裝Node.js圖4-5查看node版本npm包管理器是集成在node中的，所以安裝了node也就有了npm，直接輸入npm-v命令，顯示npm的版本信息，如圖4-6所示。圖4-6查看npm版本到目前為止，node的環(huán)境已經(jīng)安裝完成，npm包管理器也有了，由于有些npm資源被屏蔽或者是國外資源的原因，經(jīng)常會導致npm安裝依賴包的時候失敗，所以還需要npm的國內(nèi)鏡像--cnpm。2.Vue.js安裝在命令行中輸入：npminstall-gcnpm--registry=然后等待，沒報錯表示安裝成功（教材中cnpm已經(jīng)安裝過了，顯示更新成功的信息，如圖4-7所示）。②安裝cnpm圖4-7安裝cnpm在命令行中運行命令

npminstall-gvue-cli然后等待安裝完成，如圖4-8所示。圖4-8安裝vue-cli腳手架③安裝vue-cli腳手架構(gòu)建工具通過以上3個步驟，任務需要環(huán)境和工具都準備好了，接下來就可以使用vue-cli來構(gòu)建項目了。3.Webpack構(gòu)建項目模塊化開發(fā)中會編寫大量模塊，如果不打包就上線，頁面加載或交互時，將會發(fā)起大量請求。為了性能優(yōu)化，需要使用打包器對模塊進行打包整合，以減少請求數(shù)。Vue項目所有組件最終都將被打包到一個app.js中。webpack是一個現(xiàn)代JavaScript應用程序的靜態(tài)模塊打包器（modulebundler），可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)節(jié)部署的前端資源。它做的事情就是，分析項目結(jié)構(gòu)，找到js模塊以及其他的一些瀏覽器不能直接運行的拓展語言（Sass、typeScript等），并將其打包為適合的格式供瀏覽器使用。webpack的核心優(yōu)勢在于它從入口文件出發(fā)，遞歸構(gòu)建依賴關(guān)系圖。通過這樣的依賴梳理，webpack打包出的bundle不會包含重復或未使用的模塊，實現(xiàn)了按需打包，極大的減少了冗余。webpack的工作方式：把項目當做一個整體，通過一個給定的主文件（index.js）webpack將從這個文件開始找到項目的所有依賴文件，使用loaders處理它們，最后打包成一個可識別的js文件。在命令行中運行命令“vueinitwebpack項目名”即可完成項目的構(gòu)建（如圖4-9所示），具體構(gòu)建方法在任務4.1中將作詳細介紹。圖4-9使用Webpack構(gòu)建項目3.Webpack構(gòu)建項目項目創(chuàng)建完成后，可以通過npmrundev運行項目，如圖4-10所示。圖4-10運行項目項目啟動后，在瀏覽器中輸入項目啟動后的地址http://localhost:8080,在瀏覽器中會出現(xiàn)Vue的Logo，如圖4-11所示。圖4-11項目運行界面3.Webpack構(gòu)建項目打開項目目錄，可以看到已經(jīng)創(chuàng)建的相關(guān)文件夾及文件，如圖4-12所示，目錄及其作用如下：圖4-12項目目錄文件●build：最終發(fā)布代碼的存放位置?！馽onfig：配置路徑、端口號等一些信息，學生剛開始學習的時候選擇默認配置。●node_modules：npm加載的項目依賴模塊。●src：這里是開發(fā)的主要目錄，基本上要做的事情都在這個目錄里面，里面包含了幾個目錄及文件?！馻ssets：放置一些圖片，如Logo等?！馽omponents：目錄里放的是一個組件文件，可以不用。●App.vue：項目入口文件，也可以將組件寫在這里，而不使用components目錄?！駇ain.js：項目的核心文件?！駍tatic：靜態(tài)資源目錄，如圖片、字體等?！駎est：初始測試目錄，可刪除。●index.html：首頁入口文件，可以添加一些meta信息或者同統(tǒng)計代碼啥的?！駊ackage.json：項目配置文件?！馬EADME.md：項目的說明文件。注意：如果在項目無node_modules目錄可以通過執(zhí)行cnpminstall來完成安裝項目所需要的依賴。安裝完成之后，到自己的項目中去看，會多一個node_modules文件夾，這里面就是所需要的依賴包資源。4.Vue.js基礎(chǔ)無論前端框架如何變化，它所要處理的事情依舊是模板渲染、事件綁定、處理用戶交互，只是提供了不同的寫法和理念。（1）實例及選項每個Vue.js應用都需要通過實例化Vue.js來實現(xiàn)。語法格式如下：varvm=newVue({//選項})在實例化的時候，可以傳入一個選項對象，包含數(shù)據(jù)、模板、掛載元素、方法、生命周期、鉤子等選項?！衲０錠ue.js使用了基于HTML的模版語法，允許開發(fā)者聲明式地將DOM綁定至底層Vue實例的數(shù)據(jù)。Vue.js的核心是一個允許采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進DOM的系統(tǒng)。結(jié)合響應系統(tǒng)，在應用狀態(tài)改變時，Vue能夠智能地計算出重新渲染組件的最小代價并應用到DOM操作上。選項中主要影響模板或DOM選項有el和template，屬性replace和template需要一起使用。4.Vue.js基礎(chǔ)①元素選項1.<divid="app"></div>2.<script>3.varvm=newVue({4.el:"#app"5.});6.</script>el:類型為字符串，DOM元素或函數(shù)，其作用是為實例提供掛載元素。4.Vue.js基礎(chǔ)②Template類型為字符串，默認會將template值替換掛載元素（即el對應的元素）并合并掛載元素和模板要節(jié)點屬性。1.<!DOCTYPEhtml>2.<html>3.<head>4.<metacharset="utf-8">5.<title>libing.vue</title>6.<scriptsrc="node_modules/vue/dist/vue.min.js"></script>7.</head>8.<body>9.<divid="app">10.<h1>將被模板內(nèi)容替換</h1>11.</div>12.<templateid="tpl">13.<divclass="tpl">TodoList</div>14.</template>15.<script>16.varvm=newVue({17.el:"#app",18.template:"#tpl"19.});20.</script>21.</body>22.</html>4.Vue.js基礎(chǔ)●數(shù)據(jù)Vue.js實例中可以通過data屬性定義數(shù)據(jù)，這些數(shù)據(jù)可以在實例對應的模板中進行綁定并使用。注意：如果傳入data的是一個對象，Vue.js實例會代理起data對象里所有的屬性，而不會對傳入的對象進行深拷貝。另外，可以用Vue.js實例vm中的$data來獲取聲明的數(shù)據(jù)。1.<divid="app">{{title}}</div>2.<script>3.varvm=newVue({4.el:"#app",5.data:{title:"標題"}6.});7.</script>4.Vue.js基礎(chǔ)●生命周期的鉤子每個Vue.js實例創(chuàng)建時，都會經(jīng)歷一系列的初始化過程，調(diào)用相應的生命周期鉤子。①created：實例創(chuàng)建完成后調(diào)用，此階段完成數(shù)據(jù)監(jiān)測等，但尚未掛載，$el還不可用。②mounted：el掛載到實例后調(diào)用。1.<divid="app">{{title}}</div>2.<script>3.varvm=newVue({4.el:"#app",5.data:{6.title:"標題"7.},8.created(){9.console.log("Vueinstancehasbeencreated!");10.},11.mounted(){12.console.log("mounted:"+this.$el);13.} 14.});15.</script>4.Vue.js基礎(chǔ)（2）數(shù)據(jù)綁定Vue.js的核心是一個響應式的數(shù)據(jù)綁定系統(tǒng)，建立綁定后，DOM將和數(shù)據(jù)保持同步，這樣無需手動維護DOM，使代碼能夠更加簡潔易懂、提升效率?！裎谋静逯禂?shù)據(jù)綁定的基礎(chǔ)形式就是文本插值，通過data屬性定義數(shù)據(jù)，使用{{}}標簽在實例對應的模板中進行綁定并使用。<span>Hello,{{name}}</span>Vue.js實例vm中name屬性值會替換{{}}標簽中的name，并且修改數(shù)據(jù)對象中的name屬性，DOM也會隨之更新。4.Vue.js基礎(chǔ)●HTML插值{{}}：將數(shù)據(jù)中的HTML轉(zhuǎn)為純文本后再進行插值，使用v-html輸出HTML代碼。1.<divid="app">2.<divv-html="title"></div>3.</div>4.<script>5.varvm=newVue({6.el:"#app",7.data:{8.title:"<h1>Vue.js</h1>"9.}10.});11.</script>4.Vue.js基礎(chǔ)●屬性綁定在Vue模板中的HTML屬性上不能使用{{}}語法。HTML屬性中的值應使用v-bind指令。1.<divid="app">2.<divv-bind:title="title">Content</div>3.</div>4.<script>5.varvm=newVue({6.el:"#app",7.data:{8.title:"Vue.js"9.}10.});11.</script>4.Vue.js基礎(chǔ)●表達式綁定1.<divid="app">2.{{status?"是":"否"}}3.<divv-bind:title="status?'是':'否'">Content</div>4.</div>5.<script>6.varvm=newVue({7.el:"#app",8.data:{9.status:true10.}11.});12.</script>放在{{}}Mustache標簽內(nèi)的文本內(nèi)容稱為綁定表達式。除了直接輸出屬性外，一般綁定表達式可以由一個簡單的JavaScript表達式和可選的一個或多個過濾器構(gòu)成。注意：每個綁定中只能包含單個表達式，并不支持JavaScript語句，否則就會拋出異常，并且表達式里不支持正則表達式，如需要進行復雜的轉(zhuǎn)換，可以使用過濾器或計算屬性來進行處理。4.Vue.js基礎(chǔ)●過濾器Vue.js允許在表達式后添加可選的過濾器，以管道符“|”指示。Vue.js

1.0中內(nèi)置了10個過濾器。①Capitalize：字符串首字符轉(zhuǎn)化為大寫。②Uppercase：字符串轉(zhuǎn)化成大寫。③Lowercase：字符串轉(zhuǎn)化成小寫。④Currency：參數(shù)為{String}[貨幣符號]，{Number}[小數(shù)位]，將數(shù)字轉(zhuǎn)化成貨幣符號，并且會自動添加數(shù)字分節(jié)號。⑤Pluralize：參數(shù)為{String}single,[double,triple]，字符串復數(shù)化。如果接收的是一個參數(shù)，那復數(shù)形式就是在字符串末尾直接加一個“s”。如果接收多個參數(shù)，則會被當成數(shù)組處理，字符串會添加對應數(shù)組下標的值。如果字符串的個數(shù)多于參數(shù)個數(shù)，多出部分會都添加最后一個參數(shù)的值。⑥Json：參數(shù)為{Number}[indent]空格縮進數(shù)，與JSON.stringify()作用相同，將Json對象數(shù)據(jù)輸出成符合json格式的字符串。⑦debounce：傳入值必須是函數(shù)，參數(shù)可選，為{Number}[wait]，即延時時長。作用是當調(diào)用函數(shù)n毫秒后，才會執(zhí)行該動作，若在這n毫秒內(nèi)又調(diào)用此動作則將重新計算執(zhí)行時間。⑧l(xiāng)imitBy：傳入值必須是數(shù)組，參數(shù)為{Number}limit，{Number}[offset]，limit為顯示個數(shù)，offset為開始顯示數(shù)組下標。⑨filterBy：傳入值必須是數(shù)組，參數(shù)為{String

|Function}targetStringOrFunction，即需要匹配的字符串或函數(shù)（通過函數(shù)返回值為true或false來判斷匹配結(jié)果）；“in”（可選分隔符）；{String}[…searchKeys]，為檢索的屬性區(qū)域。⑩orderBy：傳入值必須是數(shù)組，參數(shù)為{String|Array|Function}sortKeys，即指定排序策略。這里可以使用單個鍵名，也可以傳入包含多個排序鍵名的數(shù)組。也可以像Array.Sort()那樣傳入自己的排序策略函數(shù)。第二個參數(shù)為可選參數(shù){String}[order]，即選擇升序或降序，order>=0為升序，order<0為降序。4.Vue.js基礎(chǔ)使用示例：{{name|uppercase}}將name傳入給uppercase內(nèi)置過濾器，返回大寫值。但vue.js

2.0中已經(jīng)去除了內(nèi)置的過濾器，但可以使用全局方法Vue.filter()注冊一個自定義過濾器，接受過濾ID和過濾函數(shù)兩個參數(shù)。過濾器注冊語法格式：Vue.filter(id,[definition])本文以日期格式過濾為例，具體方法如下：引入moment.js：1.npminstall-Smoment2.importVuefrom'vue'3.importmomentfrom'moment'注冊過濾器:1.Vue.filter('datefmt',function(input,fmtstring){2.returnmoment(input).format(fmtstring);3.});過濾器使用：1.newVue({2.el:'#app',3.data:{4.now:newDate()5.}6.})7.{{now|datefmt('YYYY-MM-DDHH:mm:ss')}}4.Vue.js基礎(chǔ)②v-modelv-model指令對表單元素進行雙向數(shù)據(jù)綁定，在修改表單元素值的同時，實例vm中對應的屬性值也同時更新。主要應用如下：1.<inputtype=”text”v-model="UserName"/>2.<span>yourinputis:{{UserName}}</span>Text綁定：當用戶在輸入框中改變文本內(nèi)容時，顯示內(nèi)容也自動跟著變化。Radio綁定：1.<label><inputtype=”radio”value=”male”v-model=”gender”>男</label>2.<label><inputtype=”radio”value=”female”v-model=”gender”>女</label>3.<p>{{gender}}</p>4.Vue.js基礎(chǔ)Checkbox綁定：1.<divid="app">2.<p>單個復選框：</p>3.<inputtype="checkbox"id="checkbox"v-model="checked">4.<labelfor="checkbox">{{checked}}</label>5.<p>多個復選框：</p>6.<inputtype="checkbox"id="apple"value="蘋果"v-model="checkedNames">7.<labelfor="runoob">蘋果</label>8.<inputtype="checkbox"id="orange"value="橙子"v-model="checkedNames">9.<labelfor="google">橙子</label>10.<inputtype="checkbox"id="grape"value="葡萄"v-model="checkedNames">11.<labelfor="taobao">葡萄</label>12.<br>13.<span>選擇的值為:{{checkedNames}}</span>14.</div>15.<script>16.newVue({17.el:'#app',18.data:{19.checked:false,20.checkedNames:[]21.}22.})23.</script>程序運行結(jié)果，如圖4-13所示。圖4-13運行結(jié)果4.Vue.js基礎(chǔ)Select綁定：1.<divid="app">2.<selectv-model="selected"name="fruit">3.<optionvalue="">請選擇</option>4.<optionvalue="語文">chinese</option>5.<optionvalue="數(shù)學">math</option>6.<optionvalue="音樂">music</option>7.<optionvalue="英語">english</option>8.</select>9.<divid="output">10.你的選擇是:{{selected}}11.</div>12.</div>13.<script>14.newVue({15.el:'#app',16.data:{17.selected:‘’18.} 19.})20.</script>上述程序運行結(jié)果，如圖4-14所示。圖4-14select運行結(jié)果4.Vue.js基礎(chǔ)③v-if/v-else/v-show1.<divid="app">2.<divv-if="type==='A'">A 3.</div>4.<divv-else-if="type==='B'">B 5.</div>6.<divv-else-if="type==='C'">C7.</div>8.<divv-else>9.NotA/B/C10.</div>11.</div> 12.<script>13.newVue({14.el:'#app',15.data:{16.type:'C'17.}18.})19.</script>○V-if：在元素和template中使用v-if指令?！餠-else：給v-if添加一個else塊。○v-else-if：用作v-if的else-if塊。4.Vue.js基礎(chǔ)④v-show：根據(jù)條件展示元素。1.<divid="app">2.<h1v-show="ok">Hello!</h1>3.</div> 4.<script>5.newVue({6.el:'#app',7.data:{8.ok:false 9.}10.})11.</script>⑤v-for：可以綁定數(shù)據(jù)到數(shù)組來渲染一個列表。1.<divid="app">2.<ol>3.<liv-for="sinstudents">4.{{}}5.</li>6.</ol>7.</div>8.<script>9.newVue({10.el:'#app',12.data:{13.students:[{name:'Mary'},{name:'Daisy'},{name:'Rose'}]14.}15.})16.</script>上述程序運行結(jié)果，如圖4-15所示。圖4-15v-for程序運行結(jié)果4.Vue.js基礎(chǔ)⑥v-on：完成事件監(jiān)聽，接收一個已定義的方法調(diào)用，如圖4-16所示：1.<divid="app">2.<buttonv-on:click="say('hi')">Sayhi</button>3.<buttonv-on:click="say('what')">Saywhat</button>4.</div>5.<script>6.newVue({7.el:'#app',8.methods:{9.say:function(message){10.alert(message)11.}12.}13.})14.</script>圖4-16

v-on運行結(jié)果4.Vue.js基礎(chǔ)1.<divid="app">2.<buttonv-on:click="say('hi')">Sayhi</button>3.<buttonv-on:click="say('what')">Saywhat</button>4.</div>5.<script>6.newVue({7.el:'#app',8.methods:{9.say:function(message){10.alert(message)11.}12.}13.})14.</script>圖4-16

v-on運行結(jié)果4.Vue.js基礎(chǔ)（4）組件組件（Component）是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。組件系統(tǒng)可以用獨立可復用的小組件來構(gòu)建大型應用，幾乎任意類型的應用的界面都可以抽象為一個組件樹。注冊一個全局組件語法格式如下：Vponent(tagName,options)tagName為組件名，options為配置選項。注冊后，可以使用以下方式來調(diào)用組件：<tagName></tagName>①全局組件：所有實例都能用全局組件。1.<divid="app">2.<runoob></runoob>3.</div>4.<script>5.//注冊6.Vuponent('runoob',{7.template:'<h1>自定義組件!</h1>'8.})9.//創(chuàng)建根實例10.newVue({11.el:'#app'12.})13.</script>4.Vue.js基礎(chǔ)②局部組件：實例選項中注冊局部組件，這樣組件只能在這個實例中使用。1.<divid="app">2.<childmessage="hello!"></child>3.</div>4.<script>5.//注冊6.Vponent('child',{7.props:['message'],//聲明props8.template:'<span>{{message}}</span>'//同樣也可以在vm實例中像“this.message”這樣使用9.})10.newVue({//創(chuàng)建根實例11.el:'#app'12.})13.</script>③prop：父組件用來傳遞數(shù)據(jù)的一個自定義屬性。組件的數(shù)據(jù)需要通過props把數(shù)據(jù)傳給子組件，子組件需要顯式地用props選項聲明"prop"：1.<divid="app">2.<childmessage="hello!"></child>3.</div>4.<script>5.//注冊6.Vponent('child',{7.props:['message'],//聲明props8.template:'<span>{{message}}</span>'//同樣也可以在vm實例中像“this.message”這樣使用9.})10.newVue({//創(chuàng)建根實例11.el:'#app'12.})13.</script>4.Vue.js基礎(chǔ)④動態(tài)prop：類似于用v-bind綁定HTML特性到一個表達式，也可以用v-bind動態(tài)綁定props的值到父組件的數(shù)據(jù)中。每當父組件的數(shù)據(jù)變化時，該變化也會傳導給子組件。1.<divid="app">2.<div>3.<inputv-model="parentMsg">4.<br>5.<childv-bind:message="parentMsg"></child>6.</div>7.</div>8.<script>9.//注冊10.Vponent('child',{11.props:['message'],//聲明props12.template:'<span>{{message}}</span>'13.//同樣也可以在vm實例中像“this.message”這樣使用14.})15.//創(chuàng)建根實例16.newVue({17.el:'#app',18.data:{parentMsg:'父組件內(nèi)容'}19.})20.</script>4.Vue.js基礎(chǔ)⑤prop驗證1.Vponent('my-component',{2.props:{3.propA:Number,//基礎(chǔ)的類型檢查(`null`和`undefined`會通過任何類型驗證)4.propB:[String,Number],//多個可能的類型5.propC:{//必填的字符串6.type:String,7.required:true8.},9.propD:{//帶有默認值的數(shù)字10.type:Number,11.default:10012.},13.propE:{//帶有默認值的對象14.type:Object,15.default:function(){//對象或數(shù)組默認值必須從一個工廠函數(shù)獲取16.return{message:'hello'}17.}18.},19.propF:{20.validator:function(value){21.return['success','warning','danger'].indexOf(value)!==-122.//這個值必須匹配上述字符串中的一個

23.}24.}25.}26.})組件可以為props指定驗證要求。為了定制prop的驗證方式，可以為props中的值提供一個帶有驗證需求的對象，而不是一個字符串數(shù)組。當prop驗證失敗的時候，Vue（開發(fā)環(huán)境構(gòu)建版本）將會產(chǎn)生一個控制臺的警告。4.Vue.js基礎(chǔ)⑥data：1.<divid="components-demo3"class="demo">2.<button-counter2></button-counter2>3.<button-counter2></button-counter2>4.<button-counter2></button-counter2>5.</div>6.<script>7.varbuttonCounter2Data={8.count:09.}10.Vponent('button-counter2',{11.data:function(){12.//data選項是一個對象，會影響到其他實例13.returnbuttonCounter2Data14.},15.template:'<buttonv-on:click="count++">點擊了{{count}}次。</button>'16.})17.newVue({el:'#components-demo3'})18.</script>在組件中必須是一個函數(shù)，每個實例可以維護一份被返回對象的獨立的拷貝，如果data是一個對象則會影響到其他實例。上述程序運行結(jié)果，如圖4-17所示。圖4-17程序運行結(jié)果5.常用插件（1）Element-uinpmielement-ui-Selement-ui是一個ui庫，它不依賴于Vue。但是卻是當前和Vue配合做項目開發(fā)的一個比較好的ui框架。①npm安裝推薦使用npm的方式安裝，它能更好地和webpack打包工具配合使用。②引入Element1.importVuefrom'vue';2.importElementUIfrom'element-ui';3.import'element-ui/lib/theme-chalk/index.css';4.importAppfrom'./App.vue';5.Vue.use(ElementUI);6.newVue({7.el:'#app',8.render:h=>h(App)9.});注意：樣式文件需要單獨引入，如第3行代碼所示。對于Element-ui的相關(guān)內(nèi)容，可進入官網(wǎng)/#/zh-CN/component/border進行學習，此處不作詳細介紹。5.常用插件（2）Vue-router

Npminstallvue-routerVue-router路由給Vue.js提供路由管理的插件，利用hash變化控制動態(tài)組件的切換。它允許用戶通過不同的URL訪問不同的內(nèi)容。它向服務器端發(fā)送一個請求，服務器響應后根據(jù)所接受到的信息去獲取信息和指派對應的模板，渲染成HTML再返回給瀏覽器，解析成可見的頁面。①安裝②引入1.importVuefrom'vue'2.importrouterfrom'./router'3.Vue.use(vueRouter)使用npm命令可完成安裝5.常用插件③基本用法Vue-router的基本作用就是將每個路徑映射到對應的組件，并通過修改路由進行組件間的切換常規(guī)路徑則為在當前url路徑后面加上#!/path，path即為設定的前端路由路徑。1.<divid="app">2.<h1>Router-Example!</h1>3.<p>4.<router-linkto="/first">First</router-link>5.<router-linkto="/second">Second</router-link>6.</p>7.<router-view></router-view>8.</div>9.<script>10.constfirst={template:'<div>First</div>'}11.constsecond={template:'<div>Second</div>'}12.constroutes=[13.{path:'/first',component:first},14.{path:'/second',component:second}15.]16.constrouter=newVueRouter({17.routes//（縮寫）相當于routes:routes18.})19.constapp=newVue({20.router21.}).$mount('#app')22.</script>代碼說明：第4-5行：使用router-link組件來導航，通過傳入“to”屬性指定鏈接。第7-8行：路由匹配到的組件將渲染在這里。第10-11行：定義組件，也可以從其他文件import進來。第12-15行：定義路由，每個路由應該映射一個組件，其中component可以是通過vue.extend()創(chuàng)建的組件構(gòu)造器，也可以只是一個組件配置對象。第16-18行：創(chuàng)建router實例，然后傳入routes配置。第19-21行：創(chuàng)建和掛載根實例，要通過router配置參數(shù)注入路由。這個程序運行效果如圖4-18所示。圖4-18運行結(jié)果5.常用插件④<router-link>相關(guān)屬性to表示目標路由的鏈接。當被點擊后，內(nèi)部會立刻把to的值傳到router.push()，所以這個值可以是一個字符串或者是描述目標位置的對象。1.<!--字符串-->2.<router-linkto="home">Home</router-link>3.<!--渲染結(jié)果-->4.<ahref="home">Home</a>5.<!--使用v-bind的JS表達式-->6.<router-linkv-bind:to="'home'">Home</router-link>7.<!--不寫v-bind也可以，就像綁定別的屬性一樣-->8.<router-link:to="'home'">Home</router-link>9.<!--同上-->10.<router-link:to="{path:'home'}">Home</router-link>11.<!--命名的路由-->12.<router-link:to="{name:'user',params:{userId:123}}">User</router-link>13.<!--帶查詢參數(shù)，下面的結(jié)果為/register?plan=private-->14.<router-link:to="{path:'register',query:{plan:'private'}}">Register</router-link>5.常用插件（2）AxiosVue自2.0開始，vue-resource不再作為官方推薦的Ajax方案，轉(zhuǎn)而推薦使用Axios。Axios是基于Promise的HTTP請求客戶端，可同時在瀏覽器和Node.js中使用，和其他的Ajax庫都是很類似的。它本身具有以下特征：●從瀏覽器中創(chuàng)建XMLHttpRequest●從Node.js發(fā)出HTTP請求●支持PromiseAPI●攔截請求和響應●轉(zhuǎn)換請求和響應數(shù)據(jù)●取消請求●自動轉(zhuǎn)換JSON數(shù)據(jù)●客戶端支持防止CSRF/XSRF①引入方式$npminstallaxios5.常用插件②執(zhí)行GET請求1.axios.get('/user?ID=12345')2..then(function(response){3.console.log(response);4.})5..catch(function(error){6.console.log(error);7.});8.axios.get('/user',{9.params:{//也可以通過params對象傳遞參數(shù)10.ID:1234511.}12.})13..then(function(response){14.console.log(response);15.})16..catch(function(error){17.console.log(error);18.});③執(zhí)行POST請求1.axios.post('/user',{2.firstName:'Fred',3.LastName:'Flintstone'4.})5..then(function(response){6.console.log(response);7.})8..catch(function(error){9.console.log(error);10.});任務4.1搭建Vue開發(fā)環(huán)境在技術(shù)要點中，提到了搭建Vue環(huán)境的方法有3種，因為前面提及到用Vue.js構(gòu)建大型應用的時候推薦使用npm安裝方法，因此本任務要介紹了使用npm完成Vue環(huán)境的安裝及新建項目的方法。1.任務描述2.任務分析使用npm進行環(huán)境的開發(fā)和運行，學會使用Vue來搭建項目。任務4.1搭建Vue開發(fā)環(huán)境Node.js是一個基于Chrome’sJavaScriptruntime的可以快速構(gòu)建網(wǎng)絡應用的平臺，提供了一種“語言級”高度的開發(fā)模式，是一種新思維，能夠從服務端把數(shù)據(jù)主動推送給用戶，可以幫助人們迅速建立web站點。Node.js允許在Web瀏覽器之外編譯和運行JavaScript代碼，這大大增加了JavaScript的使用次數(shù)。本任務中介紹了Node.js的安裝與配置。3.任務實施（1）Node.js的安裝與配置①Node.js獲取。進入Node.js的官方網(wǎng)站（如圖4-19所示），單擊“DOWNLOADS”按鈕進入下載頁面，選擇相應操作系統(tǒng)及電腦的位數(shù)對應的安裝文件（如圖4-20所示），單擊進行下載。圖4-19Node.js官方網(wǎng)站首頁圖4-20Node.js下載頁面任務4.1搭建Vue開發(fā)環(huán)境3.任務實施②Node.js安裝。雙擊已下載的安裝文件，連續(xù)單擊“Next”按鈕即可完成安裝，如圖4-21至圖4-26所示。圖4-21Node.js安裝步驟一圖4-22

Node.js安裝步驟二圖4-23

Node.js安裝步驟三圖4-24

Node.js安裝步驟四圖4-25Node.js安裝步驟五圖4-26Node.js完成安裝安裝完成后，在DOS的任意目錄下，使用命令node-v可查看當前版本，如果能夠正確看到版本號（如圖4-27所示），則說明已經(jīng)安裝成功。圖4-27

node.js版本號查看任務4.1搭建Vue開發(fā)環(huán)境3.任務實施安裝完成后，Node.js默認的路徑為C:\ProgramFiles\nodejs，node.exe是命令node的主要執(zhí)行文件，node_modules目錄是Node.js安裝時附帶的內(nèi)置模塊就是npm。npm是NodejsPackageManager的縮寫，它是一個包管理工具，可讓用戶下載和安裝JavaScript庫和包，就如同Linux中的yum倉庫，rpm包管理、Python中的pip包管理工具一樣。而這些包管理工具都是予以使用的人們方便，同時解決各種包依賴之間的關(guān)系的，它基本上是Node.js應用程序的依賴管理器。

npm是和Node.js一起并存的，只要安裝了Node.js，npm也安裝好了。模塊npm是一個可以在任意目錄下執(zhí)行的命令，可使用命令來查看、安裝和卸載。使用npm-v命令查看當前版本，如圖4-28所示。使用npm-h命令查看幫助，如圖4-29所示。使用npmlist命令查看已安裝功能，如圖4-30所示。使用npminstall命令安裝下載依賴項，如圖4-31所示。圖4-28查看npm版本圖4-29查看幫助圖4-30查看已安裝的功能圖4-31安裝下載依賴項任務4.1搭建Vue開發(fā)環(huán)境nodejs安裝好之后，通過npm下載全局模塊默認安裝到{%USERDATA%}C:\Users\username\AppData\下的Roaming\npm下，為了便于管理，設置路徑把npm安裝的模塊集中在一起。3.任務實施（2）設置nodejsprefix（全局）和cache（緩存）路徑①在node.js安裝路徑下，新建node_global和node_cache兩個文件夾，如圖4-32所示。圖4-32項目目錄文件任務4.1搭建Vue開發(fā)環(huán)境npmconfigsetcache"C:\ProgramFiles\nodejs\node_cache"3.任務實施②設置緩存文件夾。③設置全局模塊存放路徑，如圖4-33所示。npmconfigsetprefix"C:\ProgramFiles\nodejs\node_global"圖4-33設置緩存文件夾設置成功后，之后使用命令“npminstall項目名稱-g”安裝，以后模塊就存放在C:\ProgramFiles\nodejs\node_global里。任務4.1搭建Vue開發(fā)環(huán)境npminstall-gcnpm--registry=3.任務實施（3）基于Node.js安裝cnpm圖4-7使用淘寶鏡像安裝注意：由于國內(nèi)使用npm會很慢，這里推薦使用淘寶npm鏡像（/），如果出現(xiàn)錯誤，試著使用管理員身份運行。任務4.1搭建Vue開發(fā)環(huán)境3.任務實施（4）設置環(huán)境變量①右擊“電腦”圖標，在快捷菜單中選擇“屬性”命令，如圖4-35所示，在彈出的“系統(tǒng)”窗口的左側(cè)選擇“高級系統(tǒng)設置”命令，如圖4-36所示。在彈出的“系統(tǒng)屬性”對話框中單擊性能的“設置”按鈕，如圖4-37所示。圖4-35計算機屬性圖4-36高級系統(tǒng)設置圖4-37系統(tǒng)屬性對話框任務4.1搭建Vue開發(fā)環(huán)境3.任務實施②修改系統(tǒng)變量PATH，加入Node.js的安裝目錄，如圖4-38所示。圖4-38添加環(huán)境變量③新增系統(tǒng)變量NODE_PATH=安裝目錄下的node_modules，如圖4-39所示。圖4-39添加環(huán)境變量NODE_PATH任務4.1搭建Vue開發(fā)環(huán)境3.任務實施（5）安裝Vuecnpminstallvue–g使用上述命令安裝Vue，結(jié)果如圖4-40所示。（6）搭建腳手架cnpminstall@vue/cli-g腳手架搭建過程，輸入上行代碼后，運行結(jié)果如圖4-41所示：圖4-41搭建腳手架到此，完成Vue環(huán)境的安裝。任務4.1搭建Vue開發(fā)環(huán)境3.任務實施（7）新項目的創(chuàng)建vueinitwebpacknewenergy搭建完手腳架之后，現(xiàn)在要開始創(chuàng)建一個新項目，建議盡量不要創(chuàng)建在C盤，因為Vue下載下來的文件比較大，如果要改盤的話，在Dos下進入項目目錄，本例項目創(chuàng)建在D:\workspace目錄下，操作步驟如下：①創(chuàng)建一個基于webpack模板的新項目。在D:\workspace文件夾下打開命令窗口，輸入以下命令進行新建項目，項目名字叫newenergy，如圖4-42所示。圖4-42使用webpack創(chuàng)建項目②輸入項目名稱，如圖4-43所示。圖4-43輸入項目名稱任務4.1搭建Vue開發(fā)環(huán)境3.任務實施圖4-44輸入項目描述③輸入項目描述，如圖4-44所示。④輸入作者信息，如圖4-45所示。圖4-45輸入項目設計者信息任務4.1搭建Vue開發(fā)環(huán)境3.任務實施⑤選擇Vuebuild打包方式⑥選擇是否安裝路由，如圖4-47所示?！餜untimeOnly：通常需要借助如webpack的vue-loader工具把.vue文件編譯成JavaScript，因為是在編譯階段做的，所以它只包含運行時的Vue.js代碼，因此代碼體積也會更輕量。此方式下運行的時候是不帶編譯的，編譯是在離線的時候做的?！餜untime+Compiler：全功能的Vue，運行時進行編譯,本項目中選擇了該選項，如圖4-46所示。圖4-46Vuebuild打包方式圖4-47是否使用路由任務4.1搭建Vue開發(fā)環(huán)境3.任務實施⑦是否使用校驗插件⑧是否安裝單元測試，如圖4-49所示。Eslint是一個Javascript校驗插件，通常用來校驗語法或代碼的書寫風格。有了eslint可以用來規(guī)范開發(fā)人員的代碼，但會對縮進、空格、空白行之類也有規(guī)范，如果代碼比較熟悉的可以選擇關(guān)閉eslint校驗證，此處選擇了關(guān)閉，如圖4-48所示。圖4-48是否使用eslint依賴規(guī)范你的代碼圖4-49是否安裝單元測試任務4.1搭建Vue開發(fā)環(huán)境3.任務實施⑨選擇單元測試運行器，如圖4-50所示。⑩安裝e2e測試，如圖4-51所示。圖4-50選擇一個單元測試運行器圖4-51是否安裝e2e測試任務4.1搭建Vue開發(fā)環(huán)境3.任務實施?選擇安裝方式，此處選擇npm方式，如圖4-52所示。?安裝完成，運行程序，如圖4-53所示。圖4-52安裝方式的選擇圖4-53安裝成功任務4.1搭建Vue開發(fā)環(huán)境3.任務實施安裝成功后，界面出現(xiàn)提示，可按照提示的代碼啟動運行程序，如圖4-54所示。。圖4-54啟動項目○進入項目所在目錄：cdnewenergy?！疠斎雴用钸\行：npmrundev。任務4.1搭建Vue開發(fā)環(huán)境3.任務實施?運行項目圖4-55運行界面在瀏覽器中打開http://localhost:8080即可運行項目，如圖4-55所示。注意：也可使用Vue圖形化界面來進行項目管理，在CMD窗口輸入命令vueui即可進入圖形化界面進行管理，如圖4-56所示，課后可以自行嘗試完成。圖4-56Vue圖形化界面任務4.1搭建Vue開發(fā)環(huán)境3.任務實施?

查看項目圖4-57webpackProject項目新建好項目后，在webpackProject項目里面主要有以下的文件夾，如圖4-57所示?！餬uild：用于存放webpack相關(guān)配置和腳本。○config：主要存放配置文件，用于區(qū)分開發(fā)環(huán)境、測試環(huán)境、線上環(huán)境的不同?！餹ode_modules：存放項目開發(fā)的依賴模塊?！餾rc：開發(fā)項目源碼及需要引用的資源文件?！餾tatic：靜態(tài)資源，圖片、字體可以放在這里。還有一個index.html文件，這是首頁的入口。src文件夾下有App.vue和main.js兩個文件，App.vue就是個組件。任務4.1搭建Vue開發(fā)環(huán)境4.同步訓練（1）在自己的電腦上搭建Vue開發(fā)環(huán)境。（2）在電腦的指定目錄下創(chuàng)建一個webpack項目，并運行該項目。任務4.2新能源汽車大數(shù)據(jù)分析系統(tǒng)路由與組件設計與傳統(tǒng)的前端頁面設計不同，Vue.js中框架中將應用切割為小而獨立、具有復用性的組件，通過第三方插件路由Router控制組件的切換，從而實現(xiàn)單頁面應用程序的設計。本任務中對新能源汽車分析系統(tǒng)進行切割，并根據(jù)切割的功能創(chuàng)建相應組件，設計路由完成不同組件的切換，從而實現(xiàn)各部分之間切換與動態(tài)加載，具體分割完成效果如圖4-58所示。1.任務描述圖4-58頁面首頁在第3單元中，使用傳統(tǒng)的Web設計方法完成了新能源汽車的各個Web頁面的創(chuàng)建，但各頁面中頂部及左側(cè)的導航部分大多相同，代碼的重復度高，不易維護。根據(jù)Vue框架構(gòu)建的原理，通過對各頁面分析，可以將本系統(tǒng)分割成耦合度小的相對功能獨立的模塊，將這些模塊構(gòu)建成組件，通過路由完成進行組件的切換與跳轉(zhuǎn)，從而實現(xiàn)系統(tǒng)的動態(tài)加載功能。主要步驟如下：2.任務分析任務4.2新能源汽車大數(shù)據(jù)分析系統(tǒng)路由與組件設計組件具體分割圖如圖4-59所示。2.任務分析任務4.2新能源汽車大數(shù)據(jù)分析系統(tǒng)路由與組件設計圖4-59組件分割圖（1）創(chuàng)建組件2.任務分析任務4.2新能源汽車大數(shù)據(jù)分析系統(tǒng)路由與組件設計（1）創(chuàng)建組件一級功能組件功能組件名稱研發(fā)與維護數(shù)據(jù)大屏DataScreen統(tǒng)計分析DataStatistics單車監(jiān)控RealTimeMonitoring車輛管理VehicleManagement用戶管理UserManagement車輛銷售銷售情況SaleInfo車輛銷售SaleVehicle表4-1組件匯總根據(jù)第2單元的需求分析，本系統(tǒng)可分成以下幾個組件，見表4-1。Vue項目是單面應用程序，也就是說在Index.html中存放了整個應用，使用這個唯一頁面模擬出一種可以跳轉(zhuǎn)頁面的交互感覺。這一切都是由一個非常重要的模塊Vue-Router（路由）來進行處理的，其基本作用就是為每個路徑映射到對應的組件，并通過修改路由進行組件間切換，根據(jù)前期需要分析，設計路由見表4-2，用戶輸入URL都會映射到相應的路由上。2.任務分析任務4.2新能源汽車大數(shù)據(jù)分析系統(tǒng)路由與組件設計（2）設計路由2.任務分析任務4.2新能源汽車大數(shù)據(jù)分析系統(tǒng)路由與組件設計（2）設計路由表4-2路由設計URL說明組件/主頁顯示App、DataScreen/DataScreen數(shù)據(jù)大屏顯示DataScreen/DataStatistics統(tǒng)計分析DataStatistics/RealTimeMonitoring單車監(jiān)控RealTimeMonitoring/VehicleManagement車輛管理VehicleManagement/UserManagement用戶管理UserManagement3.任務實施任務4.2新能源汽車大數(shù)據(jù)分析系統(tǒng)路由與組件設計（1）打開項目①啟動VisualStudioCode。②將任務4.1中創(chuàng)建的項目添加到工作區(qū)，如圖4-60所示。③查看項目

打開項目目錄所在位置，可以看到以下文件及文件夾，如圖4-61所示，各個文件夾及文件的作用在技術(shù)要點中已經(jīng)作過介紹，此處不贅述。3.任務實施任務4.2新能源汽車大數(shù)據(jù)分析系統(tǒng)路由與組件設計將任務4.1中創(chuàng)建的項目添加到工作區(qū)。圖4-60VisualStudiocode中打開項目3.任務實施任務4.2新能源汽車大數(shù)據(jù)分析系統(tǒng)路由與組件設計energevehiclebuildconfignode_modulessrcassertscomponentsrouteerindex.jsApp.vueMain.jsstaticbabelrc.gitignoreindex.html.postcssrc.jspackage-lock.jsonpackage.json圖4-61項目文件夾3.任務實施任務4.2新能源汽車大數(shù)據(jù)分析系統(tǒng)路由與組件設計（2）導入項目所用的資源①添加頁面資源包。將本項目所用到的css文件及Image添加到項目的assets文件夾中，所用到的外部資源包添加到static中，如圖4-62所示。②在Index.html中添加對資源的引用。3.任務實施任務4.2新能源汽車大數(shù)據(jù)分析系統(tǒng)路由與組件設計圖4-62asse