1.前端布局框架
（1）Bootstrap
概述：简洁直观强悍的前端开发框架，让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包，包括安装、卸载、更新、查看、搜索、发布等。
原文地址：https://www.cnblogs.com/bookchilds/p/9319096.html