Web前端熱門框架大全

                                       前端熱門JavaScript框架的分析

一、 vue介紹
1.官網：https://cn.vuejs.org/
2.什麼是vue.js
Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。
Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
以尤雨溪爲主的中國開發團隊。
3.vue優點：
（1）雙向數據綁定
也就是所謂的響應式數據綁定。這裏的響應式不是@media 媒體查詢中的響應式佈局，而是指vue.js會自動對頁面中某些數據的變化做出同步的響應。
也就是說，vue.js會自動響應數據的變化情況，並且根據用戶在代碼中預先寫好的綁定關係，對所有綁定在一起的數據和視圖內容都進行修改。而這種綁定關係，就是以input 標籤的v-model屬性來聲明的，因此你在別的地方可能也會看到有人粗略的稱vue.js爲聲明式渲染的模版引擎。
這也就是vue.js最大的優點，通過MVVM思想實現數據的雙向綁定，讓開發者不用再操作dom對象，有更多的時間去思考業務邏輯。
（2）組件化開發
在前端應用，我們是否也可以像編程一樣把模塊封裝呢？這就引入了組件化開發的思想。之後可以進行重複使用。
Vue.js通過組件，把一個單頁應用中的各種模塊拆分到一個一個單獨的組件（component）中，我們只要先在父級應用中寫好各種組件標籤（佔坑），並且在組件標籤中寫好要傳入組件的參數（就像給函數傳入參數一樣，這個參數叫做組件的屬性），然後再分別寫好各種組件的實現（填坑），然後整個應用就算做完了。
（3）Virtual DOM
現在的網速越來越快了，很多人家裏都是幾十甚至上百M的光纖，手機也是4G起步了，按道理一個網頁才幾百K，而且瀏覽器本身還會緩存很多資源文件，那麼幾十M的光纖爲什麼打開一個之前已經打開過，已經有緩存的頁面還是感覺很慢呢？這就是因爲瀏覽器本身處理DOM也是有性能瓶頸的，尤其是在傳統開發中，用JQuery或者原生的JavaScript DOM操作函數對DOM進行頻繁操作的時候，瀏覽器要不停的渲染新的DOM樹，導致頁面看起來非常卡頓。
而Virtual DOM則是虛擬DOM的英文，簡單來說，他就是一種可以預先通過JavaScript進行各種計算，把最終的DOM操作計算出來並優化，由於這個DOM操作屬於預處理操作，並沒有真實的操作DOM，所以叫做虛擬DOM。最後在計算完畢才真正將DOM操作提交，將DOM操作變化反映到DOM樹上。
（4）輕量高效
Vue.js通過簡潔的API提供高效的數據綁定和靈活的組件系統
（5）動畫系統
Vue.js提供了簡單卻強大的動畫系統，當一個元素的可見性變化時，用戶不僅可以很簡單地定義對應的CSS Transition或Animation效果，還可以利用豐富的JavaScript鉤子函數進行更底層的動畫處理。
（6）Vue.js的特點：
MVVM框架、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。
4.vue缺點：
（1） vue不支持ie8.0及以下的版本。
（2）生態不太成熟，比如編輯器裏的語法提示不太完善，而這個又對效率很重要。
（3）主要還是社區吧，這點是無法與 react 和 angular 相比的。
5.與其他框架的對比
官網文檔：https://cn.vuejs.org/v2/guide/comparison.html
1.與AngularJS的區別
相同點：
都支持指令：內置指令和自定義指令。
都支持過濾器：內置過濾器和自定義過濾器。
都支持雙向數據綁定。
都不支持低端瀏覽器。
不同點：
（1）AngularJS的學習成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比較簡單、直觀。
（2）在性能上，AngularJS依賴對數據做髒檢查，所以Watcher越多越慢。Vue.js使用基於依賴追蹤的觀察並且使用異步隊列更新。所有的數據都是獨立觸發的。對於龐大的應用來說，這個優化差異還是比較明顯的。
2.與React的區別
相同點：
react採用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，兩者都需要編譯後使用。
中心思想相同：一切都是組件，組件實例之間可以嵌套。
都提供合理的鉤子函數，可以讓開發者定製化地去處理需求。
都不內置列數AJAX，Route等功能到核心包，而是以插件的方式加載。
在組件開發中都支持mixins的特性。
不同點：
React依賴Virtual DOM,而Vue.js使用的是DOM模板。React採用的Virtual DOM會對渲染出來的結果做髒檢查。
Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作DOM。

