vue-element-adminv4.4后臺(tái)前端解決方案指南目\h基礎(chǔ)\h介紹\h布局\h路由和側(cè)邊欄\h權(quán)限驗(yàn)證\h快捷導(dǎo)航(標(biāo)簽欄導(dǎo)航)\h新增頁(yè)面\h樣式\h和服務(wù)端進(jìn)行交互\hMockData\h引入外部模塊\h構(gòu)建和發(fā)布\h環(huán)境變量\h進(jìn)階\h跨域問題\hESLint\hGitHooks\h風(fēng)格指南\h路由懶加載\h圖表\h圖標(biāo)\hCDN\h更換主題\h國(guó)際化\h錯(cuò)誤處理\hebpack指南\hNodeSasstoartSass\h其它\h常見問題\h更新記錄\h項(xiàng)目捐贈(zèng)與字節(jié)跳動(dòng)內(nèi)推介紹vue2.6.10 eemn-i2.7.0 buildpassing eMIT ev4.4.0 $e\hvue-eleent-是一個(gè)后臺(tái)前端解決方案，它基于\hvue和\helementui實(shí)現(xiàn)。它使用了最新的前端技術(shù)棧，內(nèi)置了i18國(guó)際化解決方案，動(dòng)態(tài)路由，權(quán)限驗(yàn)證，提煉了典型的業(yè)務(wù)模型，提供了豐富的功能組件，它可以幫助你快速搭建企業(yè)級(jí)中后臺(tái)產(chǎn)品原型。相信不管你的需求是什么，本項(xiàng)目都能幫助到你。建議本項(xiàng)目的定位是后臺(tái)集成方案，不太適合當(dāng)基礎(chǔ)模板來進(jìn)行二次開發(fā)。因?yàn)楸卷?xiàng)目集成了很多你可能用不到的功能，會(huì)造成不少的代碼冗余。如果你的項(xiàng)目不關(guān)注這方面的問題，也可以直接基于它進(jìn)行二次開發(fā)。集成方案:\hvue-eleent-基礎(chǔ)模板:\hvue-admn-teplate桌面終端:\helectro-vueadminTypescrpt版\hvue-typscrit-admin-temlate(鳴謝:\h@Armour)Others:\hawesomeprojct功能1.-登錄/注銷2.3.-權(quán)限驗(yàn)證4.-頁(yè)面權(quán)限5.-指令權(quán)限6.-權(quán)限配置7.-二步登錄8.9.-多環(huán)境發(fā)布10.-devsitstageprod11.12.-全局功能13.-國(guó)際化多語(yǔ)言14.-多種動(dòng)態(tài)換膚15.-動(dòng)態(tài)側(cè)邊欄（支持多級(jí)路由嵌套）16.-動(dòng)態(tài)面包屑17.-快捷導(dǎo)航(標(biāo)簽頁(yè))18.-SvgSprite圖標(biāo)19.-本地/后端mock數(shù)據(jù)20.-Screenfull全屏 -5-介紹21.-自適應(yīng)收縮側(cè)邊欄22.23.-編輯器24.-富文本25.-Markdown26.-JSON等多格式27.28.-Excel29.-導(dǎo)出excel30.-導(dǎo)入excel31.-前端可視化excel32.-導(dǎo)出zip33.34.-表格35.-動(dòng)態(tài)表格36.-拖拽表格37.-內(nèi)聯(lián)編輯38.39.-錯(cuò)誤頁(yè)面40.-40141.-40442.43.-組件44.-頭像上傳45.-返回頂部46.-拖拽Dialog47.-拖拽Select48.-拖拽看板49.-列表拖拽50.-SplitPane51.-Dropzone52.-Sticky53.-CountTo54.55.-綜合實(shí)例56.-錯(cuò)誤日志57.-Dashboard58.-引導(dǎo)頁(yè)59.-ECharts圖表60.-Clipboard(剪貼復(fù)制)61.-Markdown2html前序準(zhǔn)備你需要在本地安裝\hnode和\hgit。本項(xiàng)目技術(shù)?；赲hES2015+、\hvue、\hvuex\h、ve-ro\h、ve-cli\h、aios和\helementui，所有的請(qǐng)求數(shù)據(jù)都使\h用Mck.js進(jìn)行模擬，提前了解和學(xué)習(xí)這些知識(shí)會(huì)對(duì)使用本項(xiàng)目有很大的幫助。同時(shí)配套一個(gè)系列的教程文章，如何從零構(gòu)建一個(gè)完整的管理后臺(tái)項(xiàng)目，建議大家先看完這些文章再來實(shí)踐本項(xiàng)目。 -6-介紹\h手摸手，帶你用vue擼后臺(tái)系列一(基礎(chǔ)篇)\h手摸手，帶你用vue擼后臺(tái)系列二(登錄權(quán)限篇)\h手摸手，帶你用vue擼后臺(tái)系列三(實(shí)戰(zhàn)篇)\h手摸手，帶你用vue擼后臺(tái)系列四(vueAmin一個(gè)極簡(jiǎn)的后臺(tái)基礎(chǔ)模板)\h手摸手，帶你用vue擼后臺(tái)系列五(v4.0新版本)\h手摸手，帶你封裝一個(gè)vuecompnent\h手摸手，帶你優(yōu)雅的使用icon\h手摸手，帶你用合理的姿勢(shì)使用weback4\h手摸手，帶你用合理的姿勢(shì)使用weback4本項(xiàng)目不支持低版本瀏覽器(如ie)，有需求請(qǐng)自行添加polyill\h詳情目錄結(jié)構(gòu)本項(xiàng)目已經(jīng)為你生成了一個(gè)完整的開發(fā)框架，提供了涵蓋中后臺(tái)開發(fā)的各類功能和坑位，下面是整個(gè)項(xiàng)目的目錄結(jié)構(gòu)。1.├──build2.├──mock3.├──plop-templates4.├──public

#構(gòu)建相關(guān)#項(xiàng)目mock模擬數(shù)據(jù)#基本模板#靜態(tài)資源5.││──favicon.ico6.│└──index.html

#favicon圖標(biāo)#html模板7.├──src #源代碼8.│├──api9.│├──assets10.│├──components11.│├──directive12.│├──filters13.│├──icons14.│├──lang15.│├──layout16.│├──router17.│├──store18.│├──styles19.│├──utils20.│├──vendor21.│├──views22.│├──App.vue23.│├──main.js24.│└──permission.js

#所有請(qǐng)求#主題字體等靜態(tài)資源#全局公用組件#全局指令#全局filter#項(xiàng)目所有svgicons#國(guó)際化language#全局layout#路由#全局store管理#全局樣式#全局公用方法#公用vendor#views所有頁(yè)面#入口頁(yè)面#入口文件加載組件初始化等#權(quán)限管理25.├──tests #測(cè)試 -7-介紹26.├──.env.xxx27.├──.eslintrc.js28.├──.babelrc29.├──.travis.yml30.├──vue.config.js31.├──postcss.config.js32.└──package.json

