前端常用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

相关推荐
C语言魔术师14 分钟前
【小游戏篇】三子棋游戏
前端·算法·游戏
匹马夕阳1 小时前
Vue 3中导航守卫(Navigation Guard)结合Axios实现token认证机制
前端·javascript·vue.js
你熬夜了吗?1 小时前
日历热力图,月度数据可视化图表(日活跃图、格子图)vue组件
前端·vue.js·信息可视化
桂月二二8 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
沈梦研9 小时前
【Vscode】Vscode不能执行vue脚本的原因及解决方法
ide·vue.js·vscode
hunter2062069 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb9 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角9 小时前
CSS 颜色
前端·css
轻口味9 小时前
Vue.js 组件之间的通信模式
vue.js
九酒9 小时前
从UI稿到代码优化,看Trae AI 编辑器如何帮助开发者提效
前端·trae