本文為2016年11月9日，『前端之巔』微信群在線分享活動(dòng)總結(jié)整理而成，轉(zhuǎn)載請?jiān)谖恼麻_頭處注明來自『前端之巔』公眾號。加群學(xué)習(xí)請關(guān)注『前端之巔』公眾號并發(fā)送“加群”。
Element 是由餓了么UED設(shè)計(jì)、餓了么大前端開發(fā)的一套基于 Vue 2.0 的桌面端組件庫。今天我們要分享的就是開發(fā) Element 的一些心得。
一、設(shè)計(jì)目的
大部分項(xiàng)目起源都是源于業(yè)務(wù)方的需求，Element 也是一樣。隨著公司的業(yè)務(wù)發(fā)展，內(nèi)部開始衍生出很多后臺系統(tǒng)，UED 部門也接到越來越多的設(shè)計(jì)需求。分析這整個(gè)過程，我們發(fā)現(xiàn)如下問題：
日漸增多的后臺產(chǎn)品設(shè)計(jì)需求
設(shè)計(jì)資源有限，沒辦法支持所有業(yè)務(wù)線
公司內(nèi)部諸多后臺產(chǎn)品使用體驗(yàn)不一致
于是我們決定：
設(shè)計(jì)一套后臺支撐框架，提升后臺系統(tǒng)的可用性和一致性
套用此框架，即使沒有設(shè)計(jì)師參與，也能讓產(chǎn)品或開發(fā)設(shè)計(jì)出一套好用的后臺系統(tǒng)
二、設(shè)計(jì)階段
下面簡單說一下設(shè)計(jì) Element 經(jīng)歷的幾個(gè)階段。
了解業(yè)務(wù)并熟悉公司內(nèi)各后臺產(chǎn)品，尋找業(yè)務(wù)上的共性問題
設(shè)計(jì)的目的是為了業(yè)務(wù)服務(wù)。第一步我們從內(nèi)部系統(tǒng)開始入手，了解公司內(nèi)部在使用的各種后臺系統(tǒng)，將其組件抽象剝離，尋找共性特征。
專注業(yè)務(wù)組件設(shè)計(jì)
總結(jié)了公司不同系統(tǒng)不同組件的使用情況后，我們打算從業(yè)務(wù)組件入手，因?yàn)檫@部份是由公司特殊需求衍生的解決方案。解決了這些棘手的問題，也能給其他后臺產(chǎn)品帶來好的設(shè)計(jì)引導(dǎo)。
尋求開發(fā)支持
到這一步，我們開始尋找公司內(nèi)部的開發(fā)團(tuán)隊(duì)，并在這時(shí)才得知不同團(tuán)隊(duì)里使用著不同的前端框架，有 Vue、React、Angular 等。
與大前端合作
大前端作為獨(dú)立的前端團(tuán)隊(duì)，有能力開發(fā)底層的工具去服務(wù)不同業(yè)務(wù)，并且 Vue 也是一套年輕且發(fā)展方向很好的一個(gè)技術(shù)棧。UED 與大前端的合作一拍即合。
方向轉(zhuǎn)變，專注于基礎(chǔ)組件
跟大前端接觸后，才發(fā)現(xiàn)最開始的方向并不正確，因?yàn)闃I(yè)務(wù)變化過快，即使有通用的業(yè)務(wù)組件，也很難跟上需求的變化，而基礎(chǔ)組件才是所有開發(fā)團(tuán)隊(duì)都需要的通用組件。這時(shí)候我們開始把方向調(diào)整為基礎(chǔ)組件的設(shè)計(jì)。
組件交互完成，進(jìn)行視覺封裝，并搭建主體網(wǎng)站
前期的設(shè)計(jì)工作主要是由交互設(shè)計(jì)師進(jìn)行設(shè)計(jì)，等確認(rèn)完所有組件的功能和交互后，開始進(jìn)行視覺階段，這中間包括制定顏色、字體等各類規(guī)范，也同時(shí)進(jìn)行主體網(wǎng)站的設(shè)計(jì)。
輸出 UI Kit 文件，統(tǒng)一設(shè)計(jì)規(guī)范
第一版網(wǎng)站設(shè)計(jì)，此處的「特殊組件」即業(yè)務(wù)組件。
網(wǎng)站二次設(shè)計(jì)
第一版網(wǎng)站上線后視覺效果并不好，我們內(nèi)部進(jìn)行了調(diào)整，再次上線后就是大家現(xiàn)在看到的樣子。
設(shè)計(jì)過程簡單來說就經(jīng)歷了這幾個(gè)階段，如還有問題可以繼續(xù)交流，下面進(jìn)入開發(fā)階段。
三、開發(fā)目的
后臺系統(tǒng)缺乏一套完整的基礎(chǔ)組件庫
Vue 在公司內(nèi)部是一個(gè)比較年輕的技術(shù)棧，希望做一些基礎(chǔ)設(shè)施的建設(shè)
提升公司在技術(shù)社區(qū)的影響力
四、開發(fā)流程
進(jìn)入開發(fā)階段后，在總體架構(gòu)方面我們做了一些嘗試，下面按照時(shí)間順序分享給大家：
1.如何與設(shè)計(jì)師進(jìn)行配合
經(jīng)過項(xiàng)目初期開發(fā)和設(shè)計(jì)的磨合，我們提煉了一套組件開發(fā)流程：
根據(jù)交互稿和視覺稿進(jìn)行開發(fā)，期間與設(shè)計(jì)師保持溝通
開發(fā)完成后自測，之后提交設(shè)計(jì)師驗(yàn)收
設(shè)計(jì)師提出修改意見，根據(jù)意見進(jìn)行修改
完成組件開發(fā)，為網(wǎng)站編寫例子和文檔
2.如何管理多組件項(xiàng)目
在開發(fā)之初，我們就在思考如何降低組件的耦合度，確保組件可以獨(dú)立工作。這樣的目的是可以保證組件可以依賴其他組件、讓用戶只加載其中幾個(gè)組件甚至在安裝時(shí)只安裝需要的組件。最先想到的做法是一個(gè)組件單獨(dú)一個(gè)倉庫，而組件庫項(xiàng)目就是把組件作為依賴引入。
但是由于人手不足，這樣的機(jī)制導(dǎo)致開發(fā)太耗時(shí)間，每個(gè)組件都需要單獨(dú)維護(hù)和打包，同時(shí)還要維護(hù)組件庫項(xiàng)目的各依賴的版本號。我們只能另尋方案。后來參考了 babel 項(xiàng)目的管理方式：所有子項(xiàng)目放在 packages/
目錄里，一個(gè)子項(xiàng)目可以當(dāng)作一個(gè)獨(dú)立的倉庫。通過 lerna 來管理子項(xiàng)目的依賴和發(fā)布。
結(jié)合自身項(xiàng)目的特點(diǎn)以及 babel 的這套機(jī)制，我們重構(gòu)了目錄結(jié)構(gòu)：組件可單獨(dú)作為一個(gè)項(xiàng)目放在 packages/
，共用函數(shù)放在 src/
里。最后的打包結(jié)果會將整個(gè)組件打包成一個(gè)文件、組件分別打包成獨(dú)立文件，同時(shí)發(fā)布時(shí)還將發(fā)布組件庫和獨(dú)立組件，滿足不同用戶的使用需求。
3.如何解決自定義主題
開發(fā)一套組件庫就離不開定制主題的需求。類名要足夠友好，盡量避免存在樣式層級嵌套，這樣在直接覆蓋樣式或者單獨(dú)寫一套主題都會方便許多。所以我們采用 BEM 的方式管理類名，同時(shí)盡可能將屬性值用變量代替，維護(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)生另一個(gè)問題：如何在文檔里寫可運(yùn)行的示例？常規(guī)的做法是把文檔寫在 Vue 文件里，這樣就可以在里面調(diào)用其他組件，但是這樣就違背了寫「直觀」文檔的初衷。
經(jīng)過幾番嘗試，結(jié)合 Vue 的特點(diǎn)。我們寫了一套處理 Markdown 文件的 webpack loader，可以將 Markdown 轉(zhuǎn)成 Vue 文件，不僅降低了文檔的維護(hù)成本，同時(shí)也將文檔里運(yùn)行組件示例變成可能。
5.多語言官網(wǎng)如何配置和管理
Element 在立項(xiàng)之初其實(shí)并沒有考慮國際化的問題。項(xiàng)目開源之后，我們陸續(xù)收到了一些外國開發(fā)者的反饋，希望能夠增加英文文檔。不久之后，國內(nèi)的一個(gè)翻譯團(tuán)隊(duì)主動(dòng)聯(lián)系到了我們，為 Element 貢獻(xiàn)了整套英文文檔。
有了英文文檔就需要有英文網(wǎng)站，這就需要對官網(wǎng)的現(xiàn)有結(jié)構(gòu)進(jìn)行修改和升級；同時(shí)為了面向未來，需要官網(wǎng)能夠兼容除英語外的其他多語言。為此我們做了以下工作：
（1）路由
官網(wǎng)的路由是根據(jù)一個(gè)記錄了導(dǎo)航信息的 json
文件自動(dòng)生成的。因此需要在這個(gè) json
文件中添加對應(yīng)于其他語言的字段，并且根據(jù)新的數(shù)據(jù)結(jié)構(gòu)修改路由生成的邏輯。
（2）頁面
官網(wǎng)中除了文檔外，還有一些介紹性質(zhì)的頁面。這些頁面中文字比較多，如果人工管理每種語言的頁面，若需要修改則必須去每個(gè)頁面相應(yīng)的位置進(jìn)行編輯，有些繁瑣。我們的做法是：每個(gè)頁面對應(yīng)一個(gè)模板，模板中的文字全部抽取到一個(gè)語言配置文件中，并且寫了一個(gè)腳本生成最終的頁面。這樣在需要修改時(shí)，只需在語言配置文件中編輯對應(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 里實(shí)現(xiàn)了自動(dòng)部署網(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 這樣的組件庫有幾個(gè)特點(diǎn)：首先，父子組件間互相通信的場景非常常見，比如在一個(gè)帶有驗(yàn)證功能的表單里，每個(gè)表單項(xiàng)在 change
或 blur
時(shí)需要通知表單組件進(jìn)行校驗(yàn)；其次，組件的結(jié)構(gòu)相對來說比較固定。
出于以上考慮，我們實(shí)現(xiàn)了簡化版的 dispatch
和 broadcast
，并把它們包裝成了一個(gè) mixin
，方便在需要時(shí)調(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)); } }
可以看出，我們的實(shí)現(xiàn)需要在調(diào)用時(shí)傳入 componentName
（在各個(gè)組件中定義），這樣就確保了事件只會在正確的組件中觸發(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 的組件綁定原生事件總是不生效。事實(shí)上，我們從開源以來收到的 issue 里被問得最多的一個(gè)問題是：如何給 Button
組件綁定 click
事件？
事實(shí)上我們只需要添加一行代碼就能解決問題，但是關(guān)于是否需要讓用戶可以直接監(jiān)聽原生事件這件事在我們內(nèi)部有兩種不同的觀點(diǎn)：一邊認(rèn)為應(yīng)該遵循 Vue 的設(shè)計(jì)思想，原生事件要加 native；另一邊認(rèn)為 button 最常用的就是 click 事件，幫助用戶做這件事可以降低學(xué)習(xí)成本。后來我們專門咨詢了尤雨溪本人，他的觀點(diǎn)是，對于一些組件的常用事件，可以允許用戶直接監(jiān)聽原生事件，同時(shí)在文檔中說明哪些事件可以直接監(jiān)聽，哪些事件需要加 .native
修飾符。最后我們決定從易用性的角度出發(fā)，讓用戶在使用 Button
組件時(shí)可以監(jiān)聽原生 click
事件，因?yàn)閷τ谧烂娑藖碚f，Button
在絕大部分場景下都是需要監(jiān)聽點(diǎ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)一些意料之外的報(bào)錯(cuò)信息。為了友好地幫助用戶盡快找到報(bào)錯(cuò)的來源，我們編寫了一個(gè) mixin
，當(dāng)組件的 API 發(fā)生變化時(shí)，在組件中引入這個(gè) 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]}); } }
引用了這個(gè) mixin
的組件需要在 methods
中添加一個(gè)名為 getMigratingConfig
的方法，返回一個(gè)包含發(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 上建立幾個(gè)清單：Plan、Design、Develop 和 Release。隨后具體的操作流程如下：
從各渠道收集反饋
若不需設(shè)計(jì)，則由開發(fā)回復(fù)
若需設(shè)計(jì)跟進(jìn)，則在 GitHub 上添加標(biāo)簽 design
，并在 Tower 的 Plan 清單中添加相應(yīng)任務(wù)
開始處理任務(wù)后，為 GitHub 的對應(yīng) issue 添加 working in progress
標(biāo)簽，同時(shí)把任務(wù)拖進(jìn) Tower 的 Design 清單
設(shè)計(jì)完成后，開發(fā)接手，同時(shí)把任務(wù)拖進(jìn) Develop 清單
開發(fā)完成，經(jīng)過設(shè)計(jì)師驗(yàn)收通過后將改動(dòng)推送至 GitHub 倉庫，關(guān)閉相應(yīng) issue，最后將任務(wù)拖進(jìn) Release 清單
六、總結(jié)
Element 從立項(xiàng)至今已經(jīng)走過了五個(gè)月的時(shí)間。總的來說，這段時(shí)間就是一個(gè)不斷發(fā)現(xiàn)問題和解決問題的過程，也是每個(gè)參與者自身成長的過程。開發(fā)時(shí) Vue 2.0 正處于 RC 階段，我們隨著它的版本迭代踩到了不少坑，同時(shí)也給 Vue 提了一些 issue，并且都得到了 Vue 團(tuán)隊(duì)的處理。在此向Vue 團(tuán)隊(duì)的專業(yè)精神表示感謝。
自從 9 月開源以來，在社區(qū)的幫助下，Element 逐漸成熟，我們也在今天發(fā)布了它的第一個(gè)正式版本。希望越來越多的人能夠參與進(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)隊(duì)：官網(wǎng)是 http://element.eleme.io
淀粉提問：如何修改樣式？
Element開發(fā)團(tuán)隊(duì)：簡單的樣式可以通過覆蓋來修改；對于大規(guī)模的自定義，我們提供了一套自定義主題的工具，文檔看這里：https://github.com/ElemeFE/element/blob/master/custom-theme.md 。簡單來說，通過修改樣式變量、編譯主題、引入主題，就可以實(shí)現(xiàn)自定義主題。
淀粉提問：Vue的作者給出了一套學(xué)習(xí)Vue路徑，那Element是否有閱讀源碼的路徑呢，怎么樣才可以較為方便的理解源碼，并且在基礎(chǔ)組件不能滿足自己業(yè)務(wù)的時(shí)候?qū)懗鲎约旱慕M件呢？
Element開發(fā)團(tuán)隊(duì)：閱讀源碼的話，可以先 clone 項(xiàng)目后，先試試用 npm run new 指令創(chuàng)建一個(gè)新組件，看看我們的一個(gè)組件包含了哪些東西。要理解源碼的話就自己邊改代碼邊測試效果吧。
淀粉提問：怎么看待Vue添加redux,而又保留雙向綁定的數(shù)據(jù)方式？
Element開發(fā)團(tuán)隊(duì)：不太明白想問什么。
淀粉提問：國際化網(wǎng)站怎么做的，是每種語言對應(yīng)一個(gè)頁面嗎，還是統(tǒng)一的一個(gè)頁面？
Element開發(fā)團(tuán)隊(duì)：Element 的主頁是一個(gè) SPA，每種語言對應(yīng)了一個(gè) .vue 文件，而這些 .vue 文件是通過一個(gè)統(tǒng)一的模板和語言配置文件生成出來的。
淀粉提問：請問會推出專門針對移動(dòng)端的Vue2組件庫嗎？
Element開發(fā)團(tuán)隊(duì)：目前沒有將 Element 移植到移動(dòng)端的計(jì)劃。不過，我們已經(jīng)有一套移動(dòng)端組件庫了：https://github.com/ElemeFE/mint-ui ，它有兩個(gè)版本，分別兼容 Vue 1.x 和 2.0。
淀粉提問：寫在 Vue 文件中的 MarkDown 輸出在哪里？這并不是顯示效果的一部分呀？
Element開發(fā)團(tuán)隊(duì)：Vue 和 MarkDown 的結(jié)合，我們是自己做了一個(gè) vue-markdown-loader, 作用是將 MarkDown 文件轉(zhuǎn)成 Vue 組件（生成的文件在插件的 .cache 目錄里），最后通過 vue-loader 處理。可以去看看這個(gè) loader 的源碼就明白了。
淀粉提問：既然是基于Vue了，那么Element還有繼續(xù)的必要嗎？而且目前框架那么多，Vue也得到了人的認(rèn)可。Element以后得生態(tài)如何保證？畢竟還只有目前餓了么一個(gè)團(tuán)隊(duì)在用。
Element開發(fā)團(tuán)隊(duì)：不太清楚“Element還有繼續(xù)的必要”是什么意思，據(jù)我們在 Gitter 對用戶的了解，現(xiàn)在已經(jīng)有不少用戶將 Element 實(shí)用到他們公司的產(chǎn)品開發(fā)里。Element 的生態(tài)發(fā)展除了我們團(tuán)隊(duì)本身以外還需要依靠開源的力量來進(jìn)行優(yōu)化和發(fā)展。
淀粉提問：在組件開發(fā)中,有對復(fù)用性很高的業(yè)務(wù)組件做過積累嗎？如果做過～是怎么維護(hù)這些業(yè)務(wù)組件的？也是同邏輯組件的維護(hù)方法一樣嗎？
Element開發(fā)團(tuán)隊(duì)：組件開發(fā)中會不斷收到各種的功能需求的反饋，通過 GitHub 倉庫 issue 來推動(dòng)我們組件的功能更新和維護(hù)。不太清楚“邏輯組件”的含義，Element 里除了按鈕這樣特殊的組件外都是帶有邏輯的。
淀粉提問：請問將常見的jq插件或者說jq動(dòng)效寫成Vue組件的過程中有什么不順暢的地方嗎？
Element開發(fā)團(tuán)隊(duì)：在組件開發(fā)過程中沒有參考任何 jq 插件的動(dòng)效。實(shí)際上基于 mvvm 框架下的組件庫開發(fā)相對于 jq 是輕松很多的，因?yàn)槟悴恍枰謩?dòng)地處理事件綁定和視圖的更新。
淀粉提問：分享的文檔是否有些陳舊沒有更新，Vue 目前已經(jīng)不是 RC階段了。
Element開發(fā)團(tuán)隊(duì)：文檔中說「開發(fā)時(shí)」Vue 還處于 RC 階段，主要指的是今年的八九月份，那時(shí) Vue 每更新一個(gè) RC 版本，我們就跟著做一遍測試，然后發(fā)現(xiàn)幾個(gè) bug 的情景還歷歷在目。Vue 2.0 是上個(gè)月正式發(fā)布的，我們也在今天發(fā)布了 Element 的正式版。
淀粉提問：有沒有模板可以參考？
Element開發(fā)團(tuán)隊(duì)：有，看這里：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)隊(duì)的嗎，團(tuán)隊(duì)外的開發(fā)者占多少？
Element開發(fā)團(tuán)隊(duì)：是的。不過自從 Element 開源以來，社區(qū)出現(xiàn)了一批熱心用戶，他們也貢獻(xiàn)了自己的代碼。所有貢獻(xiàn)者可以從這里看到：https://github.com/ElemeFE/element/graphs/contributors 。
淀粉提問：幾年前，不計(jì)算Gzip 90kb的jQuery遭到了人們的嫌棄：太大了，還是用原生吧。 幾年后，開啟Gzip后 仍有300kb的基于React的項(xiàng)目，人們覺得：區(qū)區(qū)300kb而已，算很小了。巨型庫的概念流行后，人們似乎忘了啪啪啪在臉上有多疼。你怎么看？
Element開發(fā)團(tuán)隊(duì)：這幾年網(wǎng)速已經(jīng)提升不少，同時(shí)前端項(xiàng)目的復(fù)雜度也變得越來越高。比起庫的體積，可能現(xiàn)在開發(fā)效率才是開發(fā)者所關(guān)心的。
淀粉提問：Element這套組件和Ant Design感覺有點(diǎn)類似，是否有借鑒過他們的設(shè)計(jì)？
Element開發(fā)團(tuán)隊(duì)：有借鑒過，我們不僅借鑒過 AntDesign，國內(nèi)外大大小小的 Design Language 都有借鑒學(xué)習(xí)。很多信息前人已經(jīng)總結(jié)過，我們希望可以快速的獲得這些知識，以便更快的走到前方去探索更前沿的設(shè)計(jì)。
淀粉提問：感謝分享。目前有沒有優(yōu)秀應(yīng)用案例可以分享？
Element開發(fā)團(tuán)隊(duì)：目前我們還沒有精力去收集整理使用了 Element 的項(xiàng)目，不過按照最近一段時(shí)間在 Gitter 里討論看到了一些開發(fā)者分享的項(xiàng)目鏈接，完成質(zhì)量還是挺高的。過段時(shí)間我們會在 issue 里開始征集大家使用 Element 組件庫的作品鏈接做分享。
淀粉提問：如何定制CSS，是覆蓋還是改源碼？改了源碼如果Element版本更新之后 樣式就沒了？
Element開發(fā)團(tuán)隊(duì)：可以用 element-theme 主題自定義工具，或者直接下載 element-theme-default 主題包自己修改主題。如果只是簡單的修改，建議直接覆蓋樣式。
淀粉提問：您好，我是個(gè)初學(xué)者，看不大懂編程，初學(xué)要做前端，應(yīng)該先從哪開始入手學(xué)習(xí)？
Element開發(fā)團(tuán)隊(duì)：freecodecamp 和 codecademy 都是很好的入門途徑。
淀粉提問：在技術(shù)選型的時(shí)候，基于什么考慮，選擇了Vue，而不是React？
Element開發(fā)團(tuán)隊(duì)：和 React 相比，我們公司前端使用 Vue 的更多。為了照顧到大多數(shù)人，我們選用 Vue 作為 Element 的框架。
淀粉提問：我在寫 Vue 的組件通信中，也發(fā)現(xiàn)事件比較好用但不容易被控制，因此一般是給自定義事件加上命名空間，如 “$dispatch('AComponent::rotate', 90)，”Element 團(tuán)隊(duì)有這樣的實(shí)踐嗎？
Element開發(fā)團(tuán)隊(duì)：在 Element 的組件中對組件通信這一塊并沒有用到全局的 event bug，而是通過dispatch和broadcast來進(jìn)行相互依賴的組件間的通信。雖然Vue2.0里棄用了$dispatch和$broadcast的api，但我們自己在組件庫中封裝了一遍。
淀粉提問：Element 團(tuán)隊(duì)使用 Vuex 時(shí)的一些具體情景是什么？
Element開發(fā)團(tuán)隊(duì)： Element 沒有用到 Vuex 的情景。
淀粉提問：后續(xù)是否會開放一些常見業(yè)務(wù)組件，比如城市選擇等？
Element開發(fā)團(tuán)隊(duì)：與后臺業(yè)務(wù)關(guān)聯(lián)很大的組件應(yīng)該不會直接開放，不過這個(gè)組件如果能解決類似的其他問題，我們會抽離業(yè)務(wù)屬性將之作為「基礎(chǔ)組件」開放出來。城市選擇只用了比較基礎(chǔ)的 Select 組合而已。
淀粉提問：Element 在做動(dòng)畫效果這個(gè)方向上有些什么成績呢？
Element開發(fā)團(tuán)隊(duì)：動(dòng)畫效果方面我們還沒有人力去探索和研究，主要精力還是放在業(yè)務(wù)系統(tǒng)的搭建上。
嘉賓簡介
Element 開發(fā)團(tuán)隊(duì)
照片從左到右依次為：
FuryBean、cinwell、楊奕、曾海平、敖天羽、Fishpaw、Fredddli、梓非徐
Element 開發(fā)團(tuán)隊(duì)由餓了么 UED 的設(shè)計(jì)師和大前端的工程師組成，他們協(xié)作開發(fā)了 Element ——一套基于 Vue 2.0 的桌面端組件庫。
今日薦文
Vue相關(guān)內(nèi)容推薦：
Vue作者尤雨溪：Vue 2.0，漸進(jìn)式前端解決方案
Vue.js作者尤雨溪加盟Weex項(xiàng)目擔(dān)任技術(shù)顧問
往期精彩分享：
滴滴：公司級組件庫以及MIS系統(tǒng)的技術(shù)實(shí)踐
長按二維碼關(guān)注
** 前 端 之 巔** 緊 跟 前 端 發(fā) 展 共 享 一 線 技 術(shù) 不 斷 學(xué) 習(xí) 進(jìn) 步 攀 登 前 端 之 巔
