前端常用npm库大全-vue,react,通用(持续更新)

构建工具

Name/GitHub/NPM 描述 演示地址
Vite 下一代的前端工具链
Create React App 通过运行一个命令来设置现代 Web 应用程序。
Create React App中文文档 通过运行一个命令来设置现代 Web 应用程序。
Webpackjs 强大的静态模块打包工具,主要用于现代JavaScript应用的构建和打包
Rollup 将点滴代码编织成错综复杂的程序。
vite-plugin-mock-dev-server 在vite 开发环境中注入 mock-dev-server, 模拟请求和数据响应

小程序/Uniapp

Name/GitHub/NPM 描述 演示地址
微信小程序官方文档入口 小程序,小游戏,等文档
taro
Donut Donut 平台覆盖开发、部署、产品体验分析全产品开发周期的各种需求。开发者可以专注于代码逻辑,其他的都交给我们。
uni-helper 旨在增强 uni-app 系列产品的开发体验

基础Vue

Name/GitHub/NPM 描述 演示地址
Vue-Router Vue Router 是 Vue 官方的客户端路由解决方案。
Vue-Cli 🛠️ Vue.js 开发的标准工具
Vue2 渐进式 JavaScript 框架
Vue3 渐进式 JavaScript 框架
Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。
Pinia 符合直觉的 Vue.js 状态管理库
Umijs 用 Umi 构建你的下一个Vue应用
Nuxt NuxtJS 让你构建你的下一个 Vue.js 应用程序变得更有信心。这是一个 开源 的框架,让 web 开发变得简单而强大。

基础React

Name/GitHub 描述 演示地址
preactjs React 的轻量级替代方案,体积仅有 3kB,并且拥有与 React 相同的 API
React 文档 The library for web and native user interfaces
craco Create React App 配置覆盖,这是一个用于 Create React App 的简单易懂的配置层。
react-redux Redux 的官方 React 绑定
redux-toolkit The official, opinionated, batteries-included toolset for efficient Redux development
redux中文文档
React-router
Nextjs The React Framework for the Web
Umijs 用 Umi 构建你的下一个 React 应用
飞冰 (ICE) 基于 React 的应用研发框架,开箱即用,同时支持移动端和桌面端

NPM库

VUE专用库

Name/GitHub 描述 演示地址
vueuse Vue 组合实用程序集合
vuefire VueFire Official Firebase bindings for Vue.js Idiomatic composables for realtime data and other Firebase services
vue-grid-layout
Vant UI组件库-Mobile
Antd-vue UI组件库-PC
Datav-vue Vue 大屏数据展示组件库
Tdesign-Vue UI组件库-PC
varlet UI组件库-PC
vue-awesome-swiper 🏆 Swiper component for @vuejs
vee-validate
vue-transitions Reusable interface transitions for Vue 2 and Vue 3 with no CSS needed ❤️
vue-office 支持多种文件(docx、excel、pdf)预览的vue组件库,支持vue2/3。也支持非Vue框架的预览。文档https://501351981.github.io/vue-office/examples/docs/
vue-plugin-hiprint vue-plugin-hiprint(基于hiprint 2.5.4) 当时只是为了方便我(并非hiprint原作者) 在vue项目中引入使用,所以以此命名。打印模板
vue-macros Vue Macros 体验超现代 Vue 探索更多的宏和语法糖到 Vue 中。
pinia-plugin-persistedstate pinia持久化

React专用库

Name/GitHub 描述 演示地址
AHooks 一套高质量可靠的 React Hooks 库
zustand 一个小型、快速、可扩展的熊骨状态管理解决方案,采用简化的通量原理。它有一个基于钩子的舒适应用程序接口,没有模板化,也没有主观臆断。
dvajs React and redux based, lightweight and elm-style framework.
Datav-React React 大屏数据展示组件库
Tdesign-React UI组件库
Antd-Mobile UI组件库-Mobile
uiw UI组件库-A Component Library for React 16+.
mui UI组件库-Move faster with intuitive React UI tools
fusion 企业级的中后台设计系统解决方案
MobX 简单、可扩展的状态管理
emoji-picker-react Emoji 选择器 React
Immer Immer(德语为:always)是一个小型包,可让您以更方便的方式使用不可变状态。

通用库

