前端框架文檔 v3.14

1、前端框架說明手冊（內(nèi)部培訓材料）1準備1.1基礎(chǔ)知識詳見vue2官網(wǎng)，1.2環(huán)境搭建內(nèi)網(wǎng)環(huán)境Step1:準備已經(jīng)下載好的Node.js安裝包（按照不同的系統(tǒng)，下載不同的安裝文件），安裝后使用node-v/npm-v查看node和npm的版本，如果npm版本低于3.4建議安裝最新版本的node.js運行環(huán)境。Step2:解壓項目模板文件Step3:進入client文件夾，解壓已準備好的node_modules文件到當前目錄Step4：npminstallStep5：npmrundev外網(wǎng)環(huán)境Step1:下載Node.js安裝包（按照不同的系統(tǒng)，下載不同的安裝文件），安裝后使用node-v/npm

2、-v查看node和npm的版本，如果npm版本低于3.4建議安裝最新版本的node.js運行環(huán)境。Step2:（1）在cmd中進入項目client文件夾，C:ixUsersAncIi-eloeE:Xcd.nevjE=Miewcd.clent=E=MiewXclient=(2)執(zhí)行命令：npmconfigsetregistry HYPERLINK E:XnewXclientnpmconfigsetregistryhttps:/registry.npm_taoliao_opg（3）執(zhí)行命令npmconfiglist觀察下載源是否更換為國內(nèi)鏡像源（加快下載速度）E：wylien七npmconFig-

3、lis七；cliconfuser-agent=npm/3.10.9node/u6.2uin32x&4*；userconfigC：JUsepsxfanchaoK.npnii*cFegis七=h七七ps:/r-egis七py-npm.-of鼻(4)執(zhí)行npminstall等待所有包安裝完成(5)如果單個的包需要安裝，請執(zhí)行npminstallpackageName-saveStep3:npmrundev1.2項目結(jié)構(gòu)介紹開發(fā)人員主要關(guān)注的目錄：src、static、services下的moduleServices.js、router.config.js口clientE:neurclient口bui

4、ld匕zmfigTE3src口ass-ets口components&components.ext口mode-ls口modules口servicesBstore口ui口utilfapp.vue|ramainjsrarouter.ccnfig.j&k口static匕test.babelrr目.editorconfig目.e5-lintignoreIeb.es-lintrc.Js目.gitignoreISfaviGon.i&Q慟index.html3packsge.J&onKEADME.mdUhExternaILibraries其中，build:Config:src是開發(fā)的主要目錄。static是項

5、目靜態(tài)文件的放置目錄、moduleServices.js主要是配置服務(wù),router.config.js配置路由.2入門2.1Helloworld（標題模塊沒有子模塊的情況下）一開始，頁面是空的：如圖C?DkKulho5t.080以編寫helloworld為例，分為以下幾個步驟：2.1.1創(chuàng)建當前模塊的文件夾在src/modules目錄下創(chuàng)建模塊文件夾，之后屬于該模塊的組件文件都在此目錄下建立，方便管理，比如我們創(chuàng)建測試模塊modiules口d-emo口elernents口manage-ment口organization匕review2.1.2配置模塊服務(wù)client/src/services

6、/moduleService.js中配置服務(wù)，在頁面創(chuàng)建測試標題模塊，配置模塊服務(wù)詳細請參考（參考2.3），配置服務(wù)的時候只需要嚴格按照格式來增加數(shù)據(jù)，配置模塊在格式如下代碼為：v1arstr=functions:function:id:100000010000name:測試,type:folder,description:測試，url:/test頁面效果為：洌奮咸臧杵CHEMCSDUSAIWEIXUN爾貝用戶*辱O在模塊中添加組件在剛才我們創(chuàng)建的test目錄下面我們新建一個vue組件文件，取名為hello.vueT口modules口dashbard4口demo4口elements口manag

7、ement口organization-Breview4口ytem2.1.4編寫hello.vue組件，代碼如下：Hdivcla百滬hoiIohelloword!Aexportdefault(/script.hellowidth:80%;hei呂ht:200px;text-Ligri：cent會r;padding-top:oOpz:72.1.5掛載組件將hello.vue掛載在測試模塊下面（參考2.2）第一步：導(dǎo)入組件，如：importVuefromvueimpartueRouterfrom1vu-xouter5VWWWVYVYVYVYVYVYVYVWYVWYVWYVYYYYYYYYYYYYYY

8、VYVYVYVYVYVYVYVYVYVYVYVimportauth.fromT./uti1/authJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/iinportVueResourcefromTvue-resource，(VueRouter)|2222222222ZZZZZZZZZZZZZ2222222222222ZZZF7use7ue.use(YueResource)varhel1o=requireC_/modules/test/hello.vue*)第二步：配置路由常量importVuefromTvueAAA