二、 AngularJS介紹
1. 中文官網：
https://www.angularjs.net.cn/ https://angular.cn/
2. 什麼是Angularjs
官方定義：AngularJS是HTML開發本應該的樣子，它是用來開發Web應用的。HTML一般是用來聲明靜態頁面的，而AngularJS可以只通過前端技術就實現動態的頁面。
AngularJS誕生於2009年，由Misko Hevery 等人創建，後爲Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。
3. Angularjs優點：
（1）模板功能強大豐富，並且是聲明式的，自帶了豐富的Angular指令；
（2）是一個比較完善的前端MVC框架，包含模板，數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等所有功能；
（3）自定義Directive，比jQuery插件還靈活，但是需要深入瞭解Directive的一些特性，簡單的封裝容易，複雜一點官方沒有提供詳細的介紹文檔，我們可以通過閱讀源代碼來找到某些我們需要的東西，如：在directive使用 $parse；
（4）ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可複用的代碼，對於敏捷開發的團隊來說非常有幫助，我們的項目從上線到目前，UI變化很大，在摸索中迭代產品，但是js的代碼基本上很少改動。
4. Angularjs缺點：
（1）驗證功能錯誤信息顯示比較薄弱，需要寫很多模板標籤，沒有jQuery Validate方便，所以我們自己封裝了驗證的錯誤信息提示；
（2）ngView只能有一個，不能嵌套多個視圖，雖然有 angular-ui/ui-router · GitHub 解決，但是貌似ui-router 對於URL的控制不是很靈活，必須是嵌套式的（也許我沒有深入瞭解或者新版本有改進）；
（3）對於特別複雜的應用場景，貌似性能有點問題，特別是在Windows下使用chrome瀏覽器，不知道是內存泄漏了還是什麼其他問題，沒有找到好的解決方案，奇怪的是在IE10下反而很快，對此還在觀察中；
（4）這次從1.0.X升級到1.2.X，貌似有比較大的調整，沒有完美兼容低版本，升級之後可能會導致一個兼容性的BUG，具體詳細信息參考官方文檔 AngularJS ，對應的中文版本：Angular 1.0到1.2 遷移指南
（5）ng提倡在控制器裏面不要有操作DOM的代碼，對於一些jQuery 插件的使用，如果想不破壞代碼的整潔性，需要寫一些directive去封裝插件，但是現在有很多插件的版本已經支持Angular了，如：jQuery File Upload Demo
（6）Angular 太笨重了，沒有讓用戶選擇一個輕量級的版本，當然1.2.X後，Angular也在做一些更改，比如把route，animate等模塊獨立出去，讓用戶自己去選擇。
（7）性能：雙向數據綁定，在項目越大的時候，性能影響很大。AngularJs採用髒數據檢查的方式，跟蹤數據的改變，動態改變用戶頁面的數據。隨着綁定數量的增加，性能就會越來越低
（8）表單驗證必須寫指令來提示錯誤信息
（9）路由：子路由不可嵌套；必須依賴於JavaScript語言
5.與其他框架的對比
1.與React的對比
a. 虛擬DOM，速度響應很快
b. flux架構，實現服務器端渲染
c.本身只是MVC中的V層，常需要和其他庫結合使用。重點在UI上
2.與React的對比
a. 簡單
b. 靈活
c.只關注web
d.個人主導的（angular類似生態圈，vue類似社區。vue由國內大牛開發angular谷歌團隊開發）
e.服務器端渲染，vue只能藉助其他服務器渲染庫

