前端必备框架/工具

3,235 阅读4分钟

持续更新中.......

1. 响应式框架

Vue

渐进式 JavaScript 框架

官网:cn.vuejs.org/

vue

React

用于构建用户界面的 JavaScript 库

官网:react.docschina.org/

React

2. 数据可视化框架

Echarts

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

官网:www.echartsjs.com/zh/index.ht…

Echarts

AntV

AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。

官网:antv.gitee.io/zh

AntV

3. 跨端框架

React Native

使用JavaScript和React编写原生移动应用

官网:reactnative.cn/

rn

Weex

Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。

官网:weex.apache.org/zh/

Weex

Taro

Taro 多端统一开发解决方案

官网:taro.aotu.io/

Taro

uni-app

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。

官网:uniapp.dcloud.io/

uni

4. 企业级中后台

Ant Design Pro

开箱即用的中台前端/设计解决方案

官网:pro.ant.design/index-cn

Ant Design Pro

飞冰

简单而友好的前端研发体系 、海量可复用物料,搭配 IDE 极速构建前端应用

官网:ice.work/

飞冰

5. UI

Element

一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

官网:element.eleme.cn/#/zh-CN

Element

Ant Design

企业级产品设计体系,创造高效愉悦的工作体验 - 阿里

官网:ant.design/index-cn

Ant Design

Cube UI

基于 Vue.js 实现的精致移动端组件库

官网:didi.github.io/cube-ui/#/z…

Taro UI

一套基于 Taro 框架开发的多端 UI 组件库

官网:taro-ui.jd.com/#/

6. CSS 处理

Sass

2007,最早最成熟的CSS预处理器,有两种语法,分别以 .sass 和 .scss 为扩展名。SCSS是Sass 3引入的新语法,完全兼容CSS3,并继承了Sass的强大功能,和CSS语法结构更接近

网址: www.sass.hk/

sass

Less

2009,受Sass影响大,以 .less 为扩展名

网址: lesscss.cn/

less

Stylus

2010,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,以 .styl 为扩展名

网址: stylus.bootcss.com/

Stylus

animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing. (css 动画库)

网址: github.com/daneden/ani…

animate

7. 图片处理

cropperjs

JavaScript image cropper (图片裁剪)

网址: github.com/fengyuanche…

img-2

图片懒加载

网址: github.com/RevillWeb/i…

Fabric.js

基于 canvas 开发,支持拖拽图片合成。

网址: github.com/fabricjs/fa…

SpriteJS

A cross platform high-performance graphics system (360 团队开发的,跨平台的高性能图形系统,它能够支持 web、node、桌面应用和小程序的图形绘制和实现各种动画效果 )

网址: github.com/spritejs/sp…

8. 常用工具包

fetch

Web 端http库

网址:github.com/github/fetc…

axios

易用、简洁且高效的http库。node Web 端通用

网址:github.com/axios/axios

regexr

正则

网址:【 https://github.com/gskinner/regexr 】

lodash

lodash 是一套工具库,内部封装了字符串、数组、对象等常见数据类型的处理函数。

网址:[ https://lodash.com/ ]

purifycss

Remove unused CSS. Also works with single-page apps. (可以帮助你移除没使用到的 css,也算是一个小优化点~ )

网址: github.com/purifycss/p…

9. NB的东西!!

imgcook

由设计稿一键智能生成代码

网址: imgcook.taobao.org/

10. Vue

Vue-Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。

网址: router.vuejs.org/zh/

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

网址: vuex.vuejs.org/zh/

Vue CLI

🛠️ Vue.js 开发的标准工具

网址: cli.vuejs.org/zh/

Vue CLI

VuePress

Vue 驱动的静态网站生成器

网址: www.vuepress.cn/

VuePress

vue-virtual-scroller

基于 vue 的虚拟列表无限滚动,性能还不错~

网址: https://github.com/Akryum/vue-virtual-scroller

Vue.Draggable

对元素进行拖拽

网址: https://github.com/SortableJS/Vue.Draggable

11. React

12. 移动端

Swiper

主要用来解决移动端触摸滑动,像什么轮播图啊,上下滑动啊,用它就对了~

网址:[ https://swiperjs.com/ ]

fullPage

非常好用的全屏滑动库,去官网看 demo 就能感受到了~

网址: [ https://alvarotrigo.com/fullPage/zh/#page2 ]

PhotoSwipe

图片预览组件,支持移动端,相对上面组件库里面自带的,比较轻量~

Swiper + PhotoSwipe + fullPage 这 3 个一配合,微信里常见的 H5 页完全不是问题哒!!!😝

网址:[ https://github.com/dimsemenov/photoswipe ]

HAMMER.JS

移动端手势库,挺不错滴~

网址:[ https://github.com/hammerjs/hammer.js ]

待整理

direction-reveal

lax.js

nodeppt