餓了么基于Vue2.0的通用組件開發(fā)之路（分享會(huì)記錄）

發(fā)布時(shí)間：2017年02月14日作者：文章轉(zhuǎn)自網(wǎng)絡(luò)，版權(quán)歸原作者所有，反饋可立刻刪除 (該文來自筆記，點(diǎn)擊查看原文)

Element：一套通用組件庫的開發(fā)之路

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

官網(wǎng)：http://element.eleme.io/#/
github：https://github.com/ElemeFE/element

## 設(shè)計(jì)目的

大部分項(xiàng)目起源都是源于業(yè)務(wù)方的需求，Element 也是一樣。隨著公司業(yè)務(wù)發(fā)展，內(nèi)部開始衍生出很多后臺(tái)系統(tǒng)，UED 部門也接到越來越多的設(shè)計(jì)需求，分析整個(gè)過程，我們發(fā)現(xiàn)如下問題：

- 日漸增多的后臺(tái)產(chǎn)品設(shè)計(jì)需求
- 設(shè)計(jì)資源有限，沒辦法支持所有業(yè)務(wù)線
- 公司內(nèi)部諸多后臺(tái)產(chǎn)品使用體驗(yàn)不一致

于是我們決定：

- 設(shè)計(jì)一套后臺(tái)支撐框架，提升后臺(tái)系統(tǒng)的可用性和一致性
- 套用此框架，即使沒有設(shè)計(jì)師參與，也能讓產(chǎn)品或開發(fā)設(shè)計(jì)出一套好用的后臺(tái)系統(tǒng)

## 設(shè)計(jì)階段

下面簡(jiǎn)單說一下設(shè)計(jì) Element 經(jīng)歷的幾個(gè)階段。

**了解業(yè)務(wù)并熟悉公司內(nèi)各后臺(tái)產(chǎn)品，尋找業(yè)務(wù)上的共性問題**
設(shè)計(jì)的目的是為了業(yè)務(wù)服務(wù)。第一步我們從內(nèi)部系統(tǒng)開始入手，了解公司內(nèi)部在使用的各種后臺(tái)系統(tǒng)，將其組件抽象剝離，尋找共性特征。

**專注業(yè)務(wù)組件設(shè)計(jì)**
總結(jié)了公司不同系統(tǒng)不同組件的使用情況后，我們打算從業(yè)務(wù)組件入手，因?yàn)檫@部份是由公司特殊需求衍生的解決方案，我們認(rèn)為解決了這些棘手的問題，也能給其他后臺(tái)產(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ī)范

分類導(dǎo)航

餓了么基于Vue2.0的通用組件開發(fā)之路（分享會(huì)記錄）

Element：一套通用組件庫的開發(fā)之路

## 設(shè)計(jì)目的

## 設(shè)計(jì)階段

延伸閱讀

我想了解如何學(xué)習(xí)