9、AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAimportVu.eR.ouTerfromTvueTouter7222222ZZZZZZZZZZZZZZZ、ZF2H2H2H2H2H2H25importauth.fromT./util/authT、u卜卜卜-fAZ-z-z-z-z-z-z-MFgj1卜FAj1卜FAj1卜FAj1卜impQXtVueRescurcfromvue-resourice，WXAA/VXAA/VXAA/WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWAAVue.use(VueRouterjVus.use(VueResour

10、ce)varhello=required./jnodules/tEst/hgllovue1)到此，頁面效果如圖：0ITMiL蹩疋卯4GDllocalhoit&nso/Mt*=側(cè)農(nóng)鬪訊默件UyCHENGDUSAIWEIXUNsA護s*helloword!2.2完整開發(fā)流程（標題模塊+子模塊）開始，頁面依然是空的：如圖C?DHKinIhmhMlBQCHENGDUSAIWEIXUN仍以編寫helloworld為例，分為以下幾個步驟：2.2.1創(chuàng)建當前模塊的文件夾在src/modules目錄下創(chuàng)建模塊文件夾，之后屬于該模塊的組件文件都在此目錄下建立，方便管理，比如我們創(chuàng)建測試模塊口demo*口elem

11、ents口management匕organization口review亡-test2.2.2創(chuàng)建當前模塊的主入口文件index.vue（名字隨意）reviewsystemt已mtElhhome.vuehi主入口文件用于展示當前一級模塊（即標題模塊）下的二級模塊、三級模塊等等2.2.3編寫主入口文件index.vue（名字隨意）slider-layoutmount二/testscriptimportSliderLayoutfrom/ui/sliderlayout.vueexportdefaultname:test,components:SliderLayout/scriptstylescoped

12、此處SliderLayout為封裝好的一個菜單組件，注意mount屬性，后面的取值為掛載的路徑。在test目錄下創(chuàng)建todolist.vueLJZkCIWUICTtlletthindex.wuehtodolist.vueTodolist即將作為測試模塊下的第一個子模塊中的內(nèi)容編寫todolist.vueTodolist組件實現(xiàn)了列表渲染的功能，里面的數(shù)據(jù)都由vue-resource發(fā)起http請求獲得，對于展示數(shù)據(jù)的時候?qū)崿F(xiàn)了分頁的功能代碼如下：spanclass=title姓名：subdata.UserNamespanclass=title編號：subdata.Ageindexexportd

