太常用的一些库,比如 lodash
、axios
、echarts
、normalize.css
等就不再下面推荐了。这里主要推荐一下自己平时常用,提高效率的,但大家可能又不知道的一些库。
前端常用
- tippy.js 最著名的 tooltip/popover library
- fingerprintjs 是一个快速的浏览器指纹库,通浏览环境的一系列配置生成 id
- dayjs 一个轻量级类 moment.js API 时间库
- primjs 让页面支持代码高亮
- lerna 大项目版本控制工具,项目中可以有多个 package.json 文件
- ReLaXed 一个将 document html 转成 PDF 的工具
- uppy 一个很好看的也很好用的 前端上传库
- Filepond 一个小巧的文件上传库
- tui-calendar 功能全面的日程安排日历控件,还支持拖拽
- tui.editor markdown 所见即所得编辑器
- tabler – 基于 Bootstrap 4 的 Dashboard UI Kit 和美观 高颜值 ui 模板
- pulltorefresh.js – 下个下拉刷新插件
- lulu – 腾讯阅文基于 jQuery,针对 PC 网站 IE8+(peak 主题)的前端 UI 框架
- chancejs – 生成随机数据的库
- spritejs – 360 奇舞团出的跨平台绘图对象模型
- workbox – 让你的网站更方便的变成 pwa
- tui.image-editor – 一个功能齐全的在线图片编辑,基于 canvas
- nanoid – 前端轻量 unique string ID 生成库
- rxdb – 一款开源的快速、灵活的客户端数据库,支持各种浏览器以及 NodeJS,Electron、React 等等,是 PouthDB 之上的一个封装库
- percollate – 命令行工具 能将网页转换成 pdf
- rawact – 一个 babel 插件,把 react 组件转为原生 dom
- irondb – 是一个浏览器 key-value 储存的封装库,把 Cookies、IndexedDB、LocalStorage、SessionStorage 统一成一个接口。它的最大特色就是数据冗余机制,即使某种底层储存机制失效,它可以从其他机制恢复数据。
- big.js 解决 js 浮点数问题。 主要就是 Big Number 或者小数点温柔
- bignumber.js – 同上
- stickybits – CSS 的 position: sticky 是一个很有用的设置,但是老的浏览器不支持。这个 JS 库是该功能的垫片库。
- react-jsonschema-form – Mozilla service 开源了一个通过 JSON 直接生成表单的 React 组件
- cleave.js – 用于在输入时格式化输入内容(信用卡格式、日期等)
- shiny – 在手机设备上模拟光的反射效果。 支持 DeviceMotion 事件
- cloudquery – Turn any website to serverless API
- A-Programmers-Guide-to-English – 专为程序员编写的英语学习指南。
- rrweb – 一个可以记录你页面中所有操作的库
- nodeppt – markdown 写 ppt
- flexsearch – 能让你更加高效和快速的检索文本内容
- public-apis – 汇集了市面上一些对外免费开放的 api,做一些自己练手 app 的时候很好用。
- scroll-hint 用于提示用户页面可以左右滑动的一个提示库
- fuse.js 轻量级前端模糊查询库 非常的好用
- FileSaver.js 文件下载插件 很多时候下载会有兼容性问题,它能帮你解决这些问题
- instant.page 一个判断用户行为 预测提前加载页面的库
- screenfull.js 浏览器全屏插件 解决了不少兼容性问题
- VuePress 本网站就是基于它实现的,简单方便的静态网站生成器
- selection 可视化选择页面元素的库
- scroll-out 滚动效果(滚动视差)的框架,框架大小不到 1KB,使用回调的方式将相关动画元素的属性进行实时分配
- gpu.js 通过将 js 转为特定的 language,利用 GPU 来执行,大大提高了执行性能和速度
- pressure 前端实现 3D Touch
- hammer 移动端手势库
- AlloyFinger 腾讯出的手势库
- lowdb LowDB 是一个本地 JSON 数据库,基于 Lodash 开发的
- JSON-server 可以配合 LowDB 使用 快速搭建一个 REST API
常用的前端UI组价库
- antd vue 蚂蚁金服出品的超级强大的中台前端/设计解决方案
- iview一套基于 Vue.js 的高质量UI 组件库
- ElementUI 由饿了么UED设计、饿了么大前端开发的一套基于 Vue 2.0 的 pc端UI框架
- Mint UI 由饿了么团队开发的基于vue 移动端的ui框架
- Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架
- vuesax灵动的组件库
- Vuetify一个高品质综合实用性、体验、格调的框架
- Muse-UI基于 Vue 2.0 优雅的 Material Design UI 组件库
布局组件库
- vue-waterfall瀑布流布局组件
- vue-fullpage整屏滚动
效果
- Vue-Touch-Ripple比较平衡自然的点击体验效果,很可能会发展为点击体验效果的未来趋势
- vue-word-cloud很有气场的文字墙效果,重排效果很赞
- vue-flat-surface-shader岩壁效果
- status-indicator泛光的圆点
- Textra优雅的提词器
拖动排布
- Vue.Draggable DnD 拖拽组件 基于 Sortable.js 的 vue 版本
- vue-slicksort丝滑效果的卡片拖动demo
- vue-js-grid活泼动效的拖动排序demo
- vue-grid-layout粘性拖动排布demo
- dnd-grid灵活拖动排布
图表
- vue-echartsECharts高质量vue组件
- VueMindmap脑图展示
轮播
- Vue-Awesome-Swiperswiper的vue组件封装demo
消息框
- vue-notifications轻型无阻塞通知框demo
- vue-notifyjs极简无阻塞通知框
- vue-notifyjs重型富能力消息框
Loading
- epic-spinners纯加载展示svg素材若干,封装为组件demo
富文本编辑
-
vue-quill-editor quill的vue组件封装demo
- vue-tinymce-editor tinymce的vue封装组件demo
-
vue-codemirror代码编辑器demo
表格和菜单
- vue-easytable国产多功能表格中的精品
-
vue-quick-menu优雅的主菜单按钮,在手机和电脑上都会有美好的体验
日历/日期和时间
- ue-calendar清爽的日历组件,通用型日历组件,可标识节日,有丰富的配置项
- vue-event-calendar日历看板demo
- vue-simple-calendar重型日历,有丰富功能的通用日历
- V-Calendar清爽漂亮日期选择,最棒的日期选择+日历组件demo
输入
- vue-input-tag简单的标签输入组件
- vue-color多样式功能颜色选择器
地图
- vue-amap | 基于 Vue 2.x 与高德的地图组件
- Vue Baidu Map百度地图Vue组件封装
Css && 动画
- animate.css 最有名的动画效果库
- magic.css css 动画效果库 类似 animate.css
- popmotion 一个函数式声明前端动画库
- NES.css 任天堂主题风格 css 库
- particles.js 前端实现颗粒粒子的动画效果库,比较炫酷,但相对的也比较吃性能
- PaperCSS 手绘风格感觉 css 库
- rough 基于 Canvas 的手绘风格图形库
- wired-elements 基于 rough.js 分装 button input radio 等组件。它的底层是 Web components
- matter-js web 物理引擎
- micron 通过在元素上绑定属性从而实现动画效果的库
- direction-reveal 根据鼠标进入位置,展现从不同方向 展现 hover 效果
- laxxx 滚动特效库 轻量级 压缩完 2kb
Vue
- vue-multiselect select 组件 目前 vue 里面用过最好用的
- vue-sauce 一个可以展示 vue 源码的指令
- vue-smooth-dnd Vue wrappers components for smooth-dnd
- vuegg 一个 vue 可视化拖拽界面生成器
- vee-validate 基于 vue 的验证,能验证的内容比较全
- vuesax 一个很漂亮的基于 vue 的 ui 框架
- vue-analytics 基于 vue 的 谷歌统计封装
- vue-virtual-scroller 基于 vue 的虚拟列表无限滚动
- vue-content-placeholders 页面龙骨 skeleton
实践库
- Jasonette 一个用 json 来构建 hybrid App 的框架
- crate 一个 react 全栈练习(pc,mobile,rn,api) demo,适合入门拿来练手
- react-in-patterns 一本开源教你如何写 react 的书
- hocs react 相关 hoc 收集库
工具库
- live-server 可以快速启一个本地 dev 服务 并且支持自动刷新的 http server
- serve – 快速起本地静态服务
- picojs js 人脸识别库
- es-checker 检查当前环境对 ES6 支持的情况。支持浏览器和 node.js
- merge-images 图片合成,利用
canvas
能将几张图片合成一张 - fabric.js 基于 canvas 创建交互式的图片编辑界面非常适合用来做图片合成类工作。
- phaser 这是一个为桌面和移动浏览器开发 HTML5 游戏的快速开源框架。 你可以为 iOS、 Android 和不同的本地应用程序创建游戏。
- recast 前端 ast 库
- purifycss 移除没使用到的 css
- dropcss 同上
- fast-cli 命令行测试下载上传速度
- @pika/web 让你不需要在本地 webpack 中 import,直接在游览器里面运行 npm 包
- pinyin 汉字拼音转换工具
Node
- consola 优雅的命令行 console
vuepress
也使用了它 - cheerio – 用类 jQuery 语法处理 HTML
- chokidar – node 监听文件变化的库
- fs-extra – fs-extra 模块是系统 fs 模块的扩展,提供了更多便利的 API,并继承了 fs 模块的 API
- rimraf – 删除文件
- globby – 用于模式匹配目录文件
- glob – 文件查找
- tiny-glob – 文件查找
- node-semver – node 版本验证库
- npm-run-all – 一个 CLI 工具可以并行或者串行执行 script
- live-server – 一个简单的 http server 带有 reload 功能
- node-portfinder – 一个端口嗅探工具
- update-notifier – Update notifications for your CLI app
- y18n – yargs 基于 i18n 的一个包
- signale – Hackable console logger 一个 Node 的日志格式库,自带 16 个级别,可以定制颜色和 Emoji
- execa – A better
child_process
- listr – Terminal task
- commander.js – 自动的解析命令和参数,合并多选项,处理短参,等等,功能强大,上手简单
- Inquirer.js – A collection of common interactive command line user interfaces. 命令行询问库
- enquirer – 命令行 prompt 询问库,写 cli 的时候很有用
- Qoa 同上
- ora – Elegant terminal spinner 命令行 loading
- chalk – 命令行着色美化库
- hygen – 快速方便的创建代码 可以命令行创建预设的 template
- ndb – node 调试
- got – http 请求库 如果你觉得 request 太多的话 这是一个不错的选择
- dumper.js – 能让你的 node console 更加的规整,方便调试
- node-in-debugging – node.js 调试指南
- node-best-practices – node 最佳实践
- fastscan – node 敏感词库
- fx – 命令行优化 JSON 输出
- dataloader解- 决 Graphql 中的 N+1 查询问题
- progress-estimator – 命令行 progress bar 进度条模拟库
- Node.js 最佳实践
- grpc-web – 前端直连 gRPC 服务
- node-fetch – node 环境下轻量级 fetch 请求库
- ink 是一个 React 的命令行渲染器,命令行界面可以像写页面那么写了
- strapi 开源的解决方案来创建、部署和管理自己的 API
- listr Terminal task list
有趣
- the-bread-code – 使用程序员的思维制作面包 ,比如制作中使用 A/B test, 来比较那种做法更好。
- build-your-own-x – 教你用各种语言实现 Bot Database Neural Network
- javascript-algorithms – 教你用前端知识认识各种算法
- not-paid – 如果你给人做网站,交过去以后对方没有付款,那么这个 JS 会把网站的透明度一天调低一点,直到看不见
- nsfwjs – 前端图片鉴黄,基于 Tensorflow
- elevator.js 我很喜欢的一个库,让一个 back-to-top 的效果有了一种坐复古电梯的感觉
- app-ideas 很多年轻人苦于缺少练手的项目,这个项目收集了不少点子,每个点子都有明确的目标和复杂资源。
工具
- high-speed-downloader – 百度网盘不限速下载 支持 Windows 和 Mac
- hyper – 前端命令行
- yapi – 是一个可本地部署的、打通前后端及 QA 的、可视化的接口管理平台
- sway – 一个微软自己出的在线 ppt 很强大
- bigjpg – 放大图片的神器 通过神经网络可以放大图片并能降噪
- Ascii Art Generator – 在线生成 Ascii 图案
- Winds – 开源 RSS
- JSUI – 一个用来控制管理前端项目的客户端
- docz – 让你能快速写文档的一个库
- hiper – 性能统计分析工具
- verdaccio – 私有 npm
- git-guide – git 入门指南
- git-tips – git 进阶
- bit – 实现了项目之间的代码共享 可以自建私有
- simpread – 简悦 ( SimpRead ) 让你瞬间进入沉浸式阅读的扩展
- mkcert – 一键命令 让本地也支持 https
- termtosvg – 录制 命令操作转成 svg 基于 python
- gh-polls – 可以在 github issue 中添加投票
- eruda – 移动端调试工具
- vConsole – 也是一个移动端调试工具 腾讯出品
- terminalizer – 命令行录制工具 基于 node
- badgen – 快速构建和 shields 一样的 svg badge 但速度更快
- readability – 移除页面非正文部分 基于 jsdom
- WeChatPlugin-MacOS – 一款功能强大的 macOS 版微信小助手
- puppeteer-recorder – 一个 chrome 插件 能够根据你的操作 自动生成 puppeteer 相关代码
- mdx-deck – 用 markdown 编写演示文稿
- code-surfer – 基于 mdx-deck 的一个插件 让你更好的在文稿中展示 code
- Progressive Tooling – 前端性能优化工具集合
- https://github.com/artf/grapesjs – 可视化建站工具 不需要写代码就能写一个页面,前端再次再次要下岗了
- image-charts – 该服务通过 URL 接受参数,然后生成图表,以图片形式返回
- eagle.js – 一个用 vue 来制作 PPT 的库
- Optimizely – A/B Test
- appadhoc – 一个国内的 A/B Test 服务
- glorious-demo – 通过编写代码的方式构建一个命令行的演示例子
- nginxconfig – 可视化配置 nginx 提供了多个基础模板
- bundlephobia – 一个可以查看某个库的大小,并且分析它的依赖
- jsperf – 一个提供在线 test case 的网站,主要用来比较性能。可以比较如: forEach vs for 的性能
- perflink 与 jsperf 类似的一个比较 js 性能的网站
- algorithm-visualizer – 算法代码可视化
- An-English-Guide-for-Programmers – 专为程序员编写的英语学习指南
- Webhint – 用于检查代码的可访问性、性能和安全的开源检查(Linting)工具
- airtap – 测试浏览器兼容性,可覆盖 800 多种浏览器
- jsonstore – 供免费,安全且基于 JSON 的云数据存储,自己玩的小项目神器
- git-history – 可视化查看一个文件的历史变化
- x-spreadsheet 一个基于 Canvas 的 JS 电子表格库
- imgcook 阿里出品,一键通过设计稿生成代码
- majestic jest 可视化
- leon 你开源项目的 ai 个人助手
- js-code-to-svg-flowchart 将代码逻辑用流程图的方式展现出来
Webpack
- webpackbar webpack 打包进度可视化
- jarvis webpack dashboard
- webpack-chain 通过 chain 风格 api 的方式修改 webpack 配置
- speed-measure-webpack-plugin 探测 webpack 各阶段的耗时
- obsolete-webpack-plugin 基于 browserslist 做浏览器升级提示
- mini-css-extract-plugin 提取 CSS 为单独文件
- copy-webpack-plugin 复制额外的文件到输出目录
- duplicate-package-checker-webpack-plugin 检查是否存在重复依赖
Mac
- get-plain-text – 能清除剪贴板里的格式 很实用
- IINA – mac 平台感觉免费最好的播放器 强推
- magnet – 分屏管理
- Xnip – 方便好用的截图工具-支持截长图
- Spectacle – 窗口管理工具
- vanilla – 顶栏图标管理工具
- Dozer – 一个开源的顶栏管理
- 腾讯电脑管家 – 反正我用下来好觉得蛮好用的
- mos – 鼠标平滑滚动软件,很好用。免费开源
- sequel pro – mysql 客户端 好用
- Microsoft Remote Desktop Beta – Mac 远程登录 Windows 调试神器
- pap.er – 专为 Mac 设计的壁纸应用
- The Unarchive – Mac 目前感觉最好用的免费解压软件
- Tickeys – 让你用 Mac 键盘也能打出机械键盘的感觉
- Beaker Browser – P2P 开源浏览器 支持点对点发布文件,成为了文件传输工具,支持 DAT 对等协议
- Gifski – 视频转 gif 工具
- more – 更多优秀的 mac app 介绍
- Motrix – 支持 HTTP、FTP、BT、磁力链、百度网盘的下载工具
VS Code
- Import Cost 查看你引入的依赖模块大小
- Auto Close Tag 自动补全 html 标签,如输入
<a>
将自动补全</a>
- Auto Rename Tag 自动重命名 html 标签,如修改
<a>为<b>
,将自动修改结尾标签</a>为</b>
- polacode 生产代码图片快照插件
- vscode-leetcode – 一个能让你在 vscode 中刷 LeetCode 的插件 算一个划水神器吧
- vscode-icons VS Code 必备吧,为文件添加炫图标
工程
- lerna – monorepo 管理。
- lerna-changelog – 为 lerna 项目自动生成 changelog。
- eslint – JS 风格约束。
- eslint-config-airbnb
- xo – 封装自 eslint。
- prettier – 更主观的风格自动修改。
- yeoman-generator – 脚手架工具。
- serve – 本地静态服务器。
- np – npm publish 辅助,自动 push、打 tag、升版本等。
- lint-staged – eslint 提速,只 lint 提交的代码。
- coveralls – 覆盖率。
- husky – 添加 git hooks。
- cross-env – 跨平台的环境变量声明。
- projj – 本地 git 项目管理,支持 github 和 gitlab。
- nvm – 管理 node 版本。
- concurrently -在 npm scripts 里并行执行命令。
- @zeit/ncc – 打包为 npm 包为一个文件。
- npm-check – 检测依赖升级情况,我会和
yarn upgrade-interactive
配合着用,主要用来检测冗余依赖。 - cpx – 复制,支持 glob,并且可以 watch。
- onchange – 监听文件变动然后做一些事。
其他
- vue-pull-to一个集成了下拉刷新、上拉加载、无限滚动加载的Vue组件,方便定制文字和样式examples
-
vue-qriously把字符转成二维码方式展示的组件
原创文章,作者:Ferrycoln,如若转载,请注明出处:https://ms200.cn/archives/907
评论列表(2条)
Very good information. Lucky me I ran across your website by chance (stumbleupon).
I’ve bookmarked it for later!
Greetings! Very helpful advice within this article!
It’s the little changes that will make the biggest changes.
Thanks for sharing!