文章目录

ES5和ES6LessTypeScriptFoundationReactAngularJSMint UIElement-UlLayuiBootstrapWeexWebpackYarn vs npmESLintJSXegg.jsVue.jsBabelAutoPrefixerStylus、Less和Sass的区别Nuxt.js

ES5和ES6

ECMAScript 6(简称ES6)是JavaScript的语言标准 2009年12月，ECMAScript5.0版正式发布

Less

Less是一门css预处理语言，他扩展了css语言，增加了变量、Mixin、函数等特性，使css更容易维护和扩展。他不是一个直接使用的语言，而是一个生成css的语言。Less可以运行在Node或浏览器端。

TypeScript

TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。TypeScript添加了可选的静态类型系统、很多尚未正式发布的ECMAScript新特性（如装饰器 [1] ）。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript。当前最新版本为TypeScript3.8。

Foundation

Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架，是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。Foundation框架总体来看要比Bootstrap略显高大上一点，但他们俩的设计理念都是非常清楚的，Bootstrap有引导的意思，它尝试处理你项目中的一切所需。Foundation有基础、地基及支柱的意思，给你项目中强有力的创造与支持。相对于Bootstrap丰富的组件及插件，Foundation仅提供了有限的几种元素，其目标是，即使你使用预定义的UI元素，也不应该与大家的网站长得太像。

React

React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

AngularJS

AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是MVW（Model-View-Whatever）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

Mint UI

Mint UI 是由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库，Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。

Element-Ul

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI，适合于Vue的UI框架。

Layui

Layui是一款口碑极佳的web弹层组件，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。layui 首个版本发布于2016年秋，她区别于那些基于 MVVM 底层的 UI 框架，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

Bootstrap

Bootstrap它让你的页面更简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、更简单。它还提供了更优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。有着丰富的网格布局系统以及丰富的可重用组件，还有强大的支持十几的JavaScript、jQuery插件以及组件定制等等。

Weex

Weex框架能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、YunOS及Web等多端部署。

Webpack

webpack是德国开发者 Tobias Koppers 开发的模块加载器, 在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等.通过 webpack 的各种加载器，我们可以更高效地管理这些文件。

webpack较之其他类似工具有什么不同:

有同步和异步两种不同的加载方式 Loader,加载器可以将其他资源整合到JS文件中，通过这种方式，可以讲所有的源文件形成一个模块优秀的语法分析能力，支持 CommonJs和AMD 规范 有丰富的开源插件库，可以根据自己的需求自定义

Yarn vs npm

yarn.lock 文件。Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块，Yarn 就会创建（或更新）yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。并行安装。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 成功安装之后，才能继续后面的安装。而 Yarn 是同步执行所有任务，提高了性能。更简洁的输出。npm 的输出信息比较冗长。在执行 npm install 的时候，命令行里会不断地打印出所有被安装上的依赖。相比之下，Yarn 简洁太多：默认情况下，结合了 emoji （Windows 上 emoji 不可见）直观且直接地打印出必要的信息，也提供了一些命令供开发者查询额外的安装信息。

ESLint

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。

JSX

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。 它是类型安全的，在编译过程中就能发现错误。 使用 JSX 编写模板更加简单快速。

egg.js

eggjs 是阿里开源的企业级 Node.js 框架,专注于企业级框架和应用而生,团队架构师和技术负责人可以基于 egg 孕育出适合自己团队的上层业务框架

Vue.js

近几年最火的前端框架当属Vue.js了，Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。授予了这么高的评价的vue.js，也是开源世界华人的骄傲，因为它的作者是位中国人–尤雨溪

Babel

Babel是ES6+语法的编译器，用于将旧版本浏览器无法识别的语法和特性转换成为ES5语法，使代码能够适用更多环境。

最初的babel使用起来是非常方便的，几乎仅使用少量的配置就可以使用，但随着工具的快速升级和代码架构的转变，babel已经裂变成非常多的部分，每个部分各司其职，这样做的好处是可以缩小生产环境的正式包的代码体积（因为可以按需引用）而加重了开发环境（开发阶段需要引入更多碎片化的插件），但劣势就是将其使用门槛提得非常高，对软件架构不熟悉的开发者难以使用。

AutoPrefixer

.postcssrc.js 众所周知为兼容所有浏览器，有的CSS属性需要对不同的浏览器加上前缀，然而有时添加一条属性，需要添加3~4条类似的 属性只是为了满足浏览器的兼容，这不仅会增加许多的工作量，还会使得你的思路被打断。 如何解决这个问题? 处理CSS前 缀问题的神器——AutoPrefixer。

Autoprefixer是一个后处理程序，你可以同Sass，Stylus或LESS等预处理器共通使用。它适用于普通的CSS，而你无需关心要 为哪些浏览器加前缀，只需全新关注于实现，并使用W3C最新的规范。

Stylus、Less和Sass的区别

CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让CSS 更见简洁，适应性更强，代码更直观等诸多好处。

Nuxt.js

是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。