三、 React介紹
1.中文官網：https://www.reactjscn.com/
2.什麼是React
React 起源於 Facebook 的內部項目，因爲該公司對市場上所JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設Instagram 的網站。做出來以後，發現這套東西很好用，就在2013年5月開源了。
React 不是一個完整的 MVC 框架，最多可以認爲是 MVC 中的 V（View），甚至 React 並不非常認可 MVC 開發模式；
React 的服務器端 Render 能力只能算是一個錦上添花的功能，並不是其核心出發點，事實上 React 官方站點幾乎沒有提及其在服務器端的應用；
有人拿 React 和 Web Component 相提並論，但兩者並不是完全的競爭關係，你完全可以用 React 去開發一個真正的 Web Component；
React 不是一個新的模板語言，JSX 只是一個表象，沒有 JSX 的 React 也能工作。
React主要用於構建UI。你可以在React裏傳遞多種類型的參數，如聲明代碼，幫助你渲染出UI、也可以是靜態的HTML DOM元素、也可以傳遞動態變量、甚至是可交互的應用組件。
3.React優點：
1、 React速度很快
它並不直接對DOM進行操作，引入了一個叫做虛擬DOM的概念，安插在javascript邏輯和實際的DOM之間，性能好
2、跨瀏覽器兼容
虛擬DOM幫助我們解決了跨瀏覽器問題，它爲我們提供了標準化的API，甚至在IE8中都是沒問題的。
3、一切都是component：
代碼更加模塊化，重用代碼更容易，可維護性高。
4、單向數據流
Flux是一個用於在JavaScript應用中創建單向數據層的架構，它隨着React視圖庫的開發而被Facebook概念化。
5、同構、純粹的javascript
因爲搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執行，預渲染你的應用有助於搜索引擎優化。
6、兼容性好
比如使用RequireJS來加載和打包，而Browserify和Webpack適用於構建大型應用。它們使得那些艱難的任務不再讓人望而生畏。
4.React缺點：
1.不適合單獨做一個完整的框架
React是目標是UI組件，通常可以和其它框架組合使用，目前並不適合單獨做一個完整的框架。React 即使配上 Flux 的組合，也不能稱之一個完整的框架，比如你想用Promise化的AJAX？對不起沒有，自己找現成的庫去。而且第三方組件遠遠不如Angular多。React本身只是一個V而已，所以如果是大型項目想要一套完整的框架的話，也許還需要引入Flux和route相關的東西。而Angular在這方面提供的東西比React多多了。
5. 與其他框架的對比
與vue的對比
1.組件化方面
1.什麼是模塊化：是從代碼的角度來進行分析的；把一些可複用的代碼，抽離爲單個的模塊；便於項目的維護和開發；
2.什麼是組件化：是從UI界面的角度來進行分析的；把一些可複用的UI元素，抽離爲單獨的組件；便於項目的維護和開發；
3.組件化的好處：隨着項目規模的增大，手裏的組件越來越多；很方便就能把現有的組件，拼接爲一個完整的頁面；
4.Vue是通過 .vue 文件，來創建對應的組件；
template 結構
script 行爲
style 樣式
5.React中有組件化的概念，但是，並沒有像vue這樣的組件模板文件；React中，一切都是以JS來表現的；因此要學習React，JS要合格；ES6 和 ES7 （async 和 await）要會用；
2.開發團隊方面
React是由FaceBook前端官方團隊進行維護和更新的；因此，React的維護開發團隊，技術實力比較雄厚；
Vue：第一版，主要是有作者尤雨溪專門進行維護的，當 Vue更新到 2.x 版本後，也有了一個以尤雨溪爲主導的開源小團隊，進行相關的開發和維護；
3．社區方面
在社區方面，React由於誕生的較早，所以社區比較強大，一些常見的問題、坑、最優解決方案，文檔、博客在社區中都是可以很方便就能找到的；
Vue是近兩年才火起來的，所以，它的社區相對於React來說，要小一些，可能有的一些坑，沒人踩過；
4.移動APP開發體驗方面
Vue，結合 Weex 這門技術，提供了遷移到移動端App開發的體驗（Weex，目前只是一個小的玩具，並沒有很成功的大案例；）
React，結合 ReactNative，也提供了無縫遷移到移動App的開發體驗（RN用的最多，也是最火最流行的）；
與Angularjs的對比
兩者的社區基礎都很好。
react是facebook的，angular是谷歌的，所以，我們不用擔心其社區基礎。
angular是一個真正的框架，react是一個庫。
react不是框架。 angular自身就繼承了各種插件，所以，我們不需要再過多的考慮，它已經提供給你了各種解決辦法，而react是比較輕的，只是解決了其中的某個痛點而已。
就性能而言，react更好。
react提出了虛擬DOM這個關鍵，很好地提升了性能，這一點要比angular強大。

                                              前端UI框架的分析

一、移動ui框架
MUI

MUI簡介：
   MUI是hbuilder集成的一個前端UI庫，它是原生的。它裏面的所有組件都是以m開頭的。最接近原生APP體驗的高性能前端框架

2.官網：http://dcloudio.github.io/mui/
3.Pc模擬地址：https://dcloud.io/hellomui/
4.手機模擬二維碼：

5.Github: https://github.com/dcloudio/mui/
6.優點：
輕量
   追求性能體驗，是我們開始啓動MUI項目的首要目標，輕量必然是重要特徵；MUI不依賴任何第三方JS庫，壓縮後的JS和CSS文件僅有100+K和60+K。
原生UI
   鑑於之前的很多前端框架（特別是響應式佈局的框架），UI控件看起來太像網頁，沒有原生感覺，因此追求原生UI感覺也是我們的重要目標MUI以iOS平臺UI爲基礎，補充部分Android平臺特有的UI控件
流暢體驗很高，組件豐富；

Mint UI
1.Mint UI簡介：
   Mint UI是餓了麼團隊開發基於vue .js的移動端UI框架，它包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動端開發需要。基於vue的移動端UI框架。

2.官網：http://mint-ui.github.io/#!/zh-cn
3.pc模擬地址：http://mint-ui.github.io/docs/#/
4.手機模擬二維碼：