13、efaultname:todolist,data()returndata:nullmaxPage:nullpageArr:,pageSize:7url: HYPERLINK http:/localhost:8000/api/user http:/localhost:8000/api/user,computed:pageNums:function()vari=1while(i=this.maxPage)this.pageArr.push(i)i=i+1console.log(this.pageArr)returnthis.pageArr,methods:request:function(inde

14、x)this.$http.get(this.url,params:pageSize:this.pageSize,pagelndex:index).then(function(response)this.data=response.data.Usersconsole.log(response)this.maxPage=response.data.TotalPage),mounted()this.$http.get(this.url,params:pageSize:this.pageSize,pageIndex:1).then(function(response)this.data=respons

15、e.data.Usersconsole.log(response)this.maxPage=response.data.TotalPagevari=1while(istylescopedlilist-style:none;display:flex;lispanflex:1ulmargin-bottom:20px;.todolistpadding:20px;border:1pxsolid#ddd;margin:%;.titlefont-weight:bold;margin-right:5px;關(guān)于vue-resource請求后臺數(shù)據(jù)的方法以及請求成功后的數(shù)據(jù)處理請參照2.10章節(jié)配置模塊服務(wù)配置

16、文件為：client/src/services/moduleService.js代碼如下：varstr=functions:function:id:100000020000name:測試,type:folder,description:測試，url:/test,functions:function:id:100000020100,name:demo，/將測試模塊下的第一個子模塊取名為demotype:folder,description:demo,url:/test/todolist/路徑必須為該模塊對應(yīng)的組件路徑配置路由vartodolist二resolve=require(./module

17、s/test/todolist,resolve)varindex=resolve=require(./modules/test/index.vue,resolve)constroutes=path:/test,component:index子模塊的路由配置在children下面children:path:test,component:test每個組件都需要導(dǎo)入之后才能配置在路由常量里面此時只有同時配置好服務(wù)和路由之后才能得到最后的效果，如下圖：0賽威訊耿件CHENGDUSAIWEIXUNdemofflss姓s姓:PersortU:Penronl5:P色rsortlE:Penroni7:Pers

18、oiilS:PenronlS:PersoD帕st需st114&67B9Dnj2Tc22232.3基本路由在client/src/router.config.js中配置路由，配置路由的目的在于清楚當前模塊所在的路徑。配置路由分為以下三個步驟：導(dǎo)入所有依賴，如下：ImportVuefromvue;importVueRouter，fromvue-router;導(dǎo)入組件，(此文件中用到的所有組件都需經(jīng)過導(dǎo)入組件這一步)如下：varhome=resolve=require(./modules/home.vue,resolve)配置路由常量，如下：constroutes=path:/home,compon

19、ent:home在有子模塊的情況下，配置路由為：constroutes=path:/test,component:testModule,/*加入children*/children:/*加入oneModule依然需要經(jīng)過第二步導(dǎo)入才可以被引用*/path:one,component:oneModule,path:/,redirect:one以上三步就表示home.vue這個組件的路由歸屬于path為/hom的模塊注意：路由常量routes中component屬性后面的組件，都需要經(jīng)過第二步的導(dǎo)入組件才能生效2.4模塊在client/src/services/moduleService.js中配

20、置服務(wù)，配置服務(wù)的目的在于渲染出標題模塊以及標題模塊下面的子模塊。配置服務(wù)只有一個步驟：添加或刪除模塊只需操作str中的json數(shù)據(jù)即可，最好不要改動文件中的其他內(nèi)容如：varstr=functions:function:id:100000020000name:組織機構(gòu),type:folder,description:組織機構(gòu)，/一級模塊url:/organization,functions:function:id:100000020100,name:管理，/二級模塊type:folder,description:管理,url:/organization/management,function

21、s:function:id:100000020101,name:管理1-1，/三級模塊type:folder,description:管理1-1,url:/organization/management,id:100000020102name:功能2-2,type:folderdescription:功能2-2url:/organization/management,id:100000020200name:功能,type:folderdescription:功能url:/organization/function,json數(shù)據(jù)中傳參的時候規(guī)則需要與上面例子中的規(guī)則完全一致，否則會導(dǎo)致渲染出錯2

22、.5組件開發(fā)2.5.1、什么是組件？組件是自定義元素，可以擴展HTML元素，封裝可重用代碼。2.5.2、使用組件（1）創(chuàng)建一個組件一個Vue組件包含三部分內(nèi)容：1、組件的html部分，2、組件的邏輯部分3、組件的樣式部分2.5.3、使用組件注意事項參考vue.js官方文檔2.5.4、組件間的通信（1）父子組件之間的關(guān)系可總結(jié)為propsdown,eventsup，父組件通過props向下傳遞數(shù)據(jù)給子組件，子組件通過events給父組件發(fā)送消息。EmitEventsPassProps（2）使用props傳遞數(shù)據(jù)由于組件實例的作用域是孤立的。所以不應(yīng)該在子組件的模版內(nèi)直接引用父組件的數(shù)據(jù)?？梢酝ㄟ^

23、props把數(shù)據(jù)傳遞給子組件。JSVueBccmponent;(p匚hiLdL，t/聲旦冃propsprops:rmessagepr/就像data樣，prop可以用在模板內(nèi)/同樣也可以在vin實例中像this.measage這樣使用template:rmessager然后向它傳人一個普通字符串：HTML（3）動態(tài)Props用v-bind動態(tài)綁定props的值到父組件的數(shù)據(jù)中。每當父組件的數(shù)據(jù)變化時該變化也會傳導(dǎo)給子組件:使用v-bind的縮寫語法通常更簡單：(4)props是單向數(shù)據(jù)綁定。只有在父組件屬性變化時，才會傳導(dǎo)給子組件。不要在子組件內(nèi)部改變prop。2.5.5、自定義事件(1)子組件

24、通過自定義事件把數(shù)據(jù)傳遞回父組件。使用v-on綁定自定義事件。每個Vue實例都實現(xiàn)了事件接口(Eventsinterface)，即：使用$on(eventName)監(jiān)聽事件使用$emit(eventName)觸發(fā)事件2.5.6、原生事件(1)在組件根元素上監(jiān)聽原生事件，使用.native修飾v-on：my-componentv-on:click.native=doTheThing/my-component2.5.7、非父子組件通信(1)有時候非父子關(guān)系的組件也需要通信。在簡單的場景下，使用一個空的Vue實例作為中央事件總線：varbus=newVue();/觸發(fā)組件A中的事件bus.$emit

25、(id-selected,1)/在組件B創(chuàng)建的鉤子中監(jiān)聽事件bus.$on(id-selected,function(id)/.)2.5.8、動態(tài)組件(1)多個組件可以使用同一個掛載點，然后動態(tài)地在它們之間切換。使用保留的component元素，動態(tài)地綁定到它的is特性：varvm=newVue(jsel:#example,data:currentview:home,components:home:/*.*/,posts:/*.*/,archive:/*.*/)componentv-bind:is=currentViewhtml!-組件在vm.currentview變化時改變！-/compon

26、ent2.5.9、編寫可復(fù)用組件(1)Vue組件的API來自三部分-props,events和slots：Props允許外部環(huán)境傳遞數(shù)據(jù)給組件Events允許組件觸發(fā)外部環(huán)境的副作用Slots允許外部環(huán)境將額外的內(nèi)容組合在組件中。2.5.10子組件的索引(1)盡管有props和events，但是有時仍然需要在JavaScript中直接訪問子組件。為此可以使用ref為子組件指定一個索引ID。htmlvarparent=newVue(el:#parent)js/訪問子組件varchild=parent.$file當ref和v-for一起使用時，&f是一個數(shù)組或?qū)ο?，包含相?yīng)的子組件。2.5.11使

27、用Slots發(fā)布內(nèi)容在使用組件時，常常要像這樣組合它們：app-footer/app-footer組件不知道它的掛載點會有什么內(nèi)容。掛載點的內(nèi)容是由vapp的父組件決定的。組件很可能有它自己的模版。為了讓組件可以組合，我們需要一種方式來混合父組件的內(nèi)容與子組件自己的模板。這個過程被稱為內(nèi)容分發(fā)。編譯作用域messagemessage是綁定到父組件的數(shù)據(jù)。父組件模板的內(nèi)容在父組件作用域內(nèi)編譯；子組件模板的內(nèi)容在子組件作用域內(nèi)編譯。如果要綁定子組件內(nèi)的指令到一個組件的根節(jié)點，應(yīng)當在它的模板內(nèi)這么做：Vponent(child-component,/有效，因為是在正確的作用域內(nèi)template:di

28、vv-show=someChildPropertyChild/div，data:function()returnsomeChildProperty:true)、單個Slot除非子組件模板包含至少一個插口，否則父組件的內(nèi)容將會被丟棄。當子組件模板只有一個沒有屬性的Slot時，父組件整個內(nèi)容片段將插入到Slot所在的DOM位置，并替換掉slot標簽本身。最初在標簽中的任何內(nèi)容都被視為備用內(nèi)容。備用內(nèi)容在子組件的作用域內(nèi)編譯，并且只有在宿主元素為空，且沒有要插入的內(nèi)容時才顯示備用內(nèi)容假定my-component組件有下面模板：h2Imthechildtitle/h2如果沒有分發(fā)內(nèi)容則顯示我。父組件模

29、版：ImtheparenttitlepThisissomeoriginalcontentpThisissomemoreoriginalcontent渲染結(jié)果：Imtheparenttitleh2ImthechildtitleThisissomeoriginalcontent/pThisissomemoreoriginalcontent/div/div、具名Slotsslt元素可以用一個特殊的屬性name來配置如何分發(fā)內(nèi)容。多個slot可以有不同的名字。具名slot將匹配內(nèi)容片段中有對應(yīng)slot特性的元素。仍然可以有一個匿名Slot，它是默認slot，作為找不到匹配的內(nèi)容片段的備用插槽。如果沒有

30、默認的slot，這些找不到匹配的內(nèi)容片段將被拋棄。使用slot二xxname”進行渲染。如：子組件：headerslotname=header/slot/header父組件：Heremightbeapagetitle渲染結(jié)果：Heremightbeapagetitle2.5.12組件命名規(guī)范當注冊組件（或者props）時，可以使用kebab-case，camelCase，或TitleCase。Vue不關(guān)心這個。/在組件定義中components:/使用camelCase形式注冊kebab-cased-component:/*.*/,camelCasedComponent:/*.*/,Title

31、CasedComponent:/*.*/在HTML模版中，請使用kebab-case形式：當使用字符串模式時，可以不受HTML的case-insensitive限制。這意味實際上在模版中，你可以使用camelCase、PascalCase或者kebab-case來引用你的組件和prop：如果組件未經(jīng)slot元素傳遞內(nèi)容，你甚至可以在組件名后使用/使其自閉合:vmy-component/當然，這只在字符串模版中有效。因為自閉的自定義元素是無效的HTML，瀏覽器原生的解析器也無法識別它2.6組件擴展之EventBusEventBus，我們稱為事件總線，用于非父子組件之間的通信，我們以實現(xiàn)按鈕點擊出

32、現(xiàn)彈窗為例6.1在test目錄下新建dialog.vue其代碼如下：dialog關(guān)閉exportdefaultdata()returnshowDialog:false/先設(shè)置彈窗不可見stylescopedh1margin-bottom:30px;2.6.2修改hello.vue在hello.vue的基礎(chǔ)上，我們做以下改動：divclass二hellohelloworld!dialogscriptimportshowBoxfrom./dialog.vueexportdefaultcomponents:showBoxstylescoped.hellowidth:80%;height:200px;

33、padding-top:50px;text-align:center;h1margin-bottom:50px;.showBoxwidth:100px;height:lOOpx;padding:10px;position:absolute;top:10px;right:1OOpx;border:1pxsolid#ddd;在hello中加入el-button全局組件，再引入上面封裝的dialog組件，取名為showBox，此時，el-button和showBox就屬于兄弟組件，我們要用EventBus完成這兩個組件之間的通信2.6.3hello.vue中的button拋出事件主要代碼如下tcnl

34、ate)51divclasg=*hellhellaworld!dLalogshow_boaclass=/，showB口蓋V/ishowr一bon3urLted()ihis.eventBus.onf1show-fInishP)data()returnI用click點擊事件去執(zhí)行showDialog,在showDialog方法中用this.evenrBus.emit去拋出一個名為show-dialog的事件2.6.4dialog.vue中的監(jiān)聽事件主要代碼如下：showDialog:falsethis.showDialog=falsedivv-showshowDialogul已dialogelbu

35、ttcmsize=smallclick=/finishShow關(guān)閉returnmethods:exportdefaultdata()mounted()this.eventBus.onfshow-dialoK1,()=this.showDialog=true丫一)VvfinishShow()this.eventBus.emit(show-finish在mounted里面用this.eventBus.on來監(jiān)聽事件，監(jiān)聽的事件的名字必須與拋出時間的名字一致，然后在監(jiān)聽中操作數(shù)據(jù)showDialog為true即可，到此就實現(xiàn)了點擊按鈕，彈窗出現(xiàn)的效果。如圖：點擊按鈕前：Ohelloworld!疵Ji

36、R鞍件CHENIGDUSAIWEIXUN點擊上圖中綠色按鈕之后：爭込奩威訊IS件&CHENIGDUSAIWEIXUNdeiroasshelloworld!但是，在實際情況中，彈窗不可能被打開之后一直就處于打開狀態(tài)，所以在彈窗組件dialog.vue中我設(shè)置了一個button,來控制彈窗的關(guān)閉。所以在dialog.vue中做了進一步的操作：Cdivv-show=showDialogclass=wshowBjs/zdialog關(guān)囲/el-birtton一tempiate)exportdefault(data0returnmounted()thiseventBuson7show-dialog1,0-

37、this.showEialog=trueJ)methods:finiEhShow()this.eventBus.emitfshow-finish1)this.showDialog當我點擊dialog中的button的時候，出發(fā)finishShow方法，方法里面同樣用this.eventBus.emit來拋出事件，事件名為show-finish，里面將數(shù)據(jù)showDialog重置為false另外在hello.vue中，我也添加了監(jiān)聽事件，主要改動如下：console,log廠監(jiān)聽JJchaTF-finish，)Mi)data()return依然用mounted的方式去監(jiān)聽，由于業(yè)務(wù)不需要，所以在

