本文為2016年11月9日，『前端之巔』微信群在線分享活動總結(jié)整理而成，轉(zhuǎn)載請在文章開頭處注明來自『前端之巔』公眾號怠肋。加群學(xué)習(xí)請關(guān)注『前端之巔』公眾號并發(fā)送“加群”坚冀。

原文鏈接：http://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247484467&idx=1&sn=8643c5945adb151db9c6fe757cd6adfa&chksm=972366f1a054efe733e01069b2adb81d453a2c30bbc5329c77948e8160090294bf14918381a1#rd

Element 是由餓了么UED設(shè)計、餓了么大前端開發(fā)的一套基于 Vue 2.0 的桌面端組件庫瀑焦。今天我們要分享的就是開發(fā) Element 的一些心得。
一、設(shè)計目的

大部分項目起源都是源于業(yè)務(wù)方的需求裆甩，Element 也是一樣。隨著公司的業(yè)務(wù)發(fā)展齐唆，內(nèi)部開始衍生出很多后臺系統(tǒng)嗤栓，UED 部門也接到越來越多的設(shè)計需求。分析這整個過程箍邮，我們發(fā)現(xiàn)如下問題：
日漸增多的后臺產(chǎn)品設(shè)計需求

設(shè)計資源有限茉帅，沒辦法支持所有業(yè)務(wù)線

公司內(nèi)部諸多后臺產(chǎn)品使用體驗不一致

于是我們決定：
設(shè)計一套后臺支撐框架叨叙，提升后臺系統(tǒng)的可用性和一致性

套用此框架，即使沒有設(shè)計師參與担敌，也能讓產(chǎn)品或開發(fā)設(shè)計出一套好用的后臺系統(tǒng)

二摔敛、設(shè)計階段

下面簡單說一下設(shè)計 Element 經(jīng)歷的幾個階段。
了解業(yè)務(wù)并熟悉公司內(nèi)各后臺產(chǎn)品全封，尋找業(yè)務(wù)上的共性問題
設(shè)計的目的是為了業(yè)務(wù)服務(wù)马昙。第一步我們從內(nèi)部系統(tǒng)開始入手，了解公司內(nèi)部在使用的各種后臺系統(tǒng)刹悴，將其組件抽象剝離行楞，尋找共性特征。
專注業(yè)務(wù)組件設(shè)計
總結(jié)了公司不同系統(tǒng)不同組件的使用情況后土匀，我們打算從業(yè)務(wù)組件入手子房，因為這部份是由公司特殊需求衍生的解決方案。解決了這些棘手的問題就轧，也能給其他后臺產(chǎn)品帶來好的設(shè)計引導(dǎo)证杭。
尋求開發(fā)支持
到這一步，我們開始尋找公司內(nèi)部的開發(fā)團(tuán)隊妒御，并在這時才得知不同團(tuán)隊里使用著不同的前端框架解愤，有 Vue、React乎莉、Angular 等送讲。
與大前端合作
大前端作為獨立的前端團(tuán)隊，有能力開發(fā)底層的工具去服務(wù)不同業(yè)務(wù)惋啃，并且 Vue 也是一套年輕且發(fā)展方向很好的一個技術(shù)棧哼鬓。UED 與大前端的合作一拍即合。
方向轉(zhuǎn)變边灭，專注于基礎(chǔ)組件
跟大前端接觸后异希，才發(fā)現(xiàn)最開始的方向并不正確，因為業(yè)務(wù)變化過快绒瘦，即使有通用的業(yè)務(wù)組件宠互，也很難跟上需求的變化，而基礎(chǔ)組件才是所有開發(fā)團(tuán)隊都需要的通用組件椭坚。這時候我們開始把方向調(diào)整為基礎(chǔ)組件的設(shè)計予跌。
組件交互完成，進(jìn)行視覺封裝善茎，并搭建主體網(wǎng)站
前期的設(shè)計工作主要是由交互設(shè)計師進(jìn)行設(shè)計券册，等確認(rèn)完所有組件的功能和交互后，開始進(jìn)行視覺階段，這中間包括制定顏色烁焙、字體等各類規(guī)范航邢，也同時進(jìn)行主體網(wǎng)站的設(shè)計。

第一版網(wǎng)站設(shè)計膳殷，此處的「特殊組件」即業(yè)務(wù)組件。