5.Github: https://github.com/ElemeFE/mint-ui/
6.優點：
   • Mint UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動端開發需要。通過它，可以快速構建出風格統一的頁面，提升開發效率。
   • 真正意義上的按需加載組件。可以只加載聲明過的組件及其樣式文件，無需再糾結文件體積過大。
   • 考慮到移動端的性能門檻，Mint UI 採用 CSS3 處理各種動效，避免瀏覽器進行不必要的重繪和重排，從而使用戶獲得流暢順滑的體驗。
   • 依託 Vue.js 高效的組件化方案，Mint UI 做到了輕量化。即使全部引入，壓縮後的文件體積也僅有 ~30kb (JS + CSS) gzip。

Cube-UI

cube-UI簡介：
cube-ui 是滴滴團隊開發的基於 Vue.js 實現的精緻移動端組件庫。支持按需引入和後編譯，輕量靈活；擴展性強，可以方便地基於現有組件實現二次開發。
官網：https://didi.github.io/cube-ui/#/zh-CN
Pc模擬地址: https://didi.github.io/cube-ui/#/zh-CN/example
手機模擬二維碼:
Github:https://github.com/didi/cube-ui
優點：
質量可靠
   由滴滴內部組件庫精簡提煉而來，歷經考驗，並且每個組件都有充分單元測試，爲後續集成提供保障。
體驗極致
   以迅速響應、動畫流暢、接近原生爲目標，在交互體驗方面追求極致。
標準規範
   遵循統一的設計交互標準，高度還原設計效果；接口標準化，統一規範使用式，開發更加簡單高效。
擴展性強
   支持按需引入和後編譯，輕量靈活；擴展性強，可以方便地基於現有組件實現二次開發。

Vant UI

Vant UI簡介：
vant UI是有贊前端團隊基於有贊統一的規範實現的 Vue 組件庫，提供了一整套 UI 基礎組件和業務組件。通過 Vant，可以快速搭建出風格統一的頁面，提升開發效率。
官網：https://youzan.github.io/vant/#/zh-CN/intro
Pc模擬地址：https://youzan.github.io/vant/#/zh-CN/intro
手機模擬二維碼：
Github: https://github.com/youzan/vant
優點：
   輕量，可靠的小程序UI組件庫

Ionic(混合式)
1.ionic簡介：
   Ionic既是一個CSS框架也是一個Javascript UI庫,Ionic 是目前最有潛力的一款 HTML5 手機應用開發框架。通過 SASS 構建應用程序，它提供了很多 UI 組件來幫助開發者開發強大的應用。它使用 JavaScript MVVM 框架和 AngularJS 來增強應用。提供數據的雙向綁定，使用它成爲 Web 和移動開發者的共同選擇。

2.官網：http://www.ionic.wang/js_doc-index.html
3.Github: https://github.com/ionic-team/ionic
4.優點：
   ionic 基於Angular語法，簡單易學。
   ionic 是一個輕量級框架。
   ionic 完美的融合下一代移動框架，支持 Angularjs 的特性， MVC ，代碼易維護。
   ionic 提供了漂亮的設計，通過 SASS 構建應用程序，它提供了很多 UI 組件來幫助開發者開發強大的應用。
   ionic 專注原生，讓你看不出混合應用和原生的區別
   ionic 提供了強大的命令行工具。
   ionic 性能優越，運行速度快。

Framework7(混合式)
1.Framework7簡介：
   Framework7 是一個開源免費的框架可以用來開發混合移動應用（原生和HTML混合）或者開發 iOS & Android 風格的WEB APP。也可以用來作爲原型開發工具，可以迅速創建一個應用的原型。
   Framework7最主要的功能是可以使用HTML、CSS和JS來開發移動應用。Framework7是完全免費開源的。
   Framework7 並不能兼容所有的設備。只專注於爲 iOS 和 Google Material設計提供最好的體驗。如果你想開發iOS或者 Android混合應用（Phonegap/Cordova）或者你想開發 iOS 和Google Material 風格的WEB APP，那麼Framework7將會是你的首選。

2.官網：http://www.framework7.cn/#get-started
3.模擬地址：http://www.framework7.cn/#get-started
4.Github: https://github.com/framework7io/framework7/
5.優點：
   • 容易上手使用
只需要一個基本的HTML佈局，並且把Framework7的CSS和JS文件引入即可！Framework7不會強制你寫任何自定義的標籤，也不會通過JS來生成任何額外的內容。你不需要通過JS或者JSON來寫頁面，只需要普通的HTML就可以。
   • 專注於iOS
Framework7 是一個主要專業於iOS的框架。從一開始，就考慮到如何最方便快捷地實現iOS上各種驚豔的UI組件，以及複雜的動畫和靈活的觸摸交互。所以Framework7是你實現像素級精度的iOS應用的最佳選擇。
   • 擁有Material Theme
適用於Android的Material Theme
   • 豐富的UI組件
Framework7 有大量可以直接使用的UI組件和工具，比如modals,popup,action sheet, popover, list views, media lists, tabs,side panels, layout grid, preloader, form elements 等。大部分的組件你都完全不需要寫任何JS代碼。
   • 十分棒的各種接近於native效果
