1.前端布局框架

（1）Bootstrap

地址》》http://getbootstrap.com/

概述：簡潔直觀強悍的前端開發框架，讓web開發更迅速簡單。目前已有bootstrap4，是世界上最受歡迎前端框架，用於構建響應式、移動設備優先的網站。bootstrap中許多組件需要依賴JavaScript才能運行，具體依賴jQuery、Popper.js

安裝：npm install bootstrap

盒模型：為了在CSS中更直觀設置尺寸，將全局box-sizing值從content-box修改為border-box，確保padding不會影響元素最終的寬度計算，但可能會導致第三方組件出現問題。eg:Google地圖和Google定制搜索。極少數情況需要充值box-sizing。

（2）Foundation

地址》》http://foundation.org.cn/

簡介：Foundation類似Bootstrap，是一個免費的前端框架，用於快速開發。在Facebook、eBay、Samsung、Amazon、Disney等網站上使用。

（3）Uikit

地址》》http://www.getuikit.net/

簡介：一款輕量級、模塊化的前端框架，可快速構建強大的web前端界面。基於Less開發。

註意：UIkit 兼容 IE9 以上現代瀏覽器。在 IE8 及其以下版本中，所有JavaScript 都會失效。

（4）Web Components

地址》》https://www.jianshu.com/p/e8994b92bb7a

簡介：Web Components不是一個規範，是由W3C提出的另外4個規範的合集。

對比：

與React》》Web Components是HTML提出的模塊化，目的是復用web組件，主要思想是封裝。而React是為了搭建交互式UI，主要針對不同的狀態顯示不同的View處理的是View與data的同步。

與React Components》》這兩個組件系統相比，Web Components優點在於：HTML規範、復用性移植性高、CSS樣式隔離；React Components優點在於：virtual dom支持服務器渲染，seo友好，編寫測試方便、瀏覽器支持情況好、抽象做的更好組件狀態管理。

與Vue.js》》Vue.js實現了CSS的模塊化，組件的創建、註冊、繼承、生命周期都和Web Components很像。Vue.js和Polymer區別在於Vue.js不依賴於Web components，不需要polyfill。

2.構建工具及包管理器

（1）Grunt

簡介》》現在前端自動化已常見，各種工具層出不窮，grunt、gulp、webpack是應用最廣的三種工具，雖然grunt看似已垂垂老矣，但是以前很多項目一直是用的grunt，項目維護還是可能會用到的。

常用插件：

合並》》grunt-contrib-concat

壓縮》》grunt-contrib-uglify

引用替換》》grunt-usemin(grunt-contrib-copy, grunt-contrib-clean)

（2）yeoman

簡介》》幫助創建項目，提供更好的工具來使得項目更多樣化。Yeoman提供generator系統，一個generator是一個插件，在完整項目上使用‘yo’命令，會運行generator。通過官方Generators推出了Yeoman工作流，工作流是一個健壯、有自己特色的客戶端堆棧，包含能快速構建網絡應用的工具和框架。Yeoman主要提供三個工具：腳手架（yo），構建工具（grunt）、包管理器（bower）。這三個工具是分別獨立開發的，但是需要配合使用來實現高效工作流。

（3）Bower

簡介》》前端包管理工具，幫助我們管理web站點上各種框架，類庫等。主要作用：跟蹤前端包，保證最新，管理前端裏面的HTML,CSS,JS，甚至是圖片，最大的好處是對前端進行了優化。如果多個包依賴於一個包，那麽Bower只下載一次依賴包，這稱為扁平依賴，有助於減少頁面加載。

對比：與npm

現在npm常用於Node.js模塊，npm是嵌套依賴樹關系。npm嵌套依賴用在服務器上很好，不用關心版本沖突問題。Bower是專門為前端創建的，對於依賴的管理屬於扁平化。

（4）npm

簡介》》作為node的包管理工具，通常稱為node包管理器。主要功能管理node包，包括安裝、卸載、更新、查看、搜索、發布等。

前端小記1