前端开发框架、工具汇总清单

日新月异的前端相关框架、工具等汇总清单

---

真的只是 单纯 的想找一个地方记录一下呐…（之前 收藏的内容太多，以至于都不好找了）
当然，我是绝不会告诉你们之所以非要挤点时间整理下，是因为之前存的东西，全都找不到了！！！找不到了！！！找不到了！！！

随时更新中…

• 技术雷达

前端框架

• Nodejs: Node.js 是一个开源与跨平台的 JavaScript 运行时环境
• RN
• 微信小程序
• Vue
• React
• Svelte Svelte 是一个构建 web 应用程序的工具。
• Nuxt.js：基于 Vue.js 的通用应用框架
• AngularJS
• Bootstrap
• TypeScript：TypeScript是JavaScript类型的超级。至于存在理由，根本就不用我多说那~
• Lodash: 一个一致性、模块化、高性能的 JavaScript 实用工具库

在线开发工具集

• snack.expo Snack是一种浏览器内开发环境，您无需在手机或计算机上安装任何工具即可构建Expo 体验。
• codesandbox 是一个为 Web 应用程序开发而构建的在线编辑器
• uupoop: 在线ps：图片编辑等

思维工具（画图工具）

• ProcessOn 免费在线作图、实时协作
• draw.io Create flow charts, process diagrams, org charts, UML diagrams, ER models, network diagrams, and much more. 说明： https://about.draw.io/
• xmind XMind 是一个全功能的思维导图和头脑风暴软件，为激发灵感和创意而生。作为一款有效提升工作和生活效率的生产力工具，受到全球百千万用户的青睐。
• GitMind 免费视觉思维工具，简化逻辑梳理，集思广益，释放创造力 在线脑图、思维导图、流程图、工业设计、工程管理，一图涵千面
• BPMN是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成. github

设计稿工具

• 墨刀 远程办公好帮手 在线产品原型设计与协作平台
• sketch 中文站点 是一款轻量、易用的矢量设计工具
• axure 是一款专业的快速原型设计工具
• dapollo Dapollo是一个基于Sketch的设计插件，内置了支付宝、淘宝、千牛等多套阿里小程序的设计资源，可以帮助你高效的完成设计工作。组件、模板、icon，只需要轻松拖拽，即可完成设计。同时对应的转代码功能更可以让你设计开发一体化，提高协作效率。

设计稿转化为页面代码

• imgcook 由设计稿一键智能生成代码
• Fusion Design

测试平台

• luckyframe 开源测试平台

多端统一开发方案

• taro 多端统一开发解决方案

状态管理库

• vuex
• redux
• mobx

组件库

• Ant Design: 蚂蚁金服开发的基于 React 的PC端组件库
• Ant Design Pro: 管理界面解决方案（基于Ant Design）
• Ant Design Mobile: 同上，基于 React 的移动端组件库
• Vue Antd: 基本上就是拿ant Design来用的，基于vue的组件库，但是这是个人的！
• iView: 一套基于 Vue.js 的高质量 UI 组件库
• Element: 饿了么开发的Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
• ZanUI: 组件库，移动 (基于Vue.js2.0)、PC (基于React)、小程序
• 飞冰: 阿里出品的丰富模板一键创建解决方案。
• keenthemes:The Ultimate Multi-Demo Bootstrap Admin Theme
• vuetifyjs Vuetify 是一个 Vue UI 库，包含手工制作的精美材料组件。不需要设计技能 - 创建令人惊叹的应用程序所需的一切都触手可及。
• storybook Storybook is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment.

图表库

• highcharts： Highsoft AS公司开发的交互图表库展示
• Echarts: 百度开发的遵循 BSD 开源协议，免费商用图表库
• AntV: AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。 G2 (基于可视化编码的图形语法)、G6 (解决流程图和关系分析的图表库)、F2 (专为移动端定制的一套开箱即用的可视化解决方案)

构建工具

• webpack： 一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
• Gulp: 自动化构建工具
• Grunt: 基于Node.js的项目构建工具

微应用

• qiankun qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

host管理配置

• SwitchHosts SwitchHosts! is an App for hosts management & switching.It is a free and open source software.

图片相关

• dummyimage：动态图片生成器，动态生成想要测试用的图片。可以选择尺寸、背景色、字体色、图片格式、文本等，方便快速生成想要尺寸的图片进行一些素材测试等
• tinypng: 使用智能有损压缩技术来减少PNG文件的文件大小
• Clipping Magic: 抠图，在线编辑图片能够快速的去掉背景
• AlloyImage:AlloyImage（AI)是一个基于html5技术的JS图像处理库，集成了一些方便快捷的图像处理API，您可以将它引用到您的网页中，结合css3等技术，做出一些之前无法做到的优美效果，或者，提供一个用JS编写的在线图像处理工具等。
• 稿定设计：图片编辑、抠图、视频创作等

svg相关

• icomoon: svg图标合成，各种小图标合成统一前缀等
• loading: 使用SVG / CSS / GIF / APNG 构建Ajax加载图标
• Snap.svg: 为现有的SVG内容和用Snap生成的SVG内容的动画和操作提供了一个干净、精简、直观、功能强大的API
• svgo: 基于NodeJS的用于优化SVG矢量图形文件的工具。马上使用

日历相关

• Date Range Picker：一个用于选择日期范围的JavaScript组件，应用Bootstrap CSS框架设计
• momentjs: 解析、验证、操作和显示日期和时间。
• dayjs: 类似momentjs，但比之较简洁
• tinytime: 导出一个返回模板对象的函数

插件

• Swiper：移动端触摸滑动插件
• Videojs: 视频播放插件
• Mathjs: 处理number数据的js库
• Popmotion:A functional, flexible JavaScript motion library

正则相关

• Regexper：正则表达式的可视化开源工具，直接输入正则表达式就能用可视化显示出来
• Regulex: 同上，正则可视化工具
• Debuggex: 同上，正则可视化工具，选项功能丰富
• FeHelper: Chrome 插件，可以进行字符串编码那、正则那、代码美化压缩那、时间转换、图片转换、页面性能检测等等等等

开发者工具

• Chrome 开发者工具：内置在Google Chrome中Web开发和调试工具

爬虫利器

• Puppeteer：爬虫利器及UI自动化测试

监控

• Kibana:Kibana 是一个免费且开放的用户界面，能够让您对 Elasticsearch 数据进行可视化，并让您在 Elastic Stack 中进行导航。您可以进行各种操作，从跟踪查询负载，到理解请求如何流经您的整个应用，都能轻松完成。
• grafana: grafana是一个跨平台的开源的度量分析和可视化工具，可以通过将采集的数据查询然后可视化的展示，并及时通知。

其他

博众家之所长，说不定就能得到什么启示呢~

• Tencent AlloyTeam: 腾讯 AlloyTeam 团队做的一些相关内容。自己看，不解释
• EFE：百度 EFE（Excellent FrontEnd）技术体系，经过技术的发展，逐渐形成一套完善的前端技术体系。
• Qunar UED: 什么基础架构、静态资源（第三方库、前端构建工具等）等。在这里就不一个个叙述了，自己去看吧
• 优图OCR: 识别文字

---