2019年最流行的10個前端架構

文章目錄

• ​​1、Ant Design​​
• ​​2、Bootstrap​​
• ​​3、Taro UI​​
• ​​4、iView​​
• ​​5、LuLu UI​​
• ​​6、QMUI​​
• ​​7、Element​​
• ​​8、Fusion Design​​
• ​​9、WeUI​​
• ​​10、Framework 7​​
• ​​總結​​

1、Ant Design

網站連結：​​https://ant.design/index-cn​​

螞蟻金服出品，非常著名的架構。就算你不了解前端，也會在公司的項目中多少聽到程式員說起過。目前很多公司都在用，已經很成熟。而且提供了對設計師友好的 Sketch 規範檔案，可以直接拿來用。

Ant Design 是基于 React 開發的，并不是傳統的 html。React 起源于 Facebook 的内部項目，現在已經成了一個很流行的開發工具。

理想的項目開發流程是，設計師和程式員一起熟悉 Ant Design 的各種樣式，設計師不再随意設計，而是基于架構的基礎樣式進行設計創新。這樣程式員在進行 UI設計稿還原的時候，能極大提高開發效率。

現在很多項目都使用了 Ant Design，一些公司在招聘 UI設計師的時候甚至會寫上：了解 Ant Design 規範的優先考慮。是以這個架構建議設計師都好好看一下。

2、Bootstrap

網站連結：​​http://www.bootcss.com/​​

Bootstrap 是 Twitter 推出的一個用于前端開發的開源工具包，是一個 CSS/HTML 架構，目前世界上的很多網站開發都使用了這個。其中的栅格理論、響應式解決方案都變成了業界的參考規範。

很多設計師在學前端的時候，都會接觸到這個架構，甚至教育訓練機構有專門的課程，是以重要性可見一斑。

3、Taro UI

網站連結：​​https://taro-ui.aotu.io/​​

Taro UI，一套基于 Taro 架構開發的多端UI元件庫，可以在微信小程式/H5/ReactNative 等多端适配運作。京東使用者體驗設計部的凹凸實驗室出品。

現在一個産品要求在 iOS、安卓、小程式、h5 等多端運作，針對不同的用戶端開發不同的代碼會産生巨大的成本，這時候隻編寫一套代碼就能夠适配到多端的能力就顯得極為需要。

使用 Taro，就可以隻寫一套代碼，再通過 Taro 的編譯工具，将源代碼分别編譯出可以在不同端（微信小程式、H5、RN等）運作的代碼，節約成本。

4、iView

網站連結：​​https://www.iviewui.com/​​

一套基于 Vue.js 的高品質 UI元件庫。Vue.js 是一個 JavaScriptMVVM 庫，是一套建構使用者界面的漸進式架構。

在網站中可以看到數量衆多的 UI元件和對應代碼，本質上和我們制作 UI規範是一樣的。

5、LuLu UI

網站連結：​​https://l-ui.com/​​

LuLu UI，是一個基于 jQuery，針對 PC 網站，相容 ie8、ie7 的前端 UI 架構，包含很多靜态或動态 UI 元件。對設計師非常友好，隻需要簡單的 html、css 知識就能快速上手使用。

差別于 Ant design 面向中背景開發，LuLu UI 非常适合面向外部使用者的網站開發。會簡單的 HTML 和 jQuery 就可以上手了，不像一些流行架構，需要較多的學習成本。

6、QMUI

網站連結：​​https://qmuiteam.com/​​

QMUI，騰訊出品，分為 Web、iOS、安卓三個端，都有相應的 dome 下載下傳安裝，設計師可以下載下傳安卓和 iOS 應用，經常看看裡面的元件，熟悉後，和技術的協作會更有效率。

7、Element

網站連結：​​http://element-cn.eleme.io/#/zh-CN​​

餓了麼出品，一套為開發者、設計師和産品經理準備的基于 Vue 2.0 的桌面端元件庫，很适合開發背景産品。有意思的是裡面的預設圖文資料很多都是食物……

8、Fusion Design

網站連結：​​https://fusion.design/​​

阿裡推出的一個适合設計、技術共同使用的設計規範架構。基本目的也是為了讓設計師在一個标準架構内設計界面，同時也提供了 Sketch 插件，讓設計的元件直接轉化為代碼，技術直接調用。

9、WeUI

網站連結：​​https://weui.io/​​

WeUI 是一套同微信原生視覺體驗一緻的基礎樣式庫，由微信官方設計團隊為微信内網頁和微信小程式量身設計，令使用者的使用感覺更加統一。

這個小巧的架構提供了微信頁面常用的元件，我們在設計微信風格的項目時，可以參考使用。

10、Framework 7

網站連結：​​http://www.framework7.cn/​​

一個簡單、免費的 HTML 架構，主要用來建構移動端 web 應用，分為 iOS 和安卓兩種風格。

其本身的結構非常簡單，使用了最基礎的 html、css 和 js 建構，很容易上手使用。也可以用來作為原型開發工具，迅速建立一個應用的原型。

總結