手勢返回，接近於iOS的滑動操作，動態導航欄,下拉刷新，而且，Framework7 有一個非常強大的”消息“組件，你可以很容易定製並集成到你的app中，然後通過異步數據服務（比如 pusher或者 PubNub）來實現不同用戶之間發送消息。
   • 自定義方便
Framework7 的所有樣式文件都被分類放在了一個個很小的 .less 文件中，所以你可以只選擇自己需要的部分文件。
   • 原生滾動條
Framework7最大的特點之一就是使用了原生的滾動條。所以你的滾動條會有原生滾動條一樣的加速度和回彈，沒有任何bug和性能問題。
   • 不依賴第三方庫
Framework7 不依賴任何第三方庫。所以它很輕量、高性能和靈活
   • 高性能的動畫
Framework7 使用硬件加速的CSS動畫以達到最好的性能
   • XHR + Caching + History + Preloading
這幾個功能的組合可以讓你的應用的路由功能變得非常強大。Framework7通過Ajax來加載新頁面，並且可以通過緩存配置讓頁面的加載速度變得非常快。她會在一定的時間內緩存Ajax請求的結果（默認是10分鐘），在緩存有效期內不會發送新的請求而是直接從緩存中取出結果。
   • 多個視圖（分屏）支持，也就是iFrame
Framework7支持多個獨立的視圖(view)。並且你可以不用寫任何JS，只需要在鏈接上加一個 “data-view” 就可以控制每一個視圖。
   • 簡潔的JS API
使用Framework7不需要學習任何新的知識，她的JS接口非常簡潔易用並且功能強大。比如，當你需要彈出一個alert的時候你只需要 app.alert (“Hello World!”)
   • 頁面動畫
Framework7最主要的一個目的就是讓你的應用和iOS本地應用有相同的外觀和交互體驗。並且Framework7是唯一一個提供了1:1精確平滑的頁面切換動畫的框架。
   • Dom7 - 自定義的DOM庫
Framework7不依賴任何第三方庫，包括dom操作，包括jquery。Framework7有一個自帶的高性能dom庫 - DOM7。並且，你不需要因爲DOM7而學習任何新的知識，因爲DOM7的接口和大名鼎鼎的jQuery幾乎是一樣的。

BUI
1.BUI簡介：
   BUI 是用來快速構建界面交互的UI框架, 專注webapp開發, 開發者只需關注業務的開發, 界面的佈局及交互交給BUI, 開發出來的應用, 可以嵌入平臺 ( 微信公衆號, 微信小程序, 釘釘, 淘寶, 支付寶等 ), 亦可以跟其它第三方平臺打包成獨立應用( Bingotouch , Cordova , Dcloud , APICloud , Appcan , 前海圓舟等), 最終可以全跨平臺展示.

2.官網：http://www.easybui.com/
3.pc模擬地址：http://www.easybui.com/
4.手機模擬二維碼：

4. 優點：
快速開發
   結合BUI Fast插件,可以提高5倍以上的開發速度!
快速上手
   一次學習,多平臺適用,跟你剛學前端一樣開發,只需要5分鐘就能快速上手
輕鬆定製
   控件接口開放,UI效果及交互都可以輕鬆定製
多終端適配
   一次開發,多平臺適配,完美還原設計稿,在微信,手機瀏覽器,安卓,IOS保持跟一致的效果.

Weex
1.weex簡介：
   阿里推出的Native框架，支持iOS、安卓、YunOS及Web等多端部署Weex 致力於使開發者能基於通用跨平臺的 Web 開發語言和開發經驗，來構建 Android、iOS 和 Web 應用。簡單來說，在集成了 WeexSDK 之後，你可以使用 JavaScript 語言和前端開發經驗來開發移動應用。
Weex 渲染引擎與 DSL 語法層是分開的，Weex 並不強依賴任何特定的前端框架。目前 Vue.js 和 Rax 這兩個前端框架被廣泛應用於 Weex 頁面開發，同時 Weex 也對這兩個前端框架提供了最完善的支持。Weex 的另一個主要目標是跟進流行的 Web 開發技術並將其和原生開發的技術結合，實現開發效率和運行性能的高度統一。在開發階段，一個 Weex 頁面就像開發普通網頁一樣；在運行時，Weex 頁面又充分利用了各種操作系統的原生組件和能力。

2.官網：https://weex.apache.org/zh/
3.Github:https://github.com/apache/incubator-weex?spm=a2c7j.-zh-.0.0.45da1a8eREP5J2
4.優點：
高性能
   Weex 使用原生組件和原生模塊，來最大化利用原生渲染的性能優勢以及平臺能力，所有的組件和模塊都是可插拔、可擴展的。