#環(huán)境變量配置#eslint配置項(xiàng)#babel-loader配置#自動(dòng)化CI配置#vue-cli配置#postcss配置#package.json安裝1.#克隆項(xiàng)目2.gitclone/PanJiaChen/vue-element-admin.git3.4.#進(jìn)入項(xiàng)目目錄5.cdvue-element-admin6.7.#安裝依賴8.npminstall9.10.#建議不要用cnpm安裝會(huì)有各種詭異的bug可以通過如下操作解決npm下載速度慢的問題11.npminstall--registry=12.13.#本地開發(fā)啟動(dòng)項(xiàng)目14.npmrundevTIP強(qiáng)烈建議不要用直接使用cnpm安裝，會(huì)有各種詭異的bug，可以通過重新指定regstry來解決npm安裝速度慢的問題。若還是不行，可使用\hyarn替代npm。Windows用戶若安裝不成功，很大概率是node-sass安裝失敗，\h解決方案另外因?yàn)閚ode-sass是依賴python環(huán)境的，如果你之前沒有安裝和配置過的話，需要自行查看一下相關(guān)安裝教程。啟動(dòng)完成后會(huì)自動(dòng)打開瀏覽器訪問\hhttp://ocalost:9527，你看到下面的頁(yè)面就代表操作成功了。 -8-介紹接下來你可以修改代碼進(jìn)行業(yè)務(wù)開發(fā)了，本項(xiàng)目?jī)?nèi)建了典型業(yè)務(wù)模板、常用業(yè)務(wù)組件、模擬數(shù)據(jù)、實(shí)時(shí)預(yù)覽、狀態(tài)管理、國(guó)際化、全局路由等等各種實(shí)用的功能來輔助開發(fā)，你可以繼續(xù)閱讀和探索左側(cè)的其它文檔。建議你可以把vue-element-admin當(dāng)做工具箱或者集成方案?jìng)}庫(kù)，在vue-admin-template的基礎(chǔ)上進(jìn)行二次開發(fā)，想要什么功能或者組件就去vue-element-admin那里復(fù)制過來。Contribution本文檔項(xiàng)目地址\hvue-eleent-dmin-site基于\hvuepress開發(fā)。有任何修改和建議都可以該項(xiàng)目pr和issue\hvue-eleent-還在持續(xù)迭代中，逐步沉淀和總結(jié)出更多功能和相應(yīng)的實(shí)現(xiàn)代碼，總結(jié)中后臺(tái)產(chǎn)品模板/件/\h和反饋。捐贈(zèng)如果你覺得這個(gè)項(xiàng)目幫助到了你，你可以幫作者買一杯果汁表示鼓勵(lì)?\hDonateBrowsersSupportModernbrosersandIntrnetExplorer10+. -9-介紹IE/EdgeIE10,IE11,Edge

Firefoxlast2versios

Chromelast2versios

Safarilast2versios其它群主\h圈子群主會(huì)經(jīng)常分享一些技術(shù)相關(guān)的東西，或者加入\hqq群或者關(guān)注\h微博。Vue生態(tài)圈首先了解這些vue生態(tài)圈的東西，會(huì)對(duì)你上手本項(xiàng)目有很大的幫助。\hVueRouter是vue官方的路由。它能快速的幫助你構(gòu)建一個(gè)單頁(yè)面或者多頁(yè)面的項(xiàng)目。\hVuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。它能解決你很多全局狀態(tài)或者組件之間通信的問題。\hVueLoader是為vue文件定制的一個(gè)webpack的loaer，它允許你以一種名為單文件組件(SFCs)的格式撰寫Vue組件。它能在開發(fā)過程中使用熱重載來保持狀態(tài)，為每個(gè)組件模擬出scopedCSS等等功能。不過大部分情況下你不需要對(duì)它直接進(jìn)行配置，腳手架都幫你封裝好了。\hVueTestUtils\hVueDev-Tols率。

是官方提供的一個(gè)單元測(cè)試工具。它能讓你更方便的寫單元測(cè)試。Vue在瀏覽器下的調(diào)試工具。寫vue必備的一個(gè)瀏覽器插件，能大大的提高你調(diào)試的效\hVueCLI是官方提供的一個(gè)vue項(xiàng)目腳手架，本項(xiàng)目也是基于它進(jìn)行構(gòu)建的。它幫你封裝了大量的webpack、等其它配置，讓你能花更少的精力在搭建環(huán)境上，從而能更專注于頁(yè)面代碼的編寫。不過所有的腳手架都是針對(duì)大部分情況的，所以一些特殊的需求還是需要自己進(jìn)行配置。建議先閱讀一遍它的文檔，對(duì)一些配置有一些基本的了解。\hVetur是VSCode的插件.如果你使用VSCoe來寫vue的話，這個(gè)插件是必不可少的。 -10-布局布局頁(yè)面整體布局是一個(gè)產(chǎn)品最外層的框架結(jié)構(gòu)，往往會(huì)包含導(dǎo)航、側(cè)邊欄、面包屑以及內(nèi)容等。想要了解一個(gè)后臺(tái)項(xiàng)目，先要了解它的基礎(chǔ)布局。Layout對(duì)應(yīng)代碼\h@/layout@是webpack的\halias不懂得請(qǐng)自行研究vue-element-admin中大部分頁(yè)面都是基于這個(gè)layout的，除了個(gè)別頁(yè)面如：login,404,401等頁(yè)面沒有使用該layout。如果你想在一個(gè)項(xiàng)目中有多種不同的layout也是很方便的，只要在一級(jí)路由那里選擇不同的layout組件就行。1.//Nolayout2.{3.path:'/401',4.component:()=>import('errorPage/401')5.}6.7.//Haslayout8.{9.path:'/documentation',10.11.//你可以選擇不同的layout組件 --布局12.component:Layout,13.14.//這里開始對(duì)應(yīng)的路由都會(huì)顯示在app-main中如上圖所示15.children:[{16. path:'index',17. component:()=>import('documentation/index'),18. name:'documentation'19.}]20.}這里使用了vue-router\h路由嵌套,所以一般情況下，你增加或者修改頁(yè)面只會(huì)影響app-main這個(gè)主體區(qū)域。其它配置在layout中的內(nèi)容如：側(cè)邊欄或者導(dǎo)航欄都是不會(huì)隨著你主體頁(yè)面變化而變化的。1./foo2.++

/bar++3.|layout | |layout |4.|++| |++|5.||foo.vue6.||

||+>||

||bar.vue |||| ||7.|++|8.++