網(wǎng)站二次設(shè)計
第一版網(wǎng)站上線后視覺效果并不好九火，我們內(nèi)部進(jìn)行了調(diào)整赚窃，再次上線后就是大家現(xiàn)在看到的樣子。

后臺系統(tǒng)缺乏一套完整的基礎(chǔ)組件庫

Vue 在公司內(nèi)部是一個比較年輕的技術(shù)棧辱匿，希望做一些基礎(chǔ)設(shè)施的建設(shè)

提升公司在技術(shù)社區(qū)的影響力

四、開發(fā)流程

進(jìn)入開發(fā)階段后炫彩，在總體架構(gòu)方面我們做了一些嘗試匾七，下面按照時間順序分享給大家：
1.如何與設(shè)計師進(jìn)行配合

經(jīng)過項目初期開發(fā)和設(shè)計的磨合，我們提煉了一套組件開發(fā)流程：
根據(jù)交互稿和視覺稿進(jìn)行開發(fā)江兢，期間與設(shè)計師保持溝通

開發(fā)完成后自測昨忆，之后提交設(shè)計師驗收

設(shè)計師提出修改意見，根據(jù)意見進(jìn)行修改

完成組件開發(fā)划址，為網(wǎng)站編寫例子和文檔

2.如何管理多組件項目

在開發(fā)之初扔嵌，我們就在思考如何降低組件的耦合度限府，確保組件可以獨立工作夺颤。這樣的目的是可以保證組件可以依賴其他組件、讓用戶只加載其中幾個組件甚至在安裝時只安裝需要的組件胁勺。最先想到的做法是一個組件單獨一個倉庫世澜，而組件庫項目就是把組件作為依賴引入。
但是由于人手不足署穗，這樣的機(jī)制導(dǎo)致開發(fā)太耗時間寥裂，每個組件都需要單獨維護(hù)和打包，同時還要維護(hù)組件庫項目的各依賴的版本號案疲。我們只能另尋方案封恰。后來參考了 babel 項目的管理方式：所有子項目放在 packages/
目錄里，一個子項目可以當(dāng)作一個獨立的倉庫褐啡。通過 lerna 來管理子項目的依賴和發(fā)布诺舔。
結(jié)合自身項目的特點以及 babel 的這套機(jī)制，我們重構(gòu)了目錄結(jié)構(gòu)：組件可單獨作為一個項目放在 packages/
，共用函數(shù)放在 src/
里低飒。最后的打包結(jié)果會將整個組件打包成一個文件许昨、組件分別打包成獨立文件，同時發(fā)布時還將發(fā)布組件庫和獨立組件褥赊，滿足不同用戶的使用需求糕档。

3.如何解決自定義主題

開發(fā)一套組件庫就離不開定制主題的需求。類名要足夠友好拌喉，盡量避免存在樣式層級嵌套速那，這樣在直接覆蓋樣式或者單獨寫一套主題都會方便許多。所以我們采用 BEM 的方式管理類名司光，同時盡可能將屬性值用變量代替琅坡，維護(hù)一份變量文件便于直接修改變量就能定制一套主題。
考慮到不同用戶的使用習(xí)慣残家，我們沒有選用 Less 或 Sass 之類的有各自風(fēng)格的預(yù)處理器榆俺，而是選用了更接近未來標(biāo)準(zhǔn)的 CSS4 風(fēng)格的語法，用 PostCSS 和整合了 postcss-bem 和 postcss-cssnext 等插件的 postcss-salad 開發(fā)坞淮。
為了降低用戶自定義主題的上手成本茴晋，我們還提供了命令行工具指導(dǎo)用戶快速自定義一套主題。
4.如何提供一份直觀的文檔

文檔不僅是讓用戶看起來直觀回窘，也要讓編寫者寫起來直觀诺擅。所以最簡單的方式是用 Markdown 寫文檔。但是就會產(chǎn)生另一個問題：如何在文檔里寫可運行的示例啡直？常規(guī)的做法是把文檔寫在 Vue 文件里烁涌，這樣就可以在里面調(diào)用其他組件，但是這樣就違背了寫「直觀」文檔的初衷酒觅。
經(jīng)過幾番嘗試撮执，結(jié)合 Vue 的特點。我們寫了一套處理 Markdown 文件的 webpack loader舷丹，可以將 Markdown 轉(zhuǎn)成 Vue 文件抒钱，不僅降低了文檔的維護(hù)成本，同時也將文檔里運行組件示例變成可能颜凯。
5.多語言官網(wǎng)如何配置和管理