跨平臺
   你可以使用同一份代碼編譯成不同目標文件分別在 Web、Android 和 iOS 平臺上運行。原生的組件和模塊在不同平臺中有不同的實現，但是它們都提供了相同的接口。
貼近前端生態
   Weex 擁抱已有的 Web 生態，你可以使用現代化的前端技術開發移動應用。 Weex 支持了最常用 CSS 樣式以及最流行的前端框架，如 Vue 和 Rax，在未來或許還可以支持更多。
被大規模的使用
   Weex 已經在許多超級 App 中大規模使用，一共服務了數億用戶。Weex 還衍生出了各種工程化的產品和平臺，以供工業生產使用。

UNI-app
1.uni-app簡介：
uni-app是一個使用Vue.js開發所有前端應用的框架，開發者編寫一套代碼，可發佈到iOS，Android，H5，以及各種小程序（微信/支付寶/百度/頭條/ QQ /釘釘）等多個平臺。
即使不跨端，uni-app同時也是更好的小程序開發框架。詳見評測
DCloud公司擁有370萬開發者用戶，其中uni-app有5萬+案例，800款插件，50 +微信/ qq羣，並且被阿里小程序工具內置（詳見），開發者可以放心選擇。

2.官網：https://uniapp.dcloud.io/
3.手機模擬二維碼：

4．優點：
   uni-app在開發者數量，案例，跨端抹平度，擴展規模，性能體驗，周邊生態，學習成本，開發成本等8大關鍵指標上擁有更強的優勢。
開發者/案例數量更多
   5萬+案例，800 +插件，50 +微信/ qq羣，更高的百度指數
   跨端完善度更高，真正落地的提高績效
平臺能力不預期
   在跨端的同時，通過條件編譯+平臺特有API調用，可以優雅的爲某平臺寫個性化代碼，調用專有能力而不影響其他平臺。
   支持原生代碼混寫和原生sdk集成。

性能體驗優秀
   體驗更好的混合框架，加載新頁面速度重啓。
   App端支持weex原生渲染，可支持更流暢的用戶體驗。
   小程序端的性能優於市場其他框架。評測
周邊生態豐富
   豐富的插件市場，各種輪子拿來即用。
   支持NPM，支持小程序組件和SDK，兼容mpvue組件和項目，兼容weex組件。
   微信生態的各種sdk可直接用於跨平臺App。學習成本低
   基於通用的前端技術棧，採用vue語法+微信小程序api，無額外學習成本。
開發成本低
   不止開發成本，招聘，管理，測試各方面成本都大幅下降。
HBuilderX是高效開發神器，熟練掌握後研發效率至少翻倍（甚至只開發一個平臺）。

NutUI
1.nutui簡介：
   NutUI是一套京東風格的移動端Vue組件庫，開發和服務於移動Web界面的企業級前中後臺產品。輕量級移動端Vue組件庫（用於移動Web的Vue.js 2.0 UI工具包）

2.官網：https://nutui.jd.com/#/index
3.Github: https://github.com/jdf2e/nutui
4.手機二維碼模擬：

5.優點:
   跨平臺，自動轉微信小程序組件（稍後上線，敬請期待）
   30+ 京東移動端項目正在使用
   基於京東APP 7.0 視覺規範
   支持按需加載
   詳盡的文檔和示例
   支持定製主題
   支持多語言（國際化）
   支持 TypeScript
   支持服務端渲染（Vue SSR）
   單元測試加持
   配套有基於Webpack的構建工具，    可快速創建已內置本組件庫的Vue工程
支持環境
   Android 4.0+
   iOS 8.0+
   支持服務端渲染

                                            PC端框架（響應式）

iview
1.iview簡介：
   View UI，即原先的iView，是一套基於Vue.js的開源UI組件庫，主要服務於PC界面的中後臺產品。

2.官網：https://www.iviewui.com/
3.Github: https://github.com/view-design/ViewUI
4.優點：
   豐富的組件和功能，滿足絕大部分網站場景
   提供開箱即用的管理員系統和高階組件庫，極大程度地節省開發成本
   提供專業，優質的一對一技術支持
   友好的API，自由靈活地使用空間
   細緻，漂亮的UI
   事無鉅細的文檔
   可自定義主題

Layui
1.layui簡介：
layui（諧音：類UI) 是一款採用自身模塊規範編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。layui 首個版本發佈於 2016 年金秋，她區別於那些基於 MVVM 底層的 UI 框架，卻並非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是爲服務端程序員量身定做，你無需涉足各種前端工具的複雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這裏信手拈來。
layui 兼容人類正在使用的全部瀏覽器（IE6/7除外），可作爲 PC 端後臺系統與前臺界面的速成開發方案。

