前端常用npm库大全-vue,react,通用(持续更新)
未成年梦想 2024-09-08 14:03:10 阅读 95
构建工具
| 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 DOM和HTML标准）的纯 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 | |
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。