Element 在立項之初其實并沒有考慮國際化的問題谋币。項目開源之后，我們陸續(xù)收到了一些外國開發(fā)者的反饋症概，希望能夠增加英文文檔蕾额。不久之后，國內(nèi)的一個翻譯團(tuán)隊主動聯(lián)系到了我們彼城，為 Element 貢獻(xiàn)了整套英文文檔诅蝶。
有了英文文檔就需要有英文網(wǎng)站逼友，這就需要對官網(wǎng)的現(xiàn)有結(jié)構(gòu)進(jìn)行修改和升級；同時為了面向未來秤涩，需要官網(wǎng)能夠兼容除英語外的其他多語言帜乞。為此我們做了以下工作：
（1）路由
官網(wǎng)的路由是根據(jù)一個記錄了導(dǎo)航信息的 json
文件自動生成的。因此需要在這個 json
文件中添加對應(yīng)于其他語言的字段筐眷，并且根據(jù)新的數(shù)據(jù)結(jié)構(gòu)修改路由生成的邏輯黎烈。
（2）頁面
官網(wǎng)中除了文檔外，還有一些介紹性質(zhì)的頁面匀谣。這些頁面中文字比較多照棋，如果人工管理每種語言的頁面，若需要修改則必須去每個頁面相應(yīng)的位置進(jìn)行編輯武翎，有些繁瑣烈炭。我們的做法是：每個頁面對應(yīng)一個模板，模板中的文字全部抽取到一個語言配置文件中宝恶，并且寫了一個腳本生成最終的頁面符隙。這樣在需要修改時，只需在語言配置文件中編輯對應(yīng)的字段即可垫毙。
（3）網(wǎng)站組件
對于 header
霹疫、footer
等通用的頁面組件，我們采取了和上面類似的策略综芥。但由于組件內(nèi)的文字較少丽蝎，于是沒有再使用模板，而是通過路由判斷應(yīng)該顯示何種語言膀藐。

中英文網(wǎng)站的顯示效果

至此屠阻，我們也逐漸完善了技術(shù)棧。用 ES2015 和 CSS4 作開發(fā)語言额各、Lerna 負(fù)責(zé)管理組件国觉、用 Karma 搭配 Mocha 和 Chai 等工具在 Travis CI 里做持續(xù)集成測試，最后用 Markdown 結(jié)合 Vue 寫文檔臊泰。我們甚至還在 CI 里實現(xiàn)了自動部署網(wǎng)站和推送主題倉庫代碼等功能蛉加，提升了不少開發(fā)效率蚜枢。

6.開發(fā)過程中遇到的問題

具體到組件層面缸逃，在開發(fā)的過程中不可避免地會遇到一些問題。下面是我們的一些應(yīng)對策略厂抽，希望能夠拋磚引玉需频，引發(fā)大家的思考和討論。
如何應(yīng)對父子組件間事件派發(fā)機(jī)制的改變
在 Vue 2.0 中筷凤，用于父子組件間事件通信的 $dispatch
和 $broadcast
被移除了昭殉。官方的考慮是苞七，基于組件樹結(jié)構(gòu)的事件流方式讓人難以理解，并且在組件結(jié)構(gòu)擴(kuò)展的過程中會變得越來越脆弱挪丢。但是類似 Element 這樣的組件庫有幾個特點：首先蹂风，父子組件間互相通信的場景非常常見，比如在一個帶有驗證功能的表單里乾蓬，每個表單項在 change
或 blur
時需要通知表單組件進(jìn)行校驗惠啄；其次，組件的結(jié)構(gòu)相對來說比較固定任内。
出于以上考慮撵渡，我們實現(xiàn)了簡化版的 dispatch
和 broadcast
，并把它們包裝成了一個 mixin
死嗦，方便在需要時調(diào)用趋距。其中的 dispatch
代碼如下：
dispatch(componentName, eventName, params) { var parent = this.$parent || this.$root; var name = parent.$options.componentName; while (parent && (!name || name !== componentName)) { parent = parent.$parent; if (parent) { name = parent.$options.componentName; } } if (parent) { parent.$emit.apply(parent, [eventName].concat(params)); } }