2.官網：https://www.layui.com/
3.GitHub：https://github.com/sentsin/layui/
4.優點：
   （1）layui屬於輕量級框架，簡單美觀。適用於開發後端模式，它在服務端頁面上有非常好的效果。
   （2）layui是提供給後端開發人員最好的ui框架，基於DOM驅動，只要不涉及到交互layui還是很不錯的。
   （3）該框架不依賴與其他的Js框架，雖然它有的模塊需要JQuery
   （4）它是基於原生Js的，不需要去了解其他Js的框架或庫，減少分析該框架的成本
   （5）相比bootstrap來說較輕量。
   （6）有三個獨立組件：layer（彈出層） layDate（日期與時間選擇） layim（即時通訊）
   （7） layui 更偏向與後端開發人員使用，在服務端頁面上有非常好的效果。適合做後臺框架。

Element UI
1.elementui簡介：
   是餓了麼公司發佈的，網站快速成型工具Element，一套爲開發者，設計師和產品經理準備的基於Vue 2.0的桌面端組件庫。

2.官網：https://element.eleme.cn/#/zh-CN
3.GitHub：https://github.com/ElemeFE/element
4.優點：
(1).一致性 Consistency
   與現實生活一致：與現實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；
   在界面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖標和文本、元素的位置等。
(2).反饋 Feedback
   控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作；
   頁面反饋：操作後，通過頁面元素的變化清晰地展現當前狀態。
(3).效率 Efficiency
   簡化流程：設計簡潔直觀的操作流程；
   清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策；
   幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。
   (4).可控 Controllability
   用戶決策：根據場景可給予用戶操作建議或安全提示，但不能代替用戶進行決策；
   結果可控：用戶可以自由的進行操作，包括撤銷、回退和終止當前操作等。

Bootstrap
1.bootstrap簡介：
Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發的。Bootstrap 是 2011 年八月在 GitHub 上發佈的開源產品。

2.中文官網：https://www.bootcss.com/
3.GitHub：https://github.com/twbs/bootstrap
4.優點：
   • 移動設備優先：自 Bootstrap 3 起，框架包含了貫穿於整個庫的移動設備優先的樣式。
   • 瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap。

   • 容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。
   • 響應式設計：Bootstrap 的響應式 CSS 能夠自適應於臺式機、平板電腦和手機。更多有關響應式設計的內容詳見 Bootstrap 響應式設計。
   • 它爲開發人員創建接口提供了一個簡潔統一的解決方案。
   • 它包含了功能強大的內置組件，易於定製。
   • 它還提供了基於 Web 的定製。
   • 它是開源的。
5.缺點：兼容性
   對IE兼容也存在不小的問題，Bootstrap將所有的元素盒模型都設置成了border-box，這是IE混雜模式下的盒模型，光這點就導致了不能兼容IE。此外還用到了大量的H5標籤以及CSS3語法，這些語法標籤兼容性方面同樣存在不小的問題，當然網上存在很多兼容IE的辦法，但需要引入其他文件，有些還不小，勢必導致加載速度變慢，影響用戶體驗。對IE6，7的兼容性肯定不好，對IE8的支持也需要一些額外的文件。IE8的媒體查詢需要response.js的配合才能實現。Bootstrap不支持IE 古老的兼容模式。爲了讓 IE 瀏覽器運行最新的渲染模式下，建議將此標籤加入到你的頁面中：
   簡單靈活可用於架構流行的用戶界面和交互接口的html、css、javascript工具集。
   基於html5、css3的bootstrap，具有大量的誘人特性：友好的學習曲線，卓越的兼容性，響應式設計，12列格網，樣式嚮導文檔。
自定義JQuery插件，完整的類庫，基於Less等

Ant Design
1.Ant Design簡介：
   Ant Design 是一個 UI 設計語言，是一套提煉和應用於企業級中後臺產品的交互語言和視覺體系。Ant Design 源自螞蟻金服體驗技術部的後臺產品開發。在中後臺產品設計中，通常有很多類似的頁面和控件，不同的產品會出現不同的規範和實現，給設計師和工程師帶來很多困擾和重複建設，降低企業後臺的整體研發效率。我們的設計師和前端工程師經過大量的項目實踐和總結，希望能沉澱出一套企業級的交互視覺規範，統一中後臺項目的前端 UI 設計，屏蔽各種不必要的設計差異和前端實現成本，解放設計和前端開發資源。整套設計規範還在持續整理和完善中。

2.官網：https://ant.design/index-cn
3.GitHub：https://github.com/ant-design/ant-design/
4.優點：
   o 提煉自企業級中後臺產品的交互語言和視覺風格。
   o 開箱即用的高質量 React /vue/angular組件。
   o 使用 TypeScript 構建，提供完整的類型定義文件。
   o 全鏈路開發和設計工具體系。
三大版本（React /vue/angular）