Name/GitHub 描述 演示地址
Echarts 图表
Bootcss 样式
Swiper 工具-轮播图
JQuery jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。
lodash Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
lottiefiles 为您的网站和应用程序提供轻量级、可扩展的动画
Mock 生成随机数据,拦截 Ajax 请求
Numeral-js 用于格式化和处理数字的 javascript 库。
clipboardjs 将文本复制到剪贴板的现代方法 没有 Flash。没有框架。压缩后只有 3kb
browserslist 共享浏览器兼容性配置,适用于 Autoprefixer、Babel、ESLint、PostCSS 和 Webpack 等流行 JavaScript 工具
Socket.IO 支持及时、双向与基于事件的交流。它可以在每个平台、每个浏览器和每个设备上工作,可靠性和速度同样稳定。
msw Mock Service Worker是一个 API 模拟库,允许您编写与客户端无关的模拟并在任何框架、工具和环境中重复使用它们。
jestjs Jest 是一款优雅、简洁的 JavaScript 测试框架。
animejs 是一个轻量级 JavaScript 动画库,具有简单但功能强大的 API。 它可与 CSS 属性、SVG、DOM 属性和 JavaScript 对象配合使用。
smooth-scrol 一个轻量级脚本,用于为滚动到锚点链接制作动画。 https://codepen.io/cferdinandi/pen/wQzrdM
isotope-layout 过滤和排序神奇的布局(排序的时候有一个动画效果)
nodemailer Nodemailer是 Node.js 应用程序的一个模块,可让您轻松发送电子邮件。
cheerio 用于解析和操作 HTML 和 XML 的快速、灵活且优雅的库。
relationship 中国亲戚关系计算器 - 家庭称谓/亲戚称呼/称呼计算/辈分计算/亲戚关系算法/親戚稱呼計算機_Chinese kinship system
mande Simple, light and extensible wrapper around fetch with smart defaults
vestjs Vest 是一个功能强大且易于使用的 JavaScript 验证框架,可让您编写和运行代码验证
pinyin pīnyīn, 汉字拼音转换工具。
aplayer 🍭 Wow, such a beautiful HTML5 music player
fastclick FastClick 是一个简单易用的库,用于消除click移动浏览器上物理点击和触发事件之间的 300 毫秒延迟
autofit.js 迄今为止最易用的自适应工具(描述是这样的)
howler howler.js是一个适用于现代网络的音频库。它默认使用Web Audio API,并可回退到HTML5 Audio。这使得使用 JavaScript 处理音频在所有平台上都变得简单而可靠。
opentype.js 使用 JavaScript 读取和写入 OpenType 字体。
print-js 一个小型的 JavaScript 库,帮助从网络打印。
Fuse.js 强大、轻量级的模糊搜索库,没有任何依赖关系。
Typr.js Typr.js - process fonts in Javascript https://photopea.github.io/Typr.js/
midnight.js Midnight.js 可让你即时切换固定标题 https://aerolab.github.io/midnight.js/
Zepto Zepto是一个适用于现代浏览器的极简 JavaScript 库,具有与jQuery高度 兼容的 API 。 如果您使用 jQuery,那么您已经知道如何使用 Zepto。
Nodemon Nodemon 是一个大约有 300 万个项目依赖的实用程序,它将监视源代码中的任何更改并自动重启服务器。非常适合开发。
alova 一行代码完成各种复杂场景的网络请求,别再花时间在请求这件小事上了,交给我们
magika 使用深度学习检测文件内容类型
JQuery插件库
帝国CMS源码 收费,做来参考吧
zindex z-index 管理器
terser 适用于 ES6+ 的 JavaScript 压缩器/压缩工具包。
tippy.js 适用于 Web 的完整工具提示、弹出窗口、下拉菜单和菜单解决方案
Yup Yup 是一个用于运行时值解析和验证的模式构建器。定义架构、转换值以匹配、断言现有值的形状,或两者兼而有之。是的,模式非常具有表现力,并且允许对复杂的、相互依赖的验证或值转换进行建模。
jsdom jsdom 是许多 Web 标准(尤其是 WHATWG DOMHTML标准)的纯 JavaScript 实现,用于 Node.js。总体而言,该项目的目标是模拟足够多的 Web 浏览器子集,以便用于测试和抓取真实的 Web 应用程序。
npm-check-updates npm-check-updates (ncu)将您的 package.json 依赖项升级到最新版本,忽略指定的版本。
highlightjs 高亮
prismjs 高亮
prettier配置生成 生成配置
es-toolkit 一个现代 JavaScript 实用程序库,速度提高 2-3 倍,体积缩小 97% --- --- 这是 lodash 的重大升级。
xe-utils javascript 函数库、工具类 文档地址https://vxetable.cn/xe-utils/#/
StreamSaver.js StreamSaver.js 采用了不同的方法。现在,您实际上可以直接在文件系统中创建可写流(我不是在谈论 Chrome 沙盒文件系统或任何其他 Web 存储),而不是将数据保存在客户端存储或内存中。这是通过模拟服务器如何使用某些响应标头 + 服务工作线程指示浏览器保存文件来实现的

组件开发