|++|++當(dāng)然你也可以一個(gè)項(xiàng)目里面使用多個(gè)不同的layout，只要在你想作用的路由父級(jí)上引用它就可以了。app-main對(duì)應(yīng)代碼\h@/layou/comonents/AppM這里在app-main外部包了一層keep-alive主要是為了緩存<router-view>的，配合頁(yè)面的tabs-view標(biāo)簽導(dǎo)航使用，如不需要可自行去除其中transition定義了頁(yè)面之間切換動(dòng)畫，可以根據(jù)自己的需求，自行修改轉(zhuǎn)場(chǎng)動(dòng)畫。相關(guān)\h文檔默認(rèn)提供了fade和fade-transform兩個(gè)轉(zhuǎn)場(chǎng)動(dòng)畫，具體css實(shí)現(xiàn)見\htransiton.sss。如果需要調(diào)整可\h在ApMai.vue中調(diào)整transition的name。router-viewDifferetrouterthesaecomponentvue真實(shí)的業(yè)務(wù)場(chǎng)景中，這種情況很多。比如： -12-布局我創(chuàng)建編輯的頁(yè)面使用的是同一個(gè)componnt發(fā)vue的created或者mounted鉤子\h，官方說你可以通過watch$rute的變化來進(jìn)行處理，但說真的還是蠻麻煩的。后來發(fā)現(xiàn)其實(shí)可以簡(jiǎn)單的在router-view上加上一個(gè)唯一的key，來保證路由切換時(shí)都會(huì)重新渲染觸發(fā)鉤子了。這樣簡(jiǎn)單的多了。1.<router-view:key="key"></router-view>2.3.computed:{4.key(){5. //只要保證key唯一性就可以了，保證不同頁(yè)面的key不相同6. returnthis.$route.fullPath7.}8.}TIP或者可以像本項(xiàng)目中editForm和createForm聲明兩個(gè)不同的view但引入同一個(gè)component。示例代碼\h：@view/example1.<!--create.vue-->2.<template>3.<article-detail:is-edit='false'></article-detail>//create4.</template>5.<script>6.importArticleDetailfrom'./components/ArticleDetail'7.</script>8.9.<!--edit.vue-->10.<template>11. <article-detail:is-edit='true'></article-detail>//edit12.</template>13.<script>14.importArticleDetailfrom'./components/ArticleDetail'15.</script>移動(dòng)端element-ui官方對(duì)自己的定位是桌面端后臺(tái)框架，而且對(duì)于管理后臺(tái)這種重交互的項(xiàng)目來說是不能通過簡(jiǎn)單的適配來滿足桌面端和移動(dòng)端兩端不同的交互，所以真要做移動(dòng)版后臺(tái)，建議重新做一套系統(tǒng)。所以本項(xiàng)目也不會(huì)適配移動(dòng)端，只是用mediaquery做了一點(diǎn)簡(jiǎn)單的響應(yīng)式布局，有需求請(qǐng)自行修改。 -13-路由和側(cè)邊欄路由和側(cè)邊欄路由和側(cè)邊欄是組織起一個(gè)后臺(tái)應(yīng)用的關(guān)鍵骨架。本項(xiàng)目側(cè)邊欄和路由是綁定在一起的，所以你只有在@/router/index.js下面配置對(duì)應(yīng)的路由，側(cè)邊欄就能動(dòng)態(tài)的生成了。大大減輕了手動(dòng)重復(fù)編輯側(cè)邊欄的工作量。當(dāng)然這樣就需要在配置路由的時(shí)候遵循一些約定的規(guī)則。配置項(xiàng)首先我們了解一下本項(xiàng)目配置路由時(shí)提供了哪些配置項(xiàng)。1.//當(dāng)設(shè)置true的時(shí)候該路由不會(huì)在側(cè)邊欄出現(xiàn)如401，login等頁(yè)面，或者如一些編輯頁(yè)面/edit/12.hidden:true//(默認(rèn)false)3.4.//當(dāng)設(shè)置noRedirect的時(shí)候該路由在面包屑導(dǎo)航中不可被點(diǎn)擊5.redirect:'noRedirect'6.7.//當(dāng)你一個(gè)路由下面的children聲明的路由大于1個(gè)時(shí)，自動(dòng)會(huì)變成嵌套的模式--8.//只有一個(gè)時(shí)，會(huì)將那個(gè)子路由當(dāng)做根路由顯示在側(cè)邊欄--如引導(dǎo)頁(yè)面9.//若你想不管路由下面的children聲明的個(gè)數(shù)都顯示你的根路由10.//你可以設(shè)置alwaysShow:true，這樣它就會(huì)忽略之前定義的規(guī)則，一直顯示根路由11.alwaysShow:true12.13.name:'router-name'//設(shè)定路由的名字，一定要填寫不然使用<keep-alive>時(shí)會(huì)出現(xiàn)各種問題14.meta:{15.roles:['admin','editor']//設(shè)置該路由進(jìn)入的權(quán)限，支持多個(gè)權(quán)限疊加16.title:'title'//設(shè)置該路由在側(cè)邊欄和面包屑中展示的名字17.icon:'svg-name'//設(shè)置該路由的圖標(biāo)，支持svg-class，也支持el-icon-xelement-ui的icon18.noCache:true//如果設(shè)置為true，則不會(huì)被<keep-alive>緩存(默認(rèn)false)19.breadcrumb:false//如果設(shè)置為false，則不會(huì)在breadcrumb面包屑中顯示(認(rèn)true)20.affix:true//如果設(shè)置為true，它則會(huì)固定在tags-view中(默認(rèn)false)21.22.//當(dāng)路由設(shè)置了該屬性，則會(huì)高亮相對(duì)應(yīng)的側(cè)邊欄。23.//這在某些場(chǎng)景非常有用，比如：一個(gè)文章的列表頁(yè)路由為：/article/list24.//點(diǎn)擊文章進(jìn)入文章詳情頁(yè)，這時(shí)候路由為/article/1，但你想在側(cè)邊欄高亮文章列表的路由，就可以進(jìn)行如下設(shè)置25.activeMenu:'/article/list'26.}示例：1.{2.path:'/permission',3.component:Layout,4.redirect:'/permission/index',//重定向地址，在面包屑中點(diǎn)擊會(huì)重定向去的地址5.hidden:true,//不在側(cè)邊欄顯示6.alwaysShow:true,//一直顯示根路由7.meta:{roles:['admin','editor']},//你可以在根路由設(shè)置權(quán)限，這樣它下面所有的子路由都繼承了這個(gè)權(quán)限8.children:[{ -14-路由和側(cè)邊欄9. path:'index',10. component:()=>import('permission/index'),11. name:'permission',12. meta:{13. title:'permission',14. icon:'lock',//圖標(biāo)15. roles:['admin','editor'],//或者你可以給每一個(gè)子路由設(shè)置自己的權(quán)限16. noCache:true//不會(huì)被<keep-alive>緩存17. }18.}]19.}路由這里的路由分為兩種，constantRoutes和asyncRoutes。constans：代表那些不需要?jiǎng)討B(tài)判斷權(quán)限的路由，如登錄頁(yè)、404、等通用頁(yè)面。asyncRo：代表那些需求動(dòng)態(tài)判斷權(quán)限并通過addRoutes動(dòng)態(tài)添加的頁(yè)面。具體的會(huì)在權(quán)限驗(yàn)證頁(yè)面介紹。TIP這里所有的路由頁(yè)面都使用路由懶加載了，具體介紹見文檔如果你想了解更多關(guān)于browsrHis和hashHis，請(qǐng)參看構(gòu)建和發(fā)布。其它的配置和\hvue-rouer官方并沒有區(qū)別，自行查看文檔。注意事項(xiàng)如果這里有一個(gè)需要非常注意的地方就是404頁(yè)面一定要最后加載，如果放在consantRou一同聲明了\h404，后面的所有頁(yè)面都會(huì)被攔截到404，詳細(xì)的問題見addRoteswhenyouvegotawildcad\hroutefor404sdoesnotwork側(cè)邊欄本項(xiàng)目側(cè)邊欄主要基于element-ui的el-menu改造。前面也介紹了，側(cè)邊欄是通過讀取路由并結(jié)合權(quán)限判斷而動(dòng)態(tài)生成的，而且還需要支持路由無限嵌套，所以這里還使用到了遞歸組件。代碼地址\h@/layou/comonents/Side -15-路由和側(cè)邊欄這里同時(shí)也改造了element-ui默認(rèn)側(cè)邊欄不少的樣式，所有的css都可以在\h@/style/sidbar.scss中找到，你也可以根據(jù)自己的需求進(jìn)行修改。這里需要注意一下，一般側(cè)邊欄有兩種形式即：submenu和直接el-menu-item。一個(gè)是嵌套子菜單，另一個(gè)則是直接一個(gè)鏈接。如下圖：在Sidebar中已經(jīng)幫你做了判斷，當(dāng)你一個(gè)路由下面的children聲明的路由大于>1個(gè)時(shí)，自動(dòng)會(huì)變成嵌套的模式。如果子路由正好等于一個(gè)就會(huì)默認(rèn)將子路由作為根路由顯示在側(cè)邊欄中，若不想這樣，可以通過設(shè)置在根路由中設(shè)置alwaysShow:true來取消這一特性。如：1.//Nosubmenu,becausechildren.length===12.{3.path:'/icon',4.component:Layout,5.children:[{6. path:'index',7. component:()=>import('svg-icons/index'),8. name:'icons',9. meta:{title:'icons',icon:'icon'}10.}]11.},12.13.//Hassubmenu,becausechildren.length>=114.{15.path:'/components',16.component:Layout,17.name:'component-demo',18.meta:{19. title:'components',20. icon:'component'21.},22.children:[{path:'tinymce',component:()=>import('components-demo/tinymce'),name:'tinymce-demo',meta:{title:23.'tinymce'}},{path:'markdown',component:()=>import('components-demo/markdown'),name:'markdown-demo',meta:{24.title:'markdown'}},25.]26.}unique-pened你可以\h在S/index.vue中設(shè)置unique-opened來控制側(cè)邊欄，是否只保持一個(gè)子菜單的展開。 -16-路由和側(cè)邊欄多級(jí)目錄(嵌套路由)如果你的路由是多級(jí)目錄，如本項(xiàng)目\h@/viewsnest那樣，有三級(jí)路由嵌套的情況下，不要忘記還要手動(dòng)在二級(jí)目錄的根文件下添加一個(gè)<router-view>。1.<!--父級(jí)路由組件-->2.<template>3.<div>4. <!--xxxhtml內(nèi)容-->5. <router-view/>6.</div>7.</template>如：\h@/viewsnestd/menu1/ind，原則上有多少級(jí)路由嵌套就需要多少個(gè)<router-view>。點(diǎn)擊側(cè)邊欄刷新當(dāng)前路由在用sp(單頁(yè)面應(yīng)用)這種開發(fā)模式之前，用戶每次點(diǎn)擊側(cè)邊欄都會(huì)重新請(qǐng)求這個(gè)頁(yè)面，用戶漸漸養(yǎng)成了點(diǎn)擊側(cè)邊欄當(dāng)前路由來刷新view的習(xí)慣。但現(xiàn)在spa就不一樣了，用戶點(diǎn)擊當(dāng)前高亮的路由并不會(huì)刷新viwvue-rouer會(huì)攔截你的路由，它判斷你的url并沒有任何變化，所以它不會(huì)觸發(fā)任何鉤子或者是view的變化。\hissue地址，社區(qū)也對(duì)該問題展開了激烈討論。 -17-路由和側(cè)邊欄尤大本來也說要增加一個(gè)方法來強(qiáng)刷vie，但后來他又改變了心意ㄒoㄒ)/~~就擺在這里，我們?cè)撛趺崔k呢？他說了不改變curretURL就不會(huì)觸發(fā)任何東西，那我可不可以強(qiáng)行觸發(fā)你的hook呢？上有政策，下有對(duì)策我們變著花來hack。方法也很簡(jiǎn)單，通過不斷改變url的query來觸發(fā)view的變化。我們監(jiān)聽側(cè)邊欄每個(gè)link的click事件，每次點(diǎn)擊都給routerpush一個(gè)不一樣的query來確保會(huì)重新刷新view。1.clickLink(path){2.this.$router.push({3. path,4. query:{5. t:+newDate()//保證每次點(diǎn)擊路由的query項(xiàng)都是不一樣的，確保會(huì)重新刷新6. }7.})8.}ps:不要忘了在router-view加上一個(gè)特定唯一的key，如<router-view:key="$route.path"></router-view>，但這也有一個(gè)弊端就是url后面有一個(gè)很難看的query后綴如/article/list?t=1496832345025你可以從前面的isue中知道還有很多其它方案。我本人在公司項(xiàng)目中，現(xiàn)在采取的方案是判斷當(dāng)前點(diǎn)擊的菜單路由和當(dāng)前的路由是否一致，若一致的時(shí)候，會(huì)先跳轉(zhuǎn)到一個(gè)專門Redirect的頁(yè)面，它會(huì)將路由重定向到我想去的頁(yè)面，這樣就起到了刷新的效果了。相關(guān)例子 -18-路由和側(cè)邊欄點(diǎn)擊圖片所示的全局size大小切換按鈕，你會(huì)發(fā)現(xiàn)頁(yè)面app-main區(qū)域進(jìn)行了刷新。它就是運(yùn)用了重定向到Redirect頁(yè)面之后再重定向回原始頁(yè)面的方法。點(diǎn)擊的時(shí)候重定向頁(yè)面至/redirect1.const{fullPath}=this.$route2.this.$router.replace({3.path:'/redirect'+fullPath4.})redirect頁(yè)面在重定向回原始頁(yè)面1.//redirect.vue2.///PanJiaChen/vue-element-admin/blob/master/src/views/redirect/index.vue3.exportdefault{4.beforeCreate(){5. const{params,query}=this.$route6. const{path}=params7. this.$router.replace({path:'/'+path,query})8.},9.render:function(h){10. returnh()//avoidwarningmessage11.}12.}面包屑本項(xiàng)目中也封裝了一個(gè)面包屑導(dǎo)航，它也是通過watch$route變化動(dòng)態(tài)生成的。它和menu也一樣，也可以通過之前那些配置項(xiàng)控制一些路由在面包屑中的展現(xiàn)。大家也可以結(jié)合自己的業(yè)務(wù)需求增改這些自定義屬性。比如可以在路由中聲明breadcrumb:false，讓其不在breacrumb面包屑顯示。 -19-路由和側(cè)邊欄代碼地址\h@/compoentsBreadcrumb側(cè)邊欄滾動(dòng)問題之前版本的滾動(dòng)都是用css來做處理的1.overflow-y:scroll;2.3.::-webkit-scrollbar{4.display:none;5.}首先這樣寫會(huì)有兼容性問題，在火狐或者其它低版本瀏覽器中都會(huì)比較不美觀。其次在側(cè)邊欄收起的情況下，受限于element-ui的menu組件的實(shí)現(xiàn)方式，不能使用該方式來處理。所以現(xiàn)版本中使用了el-scrollbar來處理側(cè)邊欄滾動(dòng)問題。代碼地址\h@/layou/comonents/Side側(cè)邊欄外鏈v3.8.2+你也可以在側(cè)邊欄中配置一個(gè)外鏈，只要你在path中填寫了合法的url路徑，當(dāng)你點(diǎn)擊側(cè)邊欄的時(shí)候就會(huì)幫你新開這個(gè)頁(yè)面。例如：1.{2."path":"external-link",3."component":Layout,4."children":[5. {6. "path":"/PanJiaChen/vue-element-admin",7. "meta":{"title":"externalLink","icon":"link"}8. }9.]10.}側(cè)邊欄默認(rèn)展開 -20-路由和側(cè)邊欄某些場(chǎng)景下，用戶需要默認(rèn)展開側(cè)邊欄的某些sub-menu，如下圖：可以通過default-openeds來進(jìn)行設(shè)置，首先找到\h側(cè)邊欄代碼1.<el-menu2. :default-openeds="['/example','/nested']"http://添加本行代碼3. :default-active="activeMenu" -21-路由和側(cè)邊欄4. :collapse="isCollapse"5. :background-color="variables.menuBg"6. :text-color="variables.menuText"7. :unique-opened="false"8. :active-text-color="variables.menuActiveText"9. :collapse-transition="false"10. mode="vertical"11. ><sidebar-itemv-for="routeinpermission_routes":key="route.path":item="route":base-12.path="route.path"/>13. </el-menu>注意:dfault-openes=”[/exampe’,’nested’]“里面填寫的是submnu的route-p -22-權(quán)限驗(yàn)證權(quán)限驗(yàn)證在\h手摸手，帶你用vue擼后臺(tái)系列二(登錄權(quán)限篇)這篇文章中其實(shí)已經(jīng)詳細(xì)介紹過了。該項(xiàng)目中權(quán)限的實(shí)現(xiàn)方式是：通過獲取當(dāng)前用戶的權(quán)限去比對(duì)路由表，生成當(dāng)前用戶具有的權(quán)限可訪問的路由表，通過router.addRoutes動(dòng)態(tài)掛載到router上。但其實(shí)很多公司的業(yè)務(wù)邏輯可能不是這樣的，舉一個(gè)例子來說，很多公司的需求是每個(gè)頁(yè)面的權(quán)限是動(dòng)態(tài)配置的，不像本項(xiàng)目中是寫死預(yù)設(shè)的。但其實(shí)原理是相同的。如：你可以在后臺(tái)通過一個(gè)tree控件或者其它展現(xiàn)形式給每一個(gè)頁(yè)面動(dòng)態(tài)配置權(quán)限，之后將這份路由表存儲(chǔ)到后端。當(dāng)用戶登錄后得到roles，前端根據(jù)roles去向后端請(qǐng)求可訪問的路由表，從而動(dòng)態(tài)生成可訪問頁(yè)面，之后就是routr.addRutes動(dòng)態(tài)掛載到rouer上，你會(huì)發(fā)現(xiàn)原理是相同的，萬(wàn)變不離其宗。只是多了一步將后端返回路由表和本地的組件映射到一起。相\h關(guān)isue1.constmap={2.login:require('login/index').default//同步的方式3.login:()=>import('login/index') //異步的方式4.}5.//你存在服務(wù)端的map類似于6.constserviceMap=[7.{path:'/login',component:'login',hidden:true}8.]9.//之后遍歷這個(gè)map，動(dòng)態(tài)生成asyncRoutes10.并將component替換為map[component]Ps:不排除之后本項(xiàng)目會(huì)增加權(quán)限控制面板支持真正的動(dòng)態(tài)配置權(quán)限。邏輯修改現(xiàn)在路由層面權(quán)限的控制代碼都在@/permission.js中，如果想修改邏輯，直接在適當(dāng)?shù)呐袛噙壿嬛衝ext()釋放鉤子即可。指令權(quán)限封裝了一個(gè)指令權(quán)限，能簡(jiǎn)單快速的實(shí)現(xiàn)按鈕級(jí)別的權(quán)限判斷。\hv-permision使用1.<template>2.<!--Admincanseethis-->3.<el-tagv-permission="['admin']">admin</el-tag>4.5.<!--Editorcanseethis--> -23-權(quán)限驗(yàn)證6.<el-tagv-permission="['editor']">editor</el-tag>7.8.<!--Editorcanseethis-->9.<el-tagv-permission="['admin','editor']">Bothadminoreditorcanseethis</el-tag>10.</template>11.12.<script>13.//當(dāng)然你也可以為了方便使用，將它注冊(cè)到全局14.importpermissionfrom'@/directive/permission/index.js'//權(quán)限判斷指令15.exportdefault{16.directives:{permission}17.}18.</script>局限Insomecasesitisnotsuiabletousev-prmission,suchaselementTabcomonentwhichcanonlybeachevedbymanuallysetingthev-if.可以使用全局權(quán)限判斷函數(shù)，用法和指令v-permission類似。1.<template>2.<el-tab-panev-if="checkPermission(['admin'])"label="Admin">Admincanseethis</el-tab-pane>3.<el-tab-panev-if="checkPermission(['editor'])"label="Editor">Editorcanseethis</el-tab-pane><el-tab-panev-if="checkPermission(['admin','editor'])"label="Admin-OR-Editor">Bothadminoreditorcansee4.this</el-tab-pane>5.</template>6.7.<script>8.importcheckPermissionfrom'@/utils/permission'//權(quán)限判斷函數(shù)9.10.exportdefault{11. methods:{12. checkPermission13. }14.}15.</script> -24-快捷導(dǎo)航標(biāo)簽欄導(dǎo)航快捷導(dǎo)航本功能是響應(yīng)大家需求，后期加上的，其實(shí)本人在公司項(xiàng)目或者個(gè)人項(xiàng)目中是不太使用該功能的。以前那些傳統(tǒng)后臺(tái)框架往往會(huì)包含此功能，由于以前的后臺(tái)項(xiàng)目大部分都是多頁(yè)面的形式，所以標(biāo)簽欄導(dǎo)航功能還是具有一定意義的，大部分都是基于if的方式實(shí)現(xiàn)的。但隨著時(shí)代的發(fā)展，現(xiàn)在的后臺(tái)項(xiàng)目幾乎都是spa(siglepagewebaplication單頁(yè)面開發(fā))的方案來實(shí)現(xiàn)標(biāo)簽導(dǎo)航顯然是不合適的。所以目前的方案大致為：運(yùn)用keep-alive和router-view的結(jié)合。代碼:@/layout/components/AppMain.vue1.<keep-alive:include="cachedViews">2.<router-view></router-view>3.</keep-alive>頂部標(biāo)簽欄導(dǎo)航實(shí)際作用相當(dāng)于nav的另一種展現(xiàn)形式，其實(shí)說白了都是一個(gè)個(gè)roter-lik，點(diǎn)擊跳轉(zhuǎn)到相應(yīng)的頁(yè)面。然后我們?cè)賮肀O(jiān)聽路由$route的變化，來判斷當(dāng)前頁(yè)面是否需要重新加載或者已被緩存。visitedViews&&cachedViews目前tags-view維護(hù)了兩個(gè)數(shù)組。visitediews:用戶訪問過的頁(yè)面就是標(biāo)簽欄導(dǎo)航顯示的一個(gè)個(gè)tag數(shù)組集合cachedVews:實(shí)際keep-alive的路由。可以在配置路由的時(shí)候通過meta.noCache來設(shè)置是否需要緩存這個(gè)路由默認(rèn)都緩存。配置文檔注意事項(xiàng)由于目前keep-alive和router-view是強(qiáng)耦合的，而且查看文檔和源碼不難發(fā)現(xiàn)keep-alive的\hinclude默認(rèn)是優(yōu)先匹配組件的name，所以在編寫路由router和路由對(duì)應(yīng)的viewcomponent的時(shí)候一定要確保兩者的name是完全一致的。(切記name命名時(shí)候盡量保證唯一性切記不要和某些組件的命名重復(fù)了，不然會(huì)遞歸引用最后內(nèi)存溢出等問題)DEMO:1.//router路由聲明2.{3.path:'create-form',4.component:()=>import('@/views/form/create'),5.name:'createForm',6.meta:{title:'createForm',icon:'table'}7.} -25-快捷導(dǎo)航標(biāo)簽欄導(dǎo)航1.//路由對(duì)應(yīng)的viewform/create2.exportdefault{3.name:'createForm'4.}一定要保證兩者的名字相同，切記寫重或者寫錯(cuò)。默認(rèn)如果不寫name就不會(huì)被緩存，詳情\h見isue。緩存不適合場(chǎng)景目前緩存的方案對(duì)于某些業(yè)務(wù)是不適合的，比如文章詳情頁(yè)這種/article/1 /article/2，他們的路由不同但對(duì)應(yīng)的組件卻是一樣的，所以他們的組件nae就是一樣的，就如前面提到的，keep-alive的include只能根據(jù)組件名來進(jìn)行緩存，所以這樣就出問題了。目前有兩種解決方案：不使用keep-alive的include功能，直接是用keep-aive緩存所有組件，這樣子是支持前面所說的業(yè)務(wù)情況的。前\h往@t/componentain.vue文件下，移除include相關(guān)代碼即可。當(dāng)然直接使用keeve也是有弊端的，他并不能動(dòng)態(tài)的刪除緩存，你最多只能幫它設(shè)置一個(gè)最大緩存實(shí)例的個(gè)數(shù)limit\h。相關(guān)issue使用loc等瀏覽器緩存方案，自己進(jìn)行緩存處理Affix固釘v3.10.0+當(dāng)在聲明路由是添加了Afix屬性，則當(dāng)前tag會(huì)被固定在tags-view中（不可被刪除）。1.{2. path:'',3. component:Layout,4. redirect:'dashboard',5. children:[6. {7. path:'dashboard', -26-快捷導(dǎo)航標(biāo)簽欄導(dǎo)航8. component:()=>import('@/views/dashboard/index'),9. name:'Dashboard',10. meta:{11. title:'dashboard',12. icon:'dashboard',13. noCache:true,14. affix:true15. }16. }17. ]18.}移除其實(shí)kep-alive\h源碼不復(fù)雜，但邏輯還是蠻繞的，之前尤大自己修復(fù)一個(gè)bug的時(shí)候也不小心搞錯(cuò)了，連發(fā)兩個(gè)版本來修復(fù)，所以如果沒有標(biāo)簽導(dǎo)航欄需求的用戶，建議移除此功能。首先找到@/layout/components/AppMain.vue然后移除keep-alive1.<template>2.<sectionclass="app-main"style="min-height:100%">3. <transitionname="fade-transform"mode="out-in">4. <router-view></router-view>5. </transition>6.</section>7.</template>然后移除整個(gè)@/layout/components/TagsView.vue文件，并在@/layout/components/index和@/layout/Layout.vue移除相的依賴。最后把@/store/modules/tagsView相關(guān)的代碼刪除即可。 -27-新增頁(yè)面新增頁(yè)面如果熟悉vue-router的配置就很簡(jiǎn)單了。首先在@/router/index.js中增加你需要添加的路由。如：新增一個(gè)excel頁(yè)面1.{2.path:'/excel',3.component:Layout,4.redirect:'/excel/export-excel',5.name:'excel',6.meta:{7. title:'excel',8. icon:'excel'9.}10.}TIP僅僅這樣不會(huì)有任何效果的，它只是創(chuàng)建了一個(gè)基于layout的一級(jí)路由，你還需要在它下面的children中添加子路由。1.{2.path:'/excel',3.component:Layout,4.redirect:'/excel/export-excel',5.name:'excel',6.meta:{7. title:'excel',8. icon:'excel'9.},10.children:[11. {12. path:'export-excel',13. component:()=>import('excel/exportExcel'),14. name:'exportExcel',15. meta:{title:'exportExcel'}16. }17.]18.}這樣側(cè)邊欄就會(huì)出現(xiàn)如圖所示的menu-item了 -28-新增頁(yè)面TIP由于children下面只聲明了一個(gè)路由所以不會(huì)有展開箭頭，如果children下面的路由個(gè)數(shù)大于1就會(huì)有展開箭頭，如下面所示。如果你想忽視這個(gè)自動(dòng)判斷可以使用alwaysShow:true，這樣它就會(huì)忽略之前定義的規(guī)則，一直顯示根路由。詳情見路由和側(cè)邊欄1.{2.path:'/excel',3.component:Layout,4.redirect:'/excel/export-excel',5.name:'excel',6.meta:{7. title:'excel',8. icon:'excel'9.},10.children:[{path:'export-excel',component:()=>import('excel/exportExcel'),name:'exportExcel',meta:{title:11.'exportExcel'}},{path:'export-selected-excel',component:()=>import('excel/selectExcel'),name:'selectExcel',meta:{12.title:'selectExcel'}},{path:'upload-excel',component:()=>import('excel/uploadExcel'),name:'uploadExcel',meta:{title:13.'uploadExcel'}}14.]15.}側(cè)邊欄就會(huì)出現(xiàn)如圖所示的submenu了多級(jí)目錄(嵌套路由)如果你的路由是多級(jí)目錄，如本項(xiàng)目\h@/viewsnest那樣，有三級(jí)路由嵌套的情況下，不要忘記還要手動(dòng)在二級(jí)目錄的根文件下添加一個(gè)<router-view>。1.<!--父級(jí)路由組件-->2.<template>3.<div>4. <!--xxxhtml內(nèi)容-->5. <router-view/>6.</div> -29-新增頁(yè)面7.</template>如\h：@/nested/menex.vue，原則上有多少級(jí)路由嵌套就需要多少個(gè)<router-view>。新增view新增完路由之后不要忘記在@/views文件下創(chuàng)建對(duì)應(yīng)的文件夾，一般一個(gè)路由對(duì)應(yīng)一個(gè)文件，該模塊下的功能組件或者方法就建議在本文件夾下創(chuàng)建一個(gè)utils或components文件夾，各個(gè)功能模塊維護(hù)自己的utils或components組件。如：新增api最后在\h@/api文件夾下創(chuàng)建本模塊對(duì)應(yīng)的api服務(wù)。新增組件個(gè)人寫vue項(xiàng)目的習(xí)慣，在全局的@/components只會(huì)寫一些全局的組件，如富文本，各種搜索組件，封裝的日期組件等等能被公用的組件。每個(gè)頁(yè)面或者模塊特定的業(yè)務(wù)組件則會(huì)寫在當(dāng)前views下面。如：@/views/article/components/xxx.vue。這樣拆分大大減輕了維護(hù)成本。請(qǐng)記住拆分組件最大的好處不是公用而是可維護(hù)性！ -30-新增頁(yè)面新增樣式頁(yè)面的樣式和組件是一個(gè)道理，全局的@/style放置一下全局公用的樣式，每一個(gè)頁(yè)面的樣式就寫在當(dāng)前views下面，請(qǐng)記住加上scoped或者命名空間，避免造成全局的樣式污染。1.<style>2./*globalstyles*/3.</style>4.5.<stylescoped>6./*localstyles*/7..xxx-container{8./*namescoped*/9.xxx10.}11.</style> -31-樣式樣式CSSModules在樣式開發(fā)過程中，有兩個(gè)問題比較突出：全局污染——CSS文件中的選擇器是全局生效的，不同文件中的同名選擇器，根據(jù)buid后生成文件中的先后順序，后面的樣式會(huì)將前面的覆蓋；選擇器復(fù)雜——為了避免上面的問題，我們?cè)诰帉憳邮降臅r(shí)候不得不小心翼翼，類名里會(huì)帶上限制范圍的標(biāo)示，變得越來越長(zhǎng)，多人開發(fā)時(shí)還很容易導(dǎo)致命名風(fēng)格混亂，一個(gè)元素上使用的選擇器個(gè)數(shù)也可能越來越多，最終導(dǎo)致難以維護(hù)。好在vue為我們提供了\hscoped可以很方便的解決上述問題。它顧名思義給css加了一個(gè)域的概念。1./*編譯前*/2..example{3.color:red;4.}5.6./*編譯后*/7..example[_v-f3f3eg9]{8.color:red;9.}只要加上<stylescoped>這樣css就只會(huì)作用在當(dāng)前組件內(nèi)了。詳細(xì)文檔見\hvue-loaerTIP使用scoped后，父組件的樣式將不會(huì)滲透到子組件中。不過一個(gè)子組件的根節(jié)點(diǎn)會(huì)同時(shí)受其父組件的scpedCSS和子組件的scopedCSS的影響。這樣設(shè)計(jì)是為了讓父組件可以從布局的角度出發(fā)，調(diào)整其子組件根元素的樣式。目錄結(jié)構(gòu)vue-eleent-所有全局樣式都在@/styles下設(shè)置1.├──styles2.│├──btn.scss3.│├──element-ui.scss4.│├──index.scss5.│├──mixin.scss6.│├──sidebar.scss7.│├──transition.scss8.│└──variables.scss

#按鈕樣式#全局自定義element-ui樣式#全局通用樣式#全局mixin#sidebarcss#vuetransition動(dòng)畫#全局變量 -32-樣式常見的工作流程是，全局樣式都寫在src/styles目錄下，每個(gè)頁(yè)面自己對(duì)應(yīng)的樣式都寫在自己的.vue文件之中1.<style>2./*globalstyles*/3.</style>4.5.<stylescoped>6./*localstyles*/7.</style>自定義element-ui樣式現(xiàn)在我們來說說怎么覆蓋elemnt-ui樣式。由于elment-ui的樣式我們是在全局引入的，所以你想在某個(gè)頁(yè)面里面覆蓋它的樣式就不能加scopd的element樣式，你就可在它的父級(jí)加一個(gè)class，用命名空間來解決問題。1..article{2./*你的命名空間*/3..el-tag{4. /*element-ui元素*/5. margin-right:0px;6.}7.}當(dāng)然也可以使用深度作用選擇器下文會(huì)介紹父組件改變子組件樣式深度選擇器當(dāng)你子組件使用了scoped但在父組件又想修改子組件的樣式可以通過>>>來實(shí)現(xiàn)：1.<stylescoped>2..a>>>.b{/*...*/}3.</style>將會(huì)編譯成1..a[data-v-f3f3eg9].b{2./*...*/3.}如果你使用了一些預(yù)處理的東西，如sass你可以通過/deep/來代替>>>實(shí)現(xiàn)想要的效果。所以你想覆蓋某個(gè)特定頁(yè)面element的button的樣式，你可以這樣做： -33-樣式1..xxx-container>>>.el-button{2.xxxx3.}\h官方文檔Autoprefixer[新版本已無該問題]vue-cli有一個(gè)小坑，它默認(rèn)autoprfixer只會(huì)對(duì)通過vue-loader引入的樣式才會(huì)有有作用，換而言之也就是.ve文件里面的cssautopreixer才會(huì)效果。相關(guān)問題\hissues/44,\hissues/00。解決方案也很簡(jiǎn)單粗暴1.//app.vue2.<stylelang="scss">3.@import'./styles/index.scss';//全局自定義的css樣式4.</style>你在.ve文件中引入你要的樣式就可以了，或者你可以改變vue-cli的文件在css-loader前面在加一個(gè)postcssloadr，在前面的issue地址中已經(jīng)給出了解決方案。不過新版本已經(jīng)默認(rèn)解決處理了這個(gè)問題。Postcss這里再來說一下pstcss的配置問題，新版的\hvue-cliwepack模板init之后根目錄下默認(rèn)有一個(gè)postcss.config.js。vueloadr的postcss會(huì)默認(rèn)讀取這個(gè)文件的里的配置項(xiàng)，所以在這里直接改配置文件就可以了。配置和\hpostcss是一樣的。1.//postcss.config.js2.module.exports={3.plugins:{4. autoprefixer:{}5.}6.}7.8.//package.json9."browserslist":[10. ">1%",11. "last2versions",12. "notie<=8"13.]如上面代碼所述的，auer會(huì)去讀取packag.json下browserslst的配置參數(shù)>1%兼容全球使用率大于1%的瀏覽器last2versions兼容每個(gè)瀏覽器的最近兩個(gè)版本 -34-樣式notie<=8不兼容ie8及以下具體可見\hbrowserlistpostcss也還有很多很多其它的功能大家可以\h自行去探究Mixin本項(xiàng)目沒有設(shè)置自動(dòng)注入sass的mixin到全局，所以需要在使用的地方手動(dòng)引入mixn1.<stylerel="stylesheet/scss"lang="scss">2.@import"src/styles/mixin.scss";3.</style>如需要自動(dòng)將mixin注入到全局，可以使用\hsass-reourcs-loader -35-和服務(wù)端進(jìn)行交互和服務(wù)端進(jìn)行交互前端請(qǐng)求流程在vue-element-admin中，一個(gè)完整的前端UI交互到服務(wù)端處理流程是這樣的：UI組件交互操作；調(diào)用統(tǒng)一管理的apiservie請(qǐng)求函數(shù)；使用封裝的reques.js發(fā)送請(qǐng)求；獲取服務(wù)端返回；更新data；從上面的流程可以看出，為了方便管理維護(hù)，統(tǒng)一的請(qǐng)求處理都放在@/api文件夾中，并且一般按照model緯度進(jìn)行拆分文件，如：1.api/2.login.js3.article.js4.remoteSearch.js5....request.js其中，@/utils/request.js是基于\haxios的封裝，便于統(tǒng)一處理POS，GET等請(qǐng)求參數(shù)，請(qǐng)求頭，以及錯(cuò)誤提示信息等。具體可以參看\hrequestjs。它封裝了全局request攔截器、response攔截器統(tǒng)一的錯(cuò)誤處理統(tǒng)一做了超時(shí)處理、baseURL設(shè)置等。一個(gè)請(qǐng)求文章列表頁(yè)的例子：1.//api/article.js2.importrequestfrom'../utils/request';3.exportfunctionfetchList(query){4.returnrequest({5. url:'/article/list',6. method:'get',7. params:query8.})9.}10.11.12.//views/example/list13.import{fetchList}from'@/api/article'14.exportdefault{ -36-和服務(wù)端進(jìn)行交互15.data(){16. list:null,17. listLoading:true18.},19.methods:{20. fetchData(){21. this.listLoading=true22. fetchList().then(response=>{23. this.list=response.data.items24. this.listLoading=false25. })26. }27.}28.}設(shè)置多個(gè)baseURL我們可以通過環(huán)境變量baseURL，從而請(qǐng)求不同的api地址。1.#.env.development2.VUE_APP_BASE_API='/dev-api'#注入本地api的根路徑3.VUE_APP_BASE_API2='/dev-api2'#注入本地api2的根路徑之后根據(jù)環(huán)境變量創(chuàng)建axios實(shí)例，讓它具有不同的baseURL。\h@/utilsrequst.js1.//createanaxiosinstance2.constservice=axios.create({3.baseURL:process.env.BASE_API,//api的base_url4.timeout:5000//requesttimeout5.})6.7.constservice2=axios.create({8.baseURL:process.env.BASE_API2,//api2的base_url9.timeout:5000//requesttimeout10.})或者1.exportfunctionfetchList(query){2.returnrequest({3. url:'/article/list',4. method:'get',5. params:query,6. baseURL:'xxxx'//直接通過覆蓋的方式7.})8.} -37-和服務(wù)端進(jìn)行交互從mock直接切換到服務(wù)端請(qǐng)求見Mock和聯(lián)調(diào) -38-MockDaaMockDataMock數(shù)據(jù)是前端開發(fā)過程中必不可少的一環(huán)，是分離前后端開發(fā)的關(guān)鍵鏈路。通過預(yù)先跟服務(wù)器端約定好的接口，模擬請(qǐng)求數(shù)據(jù)甚至邏輯，能夠讓前端開發(fā)更加獨(dú)立自主，不會(huì)被服務(wù)端的開發(fā)所阻塞。Swagger在公司的項(xiàng)目中通常使用\hswagger，由后端來模擬業(yè)務(wù)數(shù)據(jù)。swager是一個(gè)RESTAPIs文檔生成工具，\h它從代碼注釋中自動(dòng)生成文檔，可以跨平臺(tái)，開源，支持大部分語(yǔ)言，社區(qū)好，總之非常不錯(cuò)，強(qiáng)烈推薦。線上\hdemoEasy-Mock\hvue-admn-teplate之前使用的是\heasy-mok來模擬數(shù)據(jù)。它是一個(gè)純前端可視化，并且能快速生成模擬數(shù)據(jù)的持久化服務(wù)。非常的簡(jiǎn)單易用還能結(jié)合swagger，天然支持跨域，不管團(tuán)隊(duì)還是個(gè)人項(xiàng)目都值得一試。WARNING現(xiàn)在線上版本的vue-admin-template已經(jīng)不使用easy-mock。因?yàn)閑asy-mock提供的線上免費(fèi)服務(wù)很不穩(wěn)定，時(shí)不時(shí)的就會(huì)掛掉，如果有需要的可以自己按照它的教程，搭建自己的服務(wù)。Mockjs由于\hvue-eleent-是一個(gè)純前端個(gè)人項(xiàng)目，所有的數(shù)據(jù)都是用\hmockjs模擬生成。它的原理是:攔截了所有的請(qǐng)求并代理到本地，然后進(jìn)行數(shù)據(jù)模擬，所以你會(huì)發(fā)現(xiàn)network中沒有發(fā)出任何的請(qǐng)求。但它的最大的問題是就是它的實(shí)現(xiàn)機(jī)制。它會(huì)重寫瀏覽器的XMLHttpRequest對(duì)象，從而才能攔截所有請(qǐng)求，代理到本地。大部分情況下用起來還是蠻方便的，但就因?yàn)樗貙懥薠MLHttpRequest對(duì)象，所以比如progress方法，或者一些底層依賴XMLHttpRequest的庫(kù)都會(huì)和它發(fā)生不兼容，可以看一下我項(xiàng)目的\hissues，就知道多少人被坑了。它還有一個(gè)問題是，因?yàn)槭撬镜啬M的數(shù)據(jù)，實(shí)際上不會(huì)走任何網(wǎng)絡(luò)請(qǐng)求。所以本地調(diào)試起來很蛋疼，只能通過console.log來調(diào)試。就拿vue-element-admin來說，想搞清楚getInfo()接口返回了什么數(shù)據(jù)，只能通過看源碼或者手動(dòng)Debug才能知道。新方案v4.0.0+在v4.0版本之后，在本地會(huì)啟動(dòng)一個(gè)mock-server來模擬數(shù)據(jù)，線上環(huán)境還是繼續(xù)使用mockjs來進(jìn)行模擬(因?yàn)楸卷?xiàng)目是一個(gè)純前端項(xiàng)目，你也可以自己搭建一個(gè)線上servr來提供數(shù)據(jù))都是基于mockjs生成的，所以只要寫一套mok數(shù)據(jù)，就可以在多環(huán)境中使用。 -39-MockDaa該方案的好處是，在保留mockjs的優(yōu)勢(shì)的同時(shí)，解決之前的痛點(diǎn)。由于我們的mok是完全基于webpack-dev-serve來實(shí)現(xiàn)的，所以在你啟動(dòng)前端服務(wù)的同時(shí)，mock-server就會(huì)自動(dòng)啟動(dòng)，而且這里還通過\hchokidar來觀察mock文件夾內(nèi)容的變化。在發(fā)生變化時(shí)會(huì)清除之前注冊(cè)的mock-api接口，重新動(dòng)態(tài)掛載新的接口，從而支持熱更新。有興趣的可以自己看一下代\h碼mrver.js。由于是一個(gè)真正的server，所以你可以通過控制臺(tái)中的network，清楚的知道接口返回的數(shù)據(jù)結(jié)構(gòu)。并且同時(shí)解決了之前mockjs會(huì)重寫XMLHttpRequest對(duì)象，導(dǎo)致很多第三方庫(kù)失效的問題。本項(xiàng)目的所有請(qǐng)求都是通過封裝\h的rques進(jìn)行發(fā)送的，通過閱讀源碼可以發(fā)現(xiàn)所有的請(qǐng)求都設(shè)置了一個(gè)baseURL，而這個(gè)baseURL又是通過讀取process.env.VUE_APP_BASE_API這個(gè)環(huán)境變量來動(dòng)態(tài)設(shè)置的，這樣方便我們做到不同環(huán)境使用不同的api地址。移除如果你不想使用mock-servr的話只要在\hvue.conig.js中移除webpack-dev-server中proxy和after這個(gè)Middleware就可以了?，F(xiàn)在默認(rèn)情況下本地的請(qǐng)求會(huì)代理到http://localhost:${port}/mock下，如果你想調(diào)整為自己的mock地址可以修改proxy1.proxy:{2.//changexxx-api/login=>mock/login3.//detail:/config/#devserver-proxy4.[process.env.VUE_APP_BASE_API]:{5. target:`http://localhost:${port}/mock`,6. changeOrigin:true,7. pathRewrite:{8. ['^'+process.env.VUE_APP_BASE_API]:''9. }10.}11.},12.after:require('./m