1. 首页
  2. 前端

常用的基于vue的前端组件库和插件整理,资源精选

常用的基于vue的前端组件库和插件整理,资源精选

太常用的一些库,比如 lodashaxiosechartsnormalize.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 组件库

布局组件库

效果

拖动排布

图表

轮播

消息框

Loading

富文本编辑

表格和菜单

  • vue-easytable国产多功能表格中的精品
  • vue-quick-menu优雅的主菜单按钮,在手机和电脑上都会有美好的体验

日历/日期和时间

输入

地图

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

实践库

  • 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

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 – 监听文件变动然后做一些事。

其他

原创文章,作者:Ferrycoln,如若转载,请注明出处:https://ms200.cn/archives/907

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论列表(2条)

  • brunchnlunch 2019年11月21日 上午3:34

    Very good information. Lucky me I ran across your website by chance (stumbleupon).
    I’ve bookmarked it for later!

  • brunch n lunch 2019年11月19日 上午8:53

    Greetings! Very helpful advice within this article!

    It’s the little changes that will make the biggest changes.
    Thanks for sharing!

联系我们

在线咨询:点击这里给我发消息

邮件:499661635@qq.com.com

工作时间:周一至周五,9:30-18:30

QR code