可以看出，我們的實現(xiàn)需要在調(diào)用時傳入 componentName
（在各個組件中定義）越除，這樣就確保了事件只會在正確的組件中觸發(fā)节腐。
是否需要為用戶代理自定義組件上的原生事件
在 Vue 2.0 中的自定義組件上使用 v-on
只會監(jiān)聽自定義事件（即組件用 $emit
觸發(fā)的事件）。如果要監(jiān)聽原生事件摘盆，必須使用 .native
修飾符：
<mt-component @click.native="handleClick"></my-component>

這樣一來铜跑，很多不太熟悉 Vue 2.0 語法的用戶會發(fā)現(xiàn)給 Element 的組件綁定原生事件總是不生效。事實上骡澈，我們從開源以來收到的 issue 里被問得最多的一個問題是：如何給 Button
組件綁定 click
事件锅纺？
事實上我們只需要添加一行代碼就能解決問題，但是關(guān)于是否需要讓用戶可以直接監(jiān)聽原生事件這件事在我們內(nèi)部有兩種不同的觀點：一邊認(rèn)為應(yīng)該遵循 Vue 的設(shè)計思想肋殴，原生事件要加 native囤锉；另一邊認(rèn)為 button 最常用的就是 click 事件，幫助用戶做這件事可以降低學(xué)習(xí)成本护锤。后來我們專門咨詢了尤雨溪本人官地，他的觀點是，對于一些組件的常用事件烙懦，可以允許用戶直接監(jiān)聽原生事件驱入，同時在文檔中說明哪些事件可以直接監(jiān)聽，哪些事件需要加 .native
修飾符氯析。最后我們決定從易用性的角度出發(fā)亏较，讓用戶在使用 Button
組件時可以監(jiān)聽原生 click
事件，因為對于桌面端來說掩缓，Button
在絕大部分場景下都是需要監(jiān)聽點擊事件的雪情。 現(xiàn)在的 Button
支持以下兩種寫法：
<el-button @click.native="handleClick">Click Me!</el-button> <el-button @click="handleClick">Click Me!</el-button>

版本迭代的過程中，若 API 發(fā)生變化你辣，如何友好地提示用戶
在歷次迭代中巡通，我們會盡量保持 API 的一致尘执。但是在一些萬不得已的情況下，需要對 API 作出一些更新宴凉。對于老版本的用戶而言誊锭，如果使用了被移除的 API，升級到新版后會出現(xiàn)一些意料之外的報錯信息弥锄。為了友好地幫助用戶盡快找到報錯的來源炉旷，我們編寫了一個 mixin
，當(dāng)組件的 API 發(fā)生變化時叉讥，在組件中引入這個 mixin
并列出變化前后的字段名即可窘行。
mixin
的核心代碼為：
const { props, events } = this.getMigratingConfig(); const { data, componentOptions } = this.$vnode; const definedProps = data.attrs || {}; const definedEvents = componentOptions.listeners || {}; for (let propName in definedProps) { if (definedProps.hasOwnProperty(propName) && props[propName]) { console.warn([Element Migrating][Attribute]: ${props[propName]}); } } for (let eventName in definedEvents) { if (definedEvents.hasOwnProperty(eventName) && events[eventName]) { console.warn([Element Migrating][Event]: ${events[eventName]}); } }

引用了這個 mixin
的組件需要在 methods
中添加一個名為 getMigratingConfig
的方法，返回一個包含發(fā)生變化的 API 字段名和對應(yīng)提示信息的對象：
getMigratingConfig() { return { props: { 'selection-mode': 'Table: selection-mode has been removed.' }, events: { cellclick: 'Table: cellclick has been renamed to cell-click.' } }; }

五图仓、issue 處理方式

我們選擇使用 Tower 來配合 GitHub 進(jìn)行 issue 的追蹤和處理罐盔。首先在 Tower 上建立幾個清單：Plan、Design救崔、Develop 和 Release惶看。隨后具體的操作流程如下：
從各渠道收集反饋

若不需設(shè)計，則由開發(fā)回復(fù)

