餓了么基于vue2.0的通用組件庫開發(fā)之路

餓了么基于Vue2.02016-11-09Element 月日，『前端之巔』 Element是由餓了么UED設(shè)計、餓了么大前端開發(fā)的一套基于Vue2.0的桌面端組件庫。今天我們要的就是開發(fā)Element的一些心得。大部分項目都是源于業(yè)務(wù)方的需求，Element也是一樣。隨著公司的業(yè)務(wù)發(fā)展，內(nèi)部開始衍生出很多系統(tǒng)，UED部門也接到越來越多的設(shè)計需求。分析這整個過程，我們發(fā)現(xiàn)如下問題：下面簡單說一下設(shè)計Element總結(jié)了公司不同系統(tǒng)不同組件的使用情況后，我們打算從業(yè)務(wù)組件入手，因為這部份是由公司特殊需求衍生的解決方案。解決了這些棘手的問題，也能給其他產(chǎn)品帶來好的設(shè)計引導(dǎo)。到這一步，我們開始尋找公司內(nèi)部的開發(fā)團(tuán)隊，并在這時才得知不同團(tuán)隊里使用著不同的前端框架，有ue、React、Angular等。大前端作為獨立的前端團(tuán)隊，有能力開發(fā)底層的工具去服務(wù)不同業(yè)務(wù)，并且Vue也是一套年輕且發(fā)展方向很好的一個技術(shù)棧。UED與大前端的合作一拍即合。跟大前端接觸后，才發(fā)現(xiàn)最開始的方向并不正確，因為業(yè)務(wù)變化過快，即使有通用的業(yè)務(wù)組件，也很難跟上需求的變化，而基礎(chǔ)組件才是所有開發(fā)團(tuán)隊都需要的通用組件。這時候我們開始把方向調(diào)整為基礎(chǔ)組件的設(shè)計。前期的設(shè)計工作主要是由交互設(shè)計師進(jìn)行設(shè)計，等確認(rèn)完所有組件的功能和交互后，開始進(jìn)行視覺階段，這中間包括制定顏色、字體等各類規(guī)范，也同時進(jìn)行主體的設(shè)計。輸出UIKit第一版上線后視覺效果并不好，我們內(nèi)部進(jìn)行了調(diào)整，再次上線后就是大家現(xiàn)在看到的樣子。Vue在公司內(nèi)部是一個比較年輕的技術(shù)棧，希望做一些基礎(chǔ)設(shè)施的建設(shè)完成組件開發(fā)，為編寫例子和文在開發(fā)之初，我們就在思考如何降低組件的耦合度，確保組件可以獨立工作。這樣的目的是可以保證組件可以依賴其他組件、讓用戶只加載其中幾個組件甚至在安裝時只安裝需要的組件。最先想到的做法是一個組件單獨一個倉庫，而組件庫項目就是把組件作為依賴引入。但是由于人手不足，這樣的機制導(dǎo)致開發(fā)太耗時間，每個組件都需要單獨和打包，同時還要組件庫項目的各依賴的版本號。我們只能另尋方案。后來參考了babel項目的管理方式：所有子項目放在

里，一個子項目可以當(dāng)作一個獨立的倉庫。通過lerna結(jié)合自身項目的特點以及babel 放在，共用函數(shù)放在 組件分別打包成獨立文件，同時發(fā)布時還將發(fā)布組件庫和獨立組件，滿足不同用戶的使用需求。制這樣在直接覆蓋樣式或者單獨寫一套都會方許多。所以我們采用M的方式管理類名同，套?？紤]到不同用戶的使用習(xí)慣，我們沒有選用Less或Sass之類的有各自風(fēng)格的預(yù)處理器，而是選用了更接近未來標(biāo)準(zhǔn)的CSS4風(fēng)格的語法，用PostCSS和整合了postcss-bem和postcss-cssnext等插件的postcss-salad開發(fā)。為了降低用戶自定義的上手成本，我們還提供了命令行工具指導(dǎo)用戶快速自定義一套主題。文檔不僅是讓用戶看起來直觀，也要讓編寫者寫起來直觀。所以最簡單的方式是用Markdown寫文檔。但是就會產(chǎn)生另一個問題：如何在文檔里寫可運行的示例？常規(guī)的做法是把文檔寫在ue文件里，這樣就可以在里面調(diào)用其他組件，但是這樣就違背了寫「直觀」文檔的初衷。經(jīng)過幾番嘗試，結(jié)合Vue的特點。我們寫了一套處理Markdown文件的wckloader，可以將Markdown轉(zhuǎn)成Vue文件，不僅降低了文檔的成本，同時也將文檔里運行組件示例變成可Element在立項之初其實并沒有考慮的問題。項目開源之后，我們陸續(xù)收到了一些外國為Element有了英文文檔就需要有英文，這就需要對官網(wǎng)的現(xiàn)有結(jié)構(gòu)進(jìn)行修改和升級；同時為了面向未來，需要官網(wǎng)能夠兼容除英語外的其他多語言。為此我們做了以下工作： 官網(wǎng)中除了文檔外，還有一些介紹性質(zhì)的頁面。這些頁面中文字比較多，如果人工管理每種語言的頁面，若需要修改則必須去每個頁面相應(yīng)的位置進(jìn)行編輯，有些繁瑣。我們的做法是：每個頁面對應(yīng)一個模板，模板中的文字全部抽取到一個語言配置文件中，并且寫了一個生成最終的頁面。這樣在需要修改時，只需在語言配置文件中編輯對應(yīng)的字段即可。 中英文的顯示效ES2015CSS4作開發(fā)語言、Lerna負(fù)責(zé)管理組件、用Karma搭配Mocha和Chai等工具在TravisCI里做持續(xù)集成測試，最后用Markdown結(jié)合Vue寫文檔。我們甚至還在CI里實現(xiàn)了自動部署和推送倉庫代碼等功能，提升了不少具體到組件層面，在開發(fā)的過程中不可避免地會遇到一些問題。下面是我們的一些應(yīng)對策略，希望能夠拋磚引玉，大家的思考和討論。在Vue2.0中，用于父子組件間通信 慮是，基于組件樹結(jié)構(gòu)的流方式讓人難以理解，并且在組件結(jié)構(gòu)擴展的過程中會變得越來越脆弱。但是類似Element這樣的組件庫有幾個特點：首先，父子組件間互相通信的場景非常

