前端必备框架/工具

本文主要是介绍前端必备框架/工具，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. 响应式框架

Vue

渐进式 JavaScript 框架

官网：cn.vuejs.org/

React

用于构建用户界面的 JavaScript 库

官网：react.docschina.org/

2. 数据可视化框架

Echarts

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

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

AntV

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

官网：antv.gitee.io/zh

3. 跨端框架

React Native

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

官网：reactnative.cn/

Weex

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

官网：weex.apache.org/zh/

Taro

Taro 多端统一开发解决方案

官网：taro.aotu.io/

uni-app

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

官网：uniapp.dcloud.io/

4. 企业级中后台

Ant Design Pro

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

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

飞冰

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

官网：ice.work/

5. UI

Element

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

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

Ant Design

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

官网：ant.design/index-cn

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/

Less

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

网址： lesscss.cn/

Stylus

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

网址： stylus.bootcss.com/

animate.css

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

网址： github.com/daneden/ani…

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/

VuePress

Vue 驱动的静态网站生成器

网址： www.vuepress.cn/

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

这篇关于前端必备框架/工具的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！