若需設(shè)計跟進(jìn)六孵，則在 GitHub 上添加標(biāo)簽 design
纬黎，并在 Tower 的 Plan 清單中添加相應(yīng)任務(wù)

開始處理任務(wù)后，為 GitHub 的對應(yīng) issue 添加 working in progress
標(biāo)簽劫窒，同時把任務(wù)拖進(jìn) Tower 的 Design 清單

設(shè)計完成后本今，開發(fā)接手，同時把任務(wù)拖進(jìn) Develop 清單

開發(fā)完成主巍，經(jīng)過設(shè)計師驗收通過后將改動推送至 GitHub 倉庫冠息，關(guān)閉相應(yīng) issue，最后將任務(wù)拖進(jìn) Release 清單

六孕索、總結(jié)

Element 從立項至今已經(jīng)走過了五個月的時間逛艰。總的來說搞旭，這段時間就是一個不斷發(fā)現(xiàn)問題和解決問題的過程散怖，也是每個參與者自身成長的過程。開發(fā)時 Vue 2.0 正處于 RC 階段肄渗，我們隨著它的版本迭代踩到了不少坑镇眷，同時也給 Vue 提了一些 issue，并且都得到了 Vue 團(tuán)隊的處理恳啥。在此向Vue 團(tuán)隊的專業(yè)精神表示感謝偏灿。
自從 9 月開源以來丹诀，在社區(qū)的幫助下钝的，Element 逐漸成熟翁垂，我們也在今天發(fā)布了它的第一個正式版本。希望越來越多的人能夠參與進(jìn)來硝桩，和我們一起把 Element 做得更好沿猜。
七、參考資料

https://github.com/babel/babel

https://github.com/lerna/lerna

https://github.com/ElemeFE/postcss-salad

https://github.com/QingWei-Li/vue-markdown-loader

https://github.com/ElemeFE/cooking

精彩問答