出于以上考慮，我們實現(xiàn)了簡化版 ，并把它們包裝成了 dispatchdispatch(componentName,eventName,{varparent=this.$parent||this.$root;varname= while(parent&&(!name||name!=={parent=ifif(parent)name=if(parent)parent.$emit.apply(parent,

v-在Vue2.0v-

<<ponent這樣一來，很多不太熟悉Vue2.0語法的用戶會發(fā)現(xiàn)給Element的組件綁定原生總是不生效。事實上，我們從開源以來收到的issue里被問得最多的一個問題是：如何給 事實上我們只需要添加一行代碼就能解決問題，但是關(guān)于是否需要讓用戶可以直接原生事件這件事在我們內(nèi)部有兩種不同的觀點：一邊認(rèn)為應(yīng)該遵循ue的設(shè)計思想，原生要加naive；另一邊認(rèn)為buton最常用的就是click，幫助用戶做這件事可以降低學(xué)習(xí)成本。后來我們專門咨詢了本人，他的觀點是，對于一些組件的常用，可以允許用戶直接監(jiān) 在絕大部分場景下都是需要點擊的。現(xiàn)在 支持以下兩種寫法<<el-button@click.native="handleClick">ClickMe!</el-<el-button@click="handleClick">ClickMe!</el-版本迭代的過程中，若API在歷次迭代中，我們會盡量保持API的一致。但是在一些萬不得已的情況下，需要對API作出一些更新。對于老版本的用戶而言，如果使用了被移除的API，升級到新版后會出現(xiàn)一些意料之 的API

constconst{props,events}=this.getMigratingConfig();const{data,componentOptions}=this.$vnode;constdefinedProps=data.attrs||{};constdefinedEvents=componentOptions.listeners||forfor(letpropNameindefinedProps)if(definedProps.hasOwnProperty(propName)&&{console.warn(`[ElementMigrating][Attribute]:for(leteventNameindefinedEvents)if(definedEvents.hasOwnProperty(eventName)&&{console.warn(`[ElementMigrating][Event]:{returnprops:'selection-mode':'Table:selection-mode{returnprops:'selection-mode':'Table:selection-modehasbeenevents:cellclick:'Table:cellclickhasbeenrenamedtocell-我們選擇使用Tower來配合 進(jìn)行issue的追蹤和處理。首先在Tower上建立幾個清 n、Design、Develop和Release。隨后具體的操作流程如下： 上添加 拖進(jìn)Tower的Design

，并在Tower n中添加相應(yīng)設(shè)計完成后，開發(fā)接手，同時把任務(wù)拖進(jìn)Develop 倉庫，關(guān)閉相應(yīng)issue，最后將任務(wù)拖進(jìn)ReleaseElemnt Vue20正處于RC階段，我們隨VeiseVeVe自從9月開源以來，在社區(qū)的幫助下，Element逐漸成熟，我們也在今天發(fā)布了它的第一個正式版本。希望越來越多的人能夠參與進(jìn)來，和我們一起把Element做得更好。/ElemeFE/postcss-Eemet開發(fā)團(tuán)隊：簡單的樣式可以通過覆蓋來修改；對于大規(guī)模的自定義，我們提供了一套自定義的工具，文檔看這里： /lemeFEelementblob/maser/cusom-heme.md。簡單來說，通過修改樣式變量、編譯、引入，就可以實現(xiàn)自定義。淀粉提問：ue的作者給出了一套學(xué)習(xí)ue路徑，那Eleet是否有閱讀源碼的路徑呢，怎么樣才可以較為方便的理解源碼，并且在基礎(chǔ)組件不能滿足自己業(yè)務(wù)的時候?qū)懗鲎约旱慕M件呢？Eemet開發(fā)團(tuán)隊：閱讀源碼的話，可以先clone項目后，先試試用npmrunnew指令創(chuàng)建一個新組件，看看我們的一個組件包含了哪些東西。要理解源碼的話就自己邊改代碼邊測試效果吧。Element開發(fā)團(tuán)隊：Element開發(fā)團(tuán)隊：Element的主頁是一個SPA，每種語言對應(yīng)了一個.vue文件，而這些Element開發(fā)團(tuán)隊：目前沒有將 組件庫了 /ElemeFE/mint-ui，它有兩個版本，分別兼容Vue1.x和2.0淀粉提問：寫在Vue文件中的MarkDownElement開發(fā)團(tuán)隊：Vue和MarkDown的結(jié)合，我們是自己做了一個vue-markdown-loader,作用是將MarkDown文件轉(zhuǎn)成Vue組件（生成的文件在插件的.cache vue-loader處理。可以去看看這個loader的源碼就明白了。淀粉提問：既然是基于e了，那么Eement還有繼續(xù)的必要嗎？而且目前框架那么多，ue也得到了人的認(rèn)可。Eleent以后得生態(tài)如何保證？畢竟還只有目前餓了么一個團(tuán)隊在用。Element開發(fā)團(tuán)隊：不太清楚“Element還有繼續(xù)的必要”是什么意思，據(jù)我們在Gitter對用戶的了解，現(xiàn)在已經(jīng)有不少用戶將Element實用到他們公司的產(chǎn)品開發(fā)里。Element的生態(tài)發(fā)展除淀粉提問：在組件開發(fā)中,有對復(fù)用性很高的業(yè)務(wù)組件做過積累嗎？如果做過～是怎么這些業(yè)務(wù)組件的？也是同邏輯組件的方法一樣嗎？Eemet開發(fā)團(tuán)隊：組件開發(fā)中會不斷收到各種的功能需求的反饋，通過 倉庫issue推動我們組件的功能更新和。不太清楚“邏輯組件”的含義，Element里除了按鈕這樣特殊的組件外都是帶有邏輯的。Element開發(fā)團(tuán)隊：在組件開發(fā)過程中沒有參考任何jq插件的動效。實際上基于mvvm框架下的組件庫開發(fā)相對于jq是輕松很多的，因為你不需要手動地處理綁定和視圖的更新。淀粉提問：的文檔是否有些陳舊沒有更新，Vue目前已經(jīng)不是RC階段了Element開發(fā)團(tuán)隊：文檔中說「開發(fā)時」Vue還處于RC階段，主要指的是今年的月份，那時Vue每更新一個RC版本，我們就跟著做一遍測試，然后發(fā)現(xiàn)幾個bug的情景還歷歷在目。Vue2.0是上個月正式發(fā)布的，我們也在今天發(fā)布了Element的正式版。 cooking或laravel，我們也提供了相應(yīng)的模板： starter、 /ElementUI/element-in-laravel-starter。Element開發(fā)團(tuán)隊：是的。不過自從Element開源以來，社區(qū)出現(xiàn)了一批熱心用戶，他們也貢獻(xiàn)了自己的代碼。所有貢獻(xiàn)者可以從這里看到 /contributors淀粉提問：幾年前，不計算Gzip90k的jQer遭到了人們的嫌棄：太大了，還是用原生吧。幾年后，開啟z后仍有300k的基于Rec的項目，人們覺得：區(qū)區(qū)00k似乎忘了啪臉上有多疼。你怎么看？Eemet開發(fā)團(tuán)隊：這幾年網(wǎng)速已經(jīng)提升不少，同時前端項目的復(fù)雜度也變得越來越高。比起庫的體積，可能現(xiàn)在開發(fā)效率才是開發(fā)者所關(guān)心的。 Element開發(fā)團(tuán)隊：有借鑒過，我們不僅借鑒過AntDesign，國內(nèi)外大大小小的Design Element開發(fā)團(tuán)隊：目前我們還沒有精力去收集整理使用了Element的項目，不過按照最近一段時間在Gitter里討論看到了一些開發(fā)者的項目，完成質(zhì)量還是挺高的。過段時間我們會在issue里開始征集大家使用Element組件庫的作品做。淀粉提問：如何定制CSS，是覆蓋還是改源碼？改了源碼如果Eement版本更新之后樣式就沒了？Element開發(fā)團(tuán)隊：可以用element-theme自定義工具，或者直接element-theme-default