地址 描述
dumi dumi,中文发音嘟米 ,是一款为组件开发场景而生的静态站点框架,与 father 一起为开发者提供一站式的组件开发体验,father 负责组件源码构建,而 dumi 负责组件开发及组件文档生成
father father 是一款 NPM 包研发工具,能够帮助开发者更高效、高质量地研发 NPM 包、生成构建产物、再完成发布。它主要具备以下特性:
histoire
vitepress 由 Vite 和 Vue 驱动的静态站点生成器
Verdaccio Verdaccio 是一个 Node.js 创建的轻量的私有npm proxy registry
rollup-plugin-visualizer 一个强大且直观的工具,用于帮助开发者在使用 Rollup 打包时,生成详细的模块依赖图谱。通过可视化的方式,你可以清晰地理解代码的打包结构和优化潜在点,从而更高效地管理和优化你的 JavaScript 应用程序。

CSS样式

Name/GitHub 描述 演示地址
tailwindcss 一个实用优先的 CSS 框架,其中包含诸如、和之类的类,这些类可直接在您的标记中组合以构建任何设计。 flex pt-4 text-center rotate-90
daisyui The most popular component library for Tailwind CSS
enjoycss EnjoyCSS 是一个先进的 CSS3 生成器,可以让您摆脱常规编码。
neumorphism 盒子阴影样式
meshgradient 渐变
noiseandgradien 渐变
meshgradient 渐变毛玻璃
navnav 一些基础的样式
oulu 一个集合180种免费的线性渐变网站,可在任何网站使用(ps:网站还禁止调试...)
webgradients 线性渐变(比上面的更好)
coolors 调色板生成器!(也就是颜色)
dribbble 从世界各地数百万顶级设计师和机构的作品中获得灵感。
dribbble下的css_loader
uiverse 使用 CSS 或 Tailwind 制作的自定义元素。UI Verse 是一个开发资源整合类的网站,内部提供了 4500+ 种不同的 css 特效
加载动画css 加载动画
sliderrevolution 不仅仅是一个 WordPress 滑块
cssloaders 很多加载效果css动画
css-loaders 几个加载效果css动画
loading Ajax 加载器、动画图标、实时背景
css-box-shadow Beautiful CSS box-shadow examples
uiverse.io Open-Source loaders made with CSS or Tailwind(使用 CSS 或 Tailwind 制作的开源加载器)

字体和素材库

Name/GitHub 描述 演示地址
iconpark 字体图标-丰富多彩的资源库免费使用
iconfont 字体图标
illust 下載免費矢量圖和剪貼畫
transfonter 现代而简单的 css @font-face 生成器
fontawesome Font Awesome 是互联网的图标库和工具包,被数百万设计师、开发人员和内容创建者使用。
iconshock-渐变svg图 专为渐变爱好者制作的 免费交互式 SVG 图标包 !
lexica AI生成的图片大全
unsplash 也是一个图片网站
稿定 国产的...可能要收费
创客贴 国产的...可能要收费
Canva可画 使用Canva可画,轻松创建并分享专业设计。(可能要收费)
爱给网 爱给网_音效配乐_3D模型_视频素材_免费下载

文档和工具

地址 描述
MDN 文档
CanIuse 用于前端开发者查询各种Web技术在不同浏览器中的兼容性。其主要功能和用途包括:
npmTrends 用于比较NPM(Node Package Manager)包下载趋势和受欢迎度的工具
贝赛尔曲线 cubic-bezier js代码压缩混淆
jsnice 旨在美化和反混淆JavaScript代码。其主要功能和用途包括:
babel 用于将现代JavaScript代码转换为兼容性更好的旧版JavaScript代码。
less 给 CSS 加点料。
jquery之家 自由分享jQuery、html5和css3的插件库
less编译 less编译
stackoverflow 问答交流
思否 问答交流
文档速查 十分推荐
油猴文档 油猴必备
JSDOC JSDoc 3 是一个用于 JavaScript 的API文档生成器,类似于 Javadoc 或 phpDocumentor
W3C 前端最最最标准文档
ES6入门-阮一峰 ES6入门-阮一峰
javascript-guidebook 📚JavaScript 知识图谱:ECMAScript、DOM、BOM、HTML5、计算机网络
React中文文档 React中文文档
w3schools 也是比较好的文档
bundlephobia 包大小查看

在线部署/在线运行/第三方服务提供

地址 描述
netlify
vercel
codepen
codesandbox
stackblitz
4everland
upstash
planetscale The ultimate MySQL database platform
algolia
cyclic
render
jsfiddle
jsbin 强大的在线编辑
国内-runjs 在线运行
runjs 探索和试验 JavaScript 和 TypeScript,将您的想法形象化并在打字时获得即时反馈。

跨平台的桌面应用程序

地址 描述
tauri
electron-vite
相关推荐
腾讯TNTWeb前端团队38 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试