淀粉提問：Element官網(wǎng)是多少碗脊？
Element開發(fā)團(tuán)隊：官網(wǎng)是 http://element.eleme.io
淀粉提問：如何修改樣式啼肩？
Element開發(fā)團(tuán)隊：簡單的樣式可以通過覆蓋來修改；對于大規(guī)模的自定義衙伶，我們提供了一套自定義主題的工具祈坠，文檔看這里：https://github.com/ElemeFE/element/blob/master/custom-theme.md 。簡單來說矢劲，通過修改樣式變量赦拘、編譯主題、引入主題芬沉，就可以實現(xiàn)自定義主題躺同。
淀粉提問：Vue的作者給出了一套學(xué)習(xí)Vue路徑，那Element是否有閱讀源碼的路徑呢丸逸，怎么樣才可以較為方便的理解源碼蹋艺，并且在基礎(chǔ)組件不能滿足自己業(yè)務(wù)的時候?qū)懗鲎约旱慕M件呢？
Element開發(fā)團(tuán)隊：閱讀源碼的話黄刚，可以先 clone 項目后捎谨，先試試用 npm run new 指令創(chuàng)建一個新組件，看看我們的一個組件包含了哪些東西憔维。要理解源碼的話就自己邊改代碼邊測試效果吧侍芝。
淀粉提問：怎么看待Vue添加redux,而又保留雙向綁定的數(shù)據(jù)方式？
Element開發(fā)團(tuán)隊：不太明白想問什么埋同。
淀粉提問：國際化網(wǎng)站怎么做的州叠，是每種語言對應(yīng)一個頁面嗎，還是統(tǒng)一的一個頁面凶赁？
Element開發(fā)團(tuán)隊：Element 的主頁是一個 SPA咧栗，每種語言對應(yīng)了一個 .vue 文件，而這些 .vue 文件是通過一個統(tǒng)一的模板和語言配置文件生成出來的虱肄。
淀粉提問：請問會推出專門針對移動端的Vue2組件庫嗎致板？
Element開發(fā)團(tuán)隊：目前沒有將 Element 移植到移動端的計劃。不過咏窿，我們已經(jīng)有一套移動端組件庫了：https://github.com/ElemeFE/mint-ui 斟或，它有兩個版本，分別兼容 Vue 1.x 和 2.0集嵌。
淀粉提問：寫在 Vue 文件中的 MarkDown 輸出在哪里萝挤？這并不是顯示效果的一部分呀御毅？
Element開發(fā)團(tuán)隊：Vue 和 MarkDown 的結(jié)合，我們是自己做了一個 vue-markdown-loader, 作用是將 MarkDown 文件轉(zhuǎn)成 Vue 組件（生成的文件在插件的 .cache 目錄里）怜珍，最后通過 vue-loader 處理端蛆。可以去看看這個 loader 的源碼就明白了酥泛。
淀粉提問：既然是基于Vue了今豆，那么Element還有繼續(xù)的必要嗎？而且目前框架那么多柔袁，Vue也得到了人的認(rèn)可呆躲。Element以后得生態(tài)如何保證？畢竟還只有目前餓了么一個團(tuán)隊在用捶索。
Element開發(fā)團(tuán)隊：不太清楚“Element還有繼續(xù)的必要”是什么意思歼秽，據(jù)我們在 Gitter 對用戶的了解，現(xiàn)在已經(jīng)有不少用戶將 Element 實用到他們公司的產(chǎn)品開發(fā)里情组。Element 的生態(tài)發(fā)展除了我們團(tuán)隊本身以外還需要依靠開源的力量來進(jìn)行優(yōu)化和發(fā)展燥筷。
淀粉提問：在組件開發(fā)中,有對復(fù)用性很高的業(yè)務(wù)組件做過積累嗎？如果做過～是怎么維護(hù)這些業(yè)務(wù)組件的院崇？也是同邏輯組件的維護(hù)方法一樣嗎肆氓？
Element開發(fā)團(tuán)隊：組件開發(fā)中會不斷收到各種的功能需求的反饋，通過 GitHub 倉庫 issue 來推動我們組件的功能更新和維護(hù)底瓣。不太清楚“邏輯組件”的含義谢揪，Element 里除了按鈕這樣特殊的組件外都是帶有邏輯的。
淀粉提問：請問將常見的jq插件或者說jq動效寫成Vue組件的過程中有什么不順暢的地方嗎捐凭？
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 的情景還歷歷在目印蓖。Vue 2.0 是上個月正式發(fā)布的，我們也在今天發(fā)布了 Element 的正式版京腥。
淀粉提問：有沒有模板可以參考赦肃？
Element開發(fā)團(tuán)隊：有，看這里：https://github.com/ElementUI/element-starter。如果熟悉 cooking 或 laravel他宛，我們也提供了相應(yīng)的模板：https://github.com/ElementUI/element-cooking-starter 船侧、 https://github.com/ElementUI/element-in-laravel-starter 。
淀粉提問：Element的開發(fā)者都是餓了么前端團(tuán)隊的嗎堕汞，團(tuán)隊外的開發(fā)者占多少勺爱？
Element開發(fā)團(tuán)隊：是的晃琳。不過自從 Element 開源以來讯检，社區(qū)出現(xiàn)了一批熱心用戶，他們也貢獻(xiàn)了自己的代碼卫旱。所有貢獻(xiàn)者可以從這里看到：https://github.com/ElemeFE/element/graphs/contributors 人灼。
淀粉提問：幾年前，不計算Gzip 90kb的jQuery遭到了人們的嫌棄：太大了顾翼，還是用原生吧投放。 幾年后，開啟Gzip后 仍有300kb的基于React的項目适贸，人們覺得：區(qū)區(qū)300kb而已灸芳，算很小了。巨型庫的概念流行后拜姿，人們似乎忘了啪啪啪在臉上有多疼烙样。你怎么看？
Element開發(fā)團(tuán)隊：這幾年網(wǎng)速已經(jīng)提升不少蕊肥，同時前端項目的復(fù)雜度也變得越來越高谒获。比起庫的體積，可能現(xiàn)在開發(fā)效率才是開發(fā)者所關(guān)心的壁却。
淀粉提問：Element這套組件和Ant Design感覺有點類似批狱，是否有借鑒過他們的設(shè)計？
Element開發(fā)團(tuán)隊：有借鑒過展东，我們不僅借鑒過 AntDesign赔硫，國內(nèi)外大大小小的 Design Language 都有借鑒學(xué)習(xí)。很多信息前人已經(jīng)總結(jié)過盐肃，我們希望可以快速的獲得這些知識卦停，以便更快的走到前方去探索更前沿的設(shè)計。
淀粉提問：感謝分享恼蓬。目前有沒有優(yōu)秀應(yīng)用案例可以分享惊完？
Element開發(fā)團(tuán)隊：目前我們還沒有精力去收集整理使用了 Element 的項目，不過按照最近一段時間在 Gitter 里討論看到了一些開發(fā)者分享的項目鏈接处硬，完成質(zhì)量還是挺高的小槐。過段時間我們會在 issue 里開始征集大家使用 Element 組件庫的作品鏈接做分享。
淀粉提問：如何定制CSS，是覆蓋還是改源碼凿跳？改了源碼如果Element版本更新之后 樣式就沒了件豌？
Element開發(fā)團(tuán)隊：可以用 element-theme 主題自定義工具，或者直接下載 element-theme-default 主題包自己修改主題控嗜。如果只是簡單的修改茧彤，建議直接覆蓋樣式。
淀粉提問：您好疆栏，我是個初學(xué)者曾掂，看不大懂編程，初學(xué)要做前端壁顶，應(yīng)該先從哪開始入手學(xué)習(xí)珠洗？
Element開發(fā)團(tuán)隊：freecodecamp 和 codecademy 都是很好的入門途徑。
淀粉提問：在技術(shù)選型的時候若专，基于什么考慮许蓖，選擇了Vue奢赂，而不是React讥邻？
Element開發(fā)團(tuán)隊：和 React 相比，我們公司前端使用 Vue 的更多管毙。為了照顧到大多數(shù)人嚎莉，我們選用 Vue 作為 Element 的框架米酬。
淀粉提問：我在寫 Vue 的組件通信中，也發(fā)現(xiàn)事件比較好用但不容易被控制萝喘，因此一般是給自定義事件加上命名空間淮逻，如 “$dispatch('AComponent::rotate', 90)，”Element 團(tuán)隊有這樣的實踐嗎阁簸？
Element開發(fā)團(tuán)隊：在 Element 的組件中對組件通信這一塊并沒有用到全局的 event bug爬早，而是通過dispatch和broadcast來進(jìn)行相互依賴的組件間的通信。雖然Vue2.0里棄用了$dispatch和$broadcast的api启妹，但我們自己在組件庫中封裝了一遍筛严。
淀粉提問：Element 團(tuán)隊使用 Vuex 時的一些具體情景是什么？
Element開發(fā)團(tuán)隊： Element 沒有用到 Vuex 的情景饶米。
淀粉提問：后續(xù)是否會開放一些常見業(yè)務(wù)組件桨啃，比如城市選擇等？
Element開發(fā)團(tuán)隊：與后臺業(yè)務(wù)關(guān)聯(lián)很大的組件應(yīng)該不會直接開放檬输，不過這個組件如果能解決類似的其他問題照瘾，我們會抽離業(yè)務(wù)屬性將之作為「基礎(chǔ)組件」開放出來。城市選擇只用了比較基礎(chǔ)的 Select 組合而已丧慈。
淀粉提問：Element 在做動畫效果這個方向上有些什么成績呢析命？
Element開發(fā)團(tuán)隊：動畫效果方面我們還沒有人力去探索和研究主卫，主要精力還是放在業(yè)務(wù)系統(tǒng)的搭建上。
嘉賓簡介

Element 開發(fā)團(tuán)隊由餓了么 UED 的設(shè)計師和大前端的工程師組成姿现，他們協(xié)作開發(fā)了 Element ——一套基于 Vue 2.0 的桌面端組件庫。
今日薦文

Vue相關(guān)內(nèi)容推薦：
Vue作者尤雨溪：Vue 2.0使兔，漸進(jìn)式前端解決方案

Vue 2.0 快速上手指南

更輕更快的Vue.js 2.0與其他框架對比

Vue.js作者尤雨溪加盟Weex項目擔(dān)任技術(shù)顧問

往期精彩分享：
滴滴：公司級組件庫以及MIS系統(tǒng)的技術(shù)實踐

http://7xo6kd.com1.z0.glb.clouddn.com/upload-ueditor-image-20160603-1464952710155042972.jpg

長按二維碼關(guān)注
** 前 端 之 巔** 緊 跟 前 端 發(fā) 展 共 享 一 線 技 術(shù) 不 斷 學(xué) 習(xí) 進(jìn) 步 攀 登 前 端 之 巔