从设计到代码：设计师掌握前端框架的实用手册

前端框架是一种软件工具集，专为Web开发设计，用于简化和加速网页及应用程序的用户界面（UI）构建过程。这些框架提供了一套预定义的结构、规范和组件，通常包括HTML、CSS和JavaScript的库或模块，帮助开发者遵循最佳实践来组织代码，并快速实现复杂的交互式界面。

简单来说就是把复杂的代码进行封装，组件化开发，现代前端框架支持组件化架构，允许将UI拆分成可重用的部分（组件），每个组件可以独立开发、测试和维护。

常见的前端框架有React、Angular、Vue.js、Ember.js、jQuery、Bootstrap等。随着Web技术的发展，前端框架不断迭代升级，越来越强调工程化、模块化和高效开发。

前端框架的发展史：https://www.jianshu.com/p/a361c384397b

了解一下有利于加强我们设计师对开发工程师的工作的理解。

前端盒子模型是指，把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。其中，盒子里面的文字和图片等元素是内容区域，盒子的厚度称为盒子的边框，盒子内容与边框的距离是内边距（类似单元格的 cellpadding），盒子与盒子之间的距离是外边距（类似单元格的 cellspacing） 。

：使用CSS中的盒模型属性，如width、height、margin、padding等，可以精确地控制网页中各个元素的大小和位置。

：通过将多个盒子模型组合在一起，可以创建出复杂的网页布局。例如，可以使用浮动（float）或定位（position）属性来排列元素，或者使用Flexbox或Grid布局来实现更灵活的布局。

：利用盒模型的属性，可以设计出适应不同屏幕尺寸的响应式网页。例如，可以使用媒体查询（media query）来根据屏幕宽度调整元素的宽度和高度，或者使用百分比单位来使元素的大小相对于其父元素进行缩放。

总之，设计师可以利用前端的盒子模型来精确地控制网页中各个元素的大小和位置，创建复杂的布局，设计响应式网页，添加视觉效果，并优化网页的性能。

Ant Design提供了丰富的企业级UI组件库，涵盖了表单、数据展示、导航、反馈提示等各种场景。设计师可以直接利用这些组件进行界面布局和交互设计，这大大减少了从零开始设计的时间成本。

Mint UI是 饿了么团队开发基于vue .js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。

 

是滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

是一个强大的ui库基于vue，有很多实用的基础组件比elementui的组件更丰富，主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发，支持 ES2015 高质量、功能丰富 友好的 API ，自由灵活地使用空间。

网址：https://www.iviewui.com/

是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

Element是饿了么前端开源维护的Vue UI组件库,组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。 主要用于开发PC端的页面，是一个质量比较高的Vue UI组件库。

at-ui 是一款阿里团队创建的基于 Vue 2.x 的前端 UI 组件库，主要用于快速开发 PC 网站产品。  它提供了一套 npm + webpack + babel 前端开发工作流程，CSS 样式独立，即使采用不同的框架实现都能保持统一的 UI 风格。

网址：https://at.aotu.io/

Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。

含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。

vant UI是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。

网址：https://vant-ui.github.io/vant/#/zh-CN

 

是Twitter推出的一个用于前端开发的开源工具包，是一个CSS/HTML框架，目前世界上的很多网站开发都使用了这个。其中的栅格理论、响应式解决方案都变成了业界的参考规范。

网址：http://www.bootcss.com/

是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

网址：https://weui.io/11：Framework 7一个简单、免费的HTML框架，主要用来构建移动端web应用，分为iOS和安卓两种风格。