38、此次監(jiān)聽事件時我沒有再做其他的處理。效果對比如下：點擊彈窗中的按鈕之前：、】,賽威訊軟件yCHENGDUSAIWEIXUNdemahelloworld!S3點擊彈窗中的按鈕之后:慮務(wù)威訊軟件:CHENGDUS/MWEIXUN八甩戶呼demoIhelloWorld!03E?|0e*wiuConsole皿氏esNsortrtE冋Prare?Rewii到此為止，eventBus的使用說明完畢2.7組件擴展之父子組件下面我將完整地展示一個父子組件的封裝以及通信問題創(chuàng)建list.vue子組件代碼如下：spanv-if二item.style=textitem.contentscriptexportdefa

39、ultprops:curdatastylescopedatext-decoration:none;ulpadding:。15px20px15px;lilist-style:none;padding:5px10px5px0;border-bottom:1pxsolid#ddd;display:flex;lispanfont-size:14px;flex:1;lispan:last-childtext-align:right;.timecolor:#666;.tooltipcolor:#666;子組件中沒有數(shù)據(jù)，props:curdata則表明它需要外部傳入的curdata,而外部怎么傳入呢？我們

40、來看看父組件test.vue的代碼importlistfrom./list.vueexportdefaultname:test,components:list,data()returncurdata:content:審查逮捕通知書,style:text,content:當前必須辦理的文件,style:tooltip,content:2017.2.3,style:time注意template里面，父組件中的子組件用：curdata二curdata綁定了數(shù)據(jù)，這種方式叫動態(tài)綁定，動態(tài)綁定子組件props的值到父組件的數(shù)據(jù)中。每當父組件的數(shù)據(jù)變化時，該變化也會傳導(dǎo)給子組件。渲染父組件，效果如下：子組