Easy UI
1.easyui簡介：
easyui是基於jQuery，Angular，Vue和React的用戶界面組件的集合。easyui提供了用於構建現代的，交互式javascript應用程序的基本功能。使用easyui，您不需要編寫許多javascript代碼，通常可以通過編寫一些HTML標記來定義用戶界面。HTML5網頁的完整框架。easyui可以在開發產品時節省時間和規模。easyui非常簡單，但功能強大。

2.官網：http://www.jeasyui.com/index.php
3.優缺點：easyui 開發後臺真的很方便，功能很強大。UI展示不美觀。

                                       JavaScript框架與UI框架結合使用

【Vue】
element（餓了麼）https://element.eleme.io/
Element，一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫

Iview https://www.iviewui.com/
一套基於 Vue.js 的高質量UI 組件庫

Vuetify https://vuetifyjs.com/zh-Hans/
   Vuetify基於vue2.0,爲移動而生的組件框架
   Vuetify 支持SSR（服務端渲染）,SPA（單頁應用程序）,PWA（漸進式Web應用程序）和標準HTML頁面。
   不兼容IE9/IE10，部分兼容IE11/Safari9，兼容其他瀏覽器。

Vux UI組件庫https://vux.li/
Vux是基於WeUI和Vue2.x開發的移動端UI組件庫，主要服務於微信頁面。Vux的定位已經很明確了，一是：Vue移動端UI組件庫，二是：WeUI的基礎樣式庫。Vux的組件涵蓋了所有的WeUI的內容，還擴展了一些常用的組件。比如：Sticky、timeline、v-chart、XCircle。Vux是個人維護的。但是GitHub上star還是很高的，達到13k。在GitHub上看到對issue的關閉還是很迅速的。Vux文檔基本的組件用法和效果都講解到位了。在vux官網上也展示了很多Vux的使用案例。在微信頁面開發中，基本沒有太多的bug，開發還是比較順手的。

Bootstrap-Vue UI組件庫
Bootstrap-Vue官網：https://bootstrap-vue.js.org/
uiv官網：https://uiv.wxsm.space/
Bootstrap-VUE提供了基於vue2的Bootstrap V4組件和網格系統的實現，完成了廣泛和自動化的WAI ARA可訪問性標記。uiv是基於Vue2的Bootstrap 3實現。Bootstrap 4是最新發布的版本，與 Bootstrap3 相比擁有了更多的具體的類以及把一些有關的部分變成了相關的組件。同時 Bootstrap.min.css 的體積減少了40%以上。Bootstrap4 放棄了對 IE8 以及 iOS 6 的支持，現在僅僅支持 IE9 以上以及 iOS 7 以上版本的瀏覽器。想當初剛流行響應式網站的時候，Bootstrap是世界上最受歡迎的建立移動優先網站的框架，Bootstrap可以說風靡全球。就算放在現在很多企業網站都是採用Bootstrap做的響應式。Bootstrap-Vue可以讓你在Vue中也實現Bootstrap的效果。

其他與vue相關搭配的框架:http://www.fly63.com/article/detial/4768

【React】
Material https://material-ui.com/
   世界上最受歡迎的React UI框架。
Ant Design（螞蟻金服）https://ant.design/index-cn
   一個服務於企業級產品的設計體系，基於『確定』和『自然』的設計價值觀和模塊化的解決方案，讓設計者專注於更好的用戶體驗。
   基於 Ant Design 設計語言，我們提供了一套開箱即用的高質量 React 組件，用於開發和服務於企業級中後臺產品，除官方的 React 實現，還有 Angular、Vue 的實現。
   提供antd資源包、Axure組件庫、sketch工具集等工具和資源。
   Ant Design Pro：開箱即用的中臺前端/設計解決方案
   Ant Design Mobile：antd-mobile 是 Ant Design 的移動規範的 React 實現
   AntV：簡單、專業、擁有無限可能的數據可視化解決方案
   dva ：基於 redux、redux-saga 和 react-router 的輕量級前端框架。
其他與React相關搭配的框架：https://www.jianshu.com/p/87ec34e59891

【Angular】
Angular Material https://material.angular.io/
Angular的Material Design組件

NG-ZORRO https://ng.ant.design/docs/introduce/zh
這裏是 Ant Design 的 Angular 實現，開發和服務於企業級後臺產品。提煉自企業級中後臺產品的交互語言和視覺風格。開箱即用的高質量 Angular 組件。
使用 TypeScript 構建，提供完整的類型定義文件。

其他與Angular相關搭配的框架：https://blog.csdn.net/dengfangfang11/article/details/80326516

                        注：本文章有些內容來自網絡，如有侵權請聯繫作者刪除！

Web前端熱門框架大全

開源高性能結構化日誌模塊NanoLog

【簡寫Mybatis-02】註冊機的實現以及SqlSession處理

手繪二維碼

.NET藉助虛擬網卡實現一個簡單異地組網工具

Vue詳細的環境搭建，帶你快速入門。

Web前端熱門框架大全

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結