41、件是怎么傳遞數(shù)據(jù)回父組件的呢？在子組件中做修改如下：F1spanv-if=*iteiLstyle=11test;ltenu匚ontentaddscript、exportdefaultcurdataaJJW-props：Ldata()returnnumDer:conttent:content：content：1審査逮播通知書當前必煩辦理的文件S=tyle:T2017.2.3VBstyle：*time*methods:add：function)thisrSparent,Semit(3plus3,thia,nunber)J一一在li中添加button，并為其綁定click時觸發(fā)add事件，在add方

42、法中，用this.$parent.$emit(plus,this.number)去拋出一個叫plus的事件，并把當前組件的number傳過去，父組件的接收方式如下：list:curdsimportlistfromw./list,vue1esportdefaultname:tes?components：list,data()(returnnumibeT:null,curdata:(content：1審查逮捕通知書Jstyle：1text11,content：當前必須辦理的文件，style：1tooltip1,(content-:12017.2.21,style：1time111,亡:Fwatmd

43、()this.-$on(Tplus,function(msg)this.curdata,push(rnsg)console,logCl)在父組件的created鉤子函數(shù)中用this.$on監(jiān)聽子組件拋出的plus事件，將得到的數(shù)據(jù)放進父組件的數(shù)據(jù)中，父組件的數(shù)據(jù)據(jù)改變了。下面我們看一下效果父組件傳值給子組件：2.8靜態(tài)文件2.8.1css文件在static目錄中放著整個項目所需要的靜態(tài)文件，css文件分類如下1.全局樣式index.css（less目錄下）口statiice口2eServi匚已毎口themeHTariBtlanother-stv仁云ind&y.c&O四index巴導(dǎo)cssind

44、ex.csFl.gitkeep:her-s1yle.cssstyle提供了很多可選樣式，如按鈕的幾個不同狀態(tài)：默認狀態(tài)、成功狀態(tài)、警告狀，態(tài)等等。如全局字體,有tiny、small、normal、big等不同的等級，很多復(fù)用性比較高的樣式都可以在里面添加2.組件樣式index.css(theme目錄下)T口static&iceLjiceServicesle&cssanoth-er-style.css:l：snoth-er-style0index.cESCLhindexet&fsindex.c&sk此文件中包含了element中的通用組件的樣式，可根據(jù)需要在里面做修改another-style.

45、css（less目錄下）I4-TLilLH-i!II叮士VWYVYYYYYYYYYYV-VrTT口static口ice口iceServicesTtlthem&T口Ie5.sanother-style.cssl|another-styleJess!L!index.less心simdex.cs&0.gitkeep此文件中的樣式是做換膚功能。2.9與后端數(shù)據(jù)交互Http(NoRPC)使用http服務(wù)在發(fā)送請求后，使用then方法來處理響應(yīng)結(jié)果，then方法有兩個參數(shù)，第一個參數(shù)是響應(yīng)成功時，：的，回調(diào)函數(shù)，第二個參數(shù)是響應(yīng)失敗時的回調(diào)函數(shù)this$httpget(/someUrl,options)t

46、hen(successCallback,errorCallback);this$http.post(/someUrl,body,options)then(successCallback,errorCallback);.1支持的HTTP方法請求API是按照REST風格設(shè)計的，它提供了7種請求APIget(url,options)head(url,options)delete(url,options)jsonp(url,options)post(url,body,options)put(url,body,options)7.patch(url,body,options)客戶端請求方法服務(wù)端處理方法

47、this.$http.geGetxxxthis.$http.post(.)Postxxxthis.$http.put(.)Putxxxthis.$http.delete(.)Deletexxx除了jsonp以外，另外6種的API名稱是標準的HTTP方法。當服務(wù)端使用RESTAPI時，客戶端的編碼風格和服務(wù)端的編碼風格近乎一致，這可以減少前端和后端開發(fā)人員的溝通成本。options對象發(fā)送請求時的options選項對象包含以下屬性：參數(shù)類型描述urlstring請求的URLmethodstring請求的HTTP方法，例如：GET,POST或其他HTTP方法bodyObject,FormDatas

48、tringrequestbodyparamsObject請求的URL參數(shù)對象headersObjectrequestheadertimeoutnumber單位為毫秒的請求超時時間（0表示無超時時間）beforefunction(request)請求發(fā)送前的處理函數(shù)，類似于jQuery的beforeSend函數(shù)progressfunction(event)ProgressEvent回調(diào)處理函數(shù)參數(shù)類型描述credientialsboolean表示跨域請求時是否需要使用憑證emulateHTTPboolean發(fā)送PUT,PATCH,DELETE請求時以HTTPPOST的方式發(fā)送，并設(shè)置請求頭的X-

49、HTTP-Method-OverrideemulateJSONboolean將requestbody以application/x-www-form-urlencodedcontenttype發(fā)送emulateHTTP的作用如果Web服務(wù)器無法處理PUT,PATCH和DELETE這種REST風格的請求，你可以啟用enulateHTTP選項。啟用該選項后，請求會以普通的POST方法發(fā)出，并且HTTP頭信息的X-HTTP-Method-Override屬性會設(shè)置為實際的HTTP方法。Vue. HYPERLINK http:/http.options.emulateHTTP http.options.

50、emulateHTTP=true;emulateJSON的作用如果Web服務(wù)器無法處理編碼為application/json的請求，你可以啟用emulateJSON選項。啟用該選項后，請求會以application/x-www-form-urlencoded作為MIMEtype，就像普通的HTML表單一樣。Vue. HYPERLINK http:/http.options.emulateJSON http.options.emulateJSON=true;response對象屬性方法類型描述text()string以string形式返回responsebodyjson()Object以JSON

51、對象形式返回responsebodyblob()Blob以二進制形式返回responsebodyokboolean響應(yīng)的HTTP狀態(tài)碼在200299之間時，該屬性為truestatusnumber響應(yīng)的HTTP狀態(tài)碼statusTextstring響應(yīng)的狀態(tài)文本headersObject響應(yīng)頭使用resource服務(wù)resource服務(wù)包含以下幾種默認的action：get:method:GET,save:method:POST,query:method:GET,update:method:PUT,remove:method:DELETE,delete:method:DELETEthis.$r

52、esource可以結(jié)合URITemplate起使用，以下示例的apiUrl都設(shè)置為/id了:apiUrl:9:8080/api/customers/id使用示例：createCustomer:function()varresource=this$resource(this.apiUrl)vm=thisresource.save(vm.apiUrl,vm.item).then(response)=vm.$set(item,)vm.getCustomers()this.show=falsehttp攔截器攔截器可以在請求發(fā)送前和發(fā)送請求后做一些處理?；居梅╒erceptors.push(request,next)=/./請求發(fā)送前的處理邏輯/.next(response)=/./請求發(fā)送后的處理邏輯/./根據(jù)請求的狀態(tài)，response參數(shù)會返回給successCallback或errorCallbackreturnresponse)ICE(RPC)Stepl引入外