前端库

框架

Vue 生态

• vue (opens new window) - 中文 vue2 (opens new window) / vue3 官方中文文档 (opens new window)
• nuxt.js (opens new window) 英文 (opens new window) / 中文 1 (opens new window) / 中文 2 (opens new window) / 中文 3 (opens new window) / nuxt 模块 (opens new window)
• nuxt3 (opens new window) 英文 (opens new window) / 中文文档 (opens new window)
• quasar (opens new window) - 基于 vue，一套代码多处适用 中文文档 (opens new window)
• vue-router (opens new window) - vue-router 官方中文文档 (opens new window)
• pinia (opens new window)
• vuex (opens new window)
• vueuse (opens new window) 文档 (opens new window)
• vant (opens new window) - 轻量、可靠的移动端 Vue 组件库 文档 (opens new window)
• element-ui (opens new window) - Vue 的桌面端组件库 文档 (opens new window)
• element-plus (opens new window) - 🎉 Element 团队制作的 Vue.js 3 UI 库 文档 (opens new window) / gitee 文档 (opens new window)
• primevue-v2 (opens new window)
• vue-i18n 文档 (opens new window)

Vue 相关库

• vue-multiselect (opens new window) select 组件 目前 vue 里面用过最好用的
• Vue.Draggable (opens new window) DnD 拖拽组件 基于 Sortable.js 的 vue 版本
• vue-sauce (opens new window)  一个可以展示 vue 源码的指令
• vue-smooth-dnd (opens new window) Vue wrappers components for smooth-dnd
• vuegg (opens new window)  一个 vue 可视化拖拽界面生成器
• vee-validate (opens new window)  基于 vue 的验证，能验证的内容比较全
• vue-virtual-scroller (opens new window)  基于 vue 的虚拟列表无限滚动
• vue-content-placeholders (opens new window)  页面龙骨 skeleton
• vxe-table (opens new window)vue 表格解决方案，还没具体用过看着的确解决了其它 table 组件的一些问题
• Vue 测试指南 (opens new window) vue 测试指南
• v-charts (opens new window) - 基于 Vue2.0 和 ECharts 封装的图表组件 📈📊

React 生态

• react (opens new window) React 官方中文文档 (opens new window)
• next.js (opens new window)

脚手架

• vue-cli (opens new window) - vue 命令行工具。 中文文档 (opens new window)
• create-react-app (opens new window) - react 官方脚手架。
• create-nuxt-app (opens new window) - Create Nuxt.js App in seconds.
• create-vant-cli-app (opens new window) - Create Vant CLI App
• yeoman-generator (opens new window)  脚手架工具

多端

• taro (opens new window)
• electron 官方中文文档 (opens new window)
• tauri 中文官方文档 (opens new window) 构建跨平台的快速、安全、前端隔离应用

低代码

• h5-Dooring (opens new window)
• visual-drag-demo (opens new window)
• baidu/amis | Github (opens new window)
• amis 可视化编辑器 | Github (opens new window)
• 扫盲低代码-vue3 实现低代码平台 (opens new window)
• 基于 vue3 + vite + ts H5 卖场工具平台 (opens new window)
• GoView (opens new window) 一个 Vue3 搭建的低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可完成业务需求。 它的技术栈为：Vue3 + TypeScript4 + Vite2 + NaiveUI + ECharts5 + Axios + Pinia2 + PlopJS
• rtvue-lowcod (opens new window) 一款基于 uniapp 框架和 uview 组件库的低代码开发平台
• LogicFlow (opens new window) - 专注于业务自定义的流程图编辑框架，支持实现脑图、ER 图、UML、工作流等各种图编辑场景

打包工具

• pnpm 官方中文文档 (opens new window)
• vite (opens new window) - 下一代前端工具。它很快！官方中文文档 (opens new window)
• vitest 官方中文文档 (opens new window)
• webpack (opens new window) - 打包项目
• rollup (opens new window) - 打包 SDK [文档]((https://rollupjs.org/) / rollup 官方中文文档 (opens new window)
• systemjs (opens new window) - 动态 ES 模块加载器
• microbundle (opens new window) - 基于 rollup，简化配置。
• bili (opens new window) - 基于 rollup，同上。
• father (opens new window) - 组件打包工具，提供 babel 和 rollup 两种打包方式。

webpack 辅助工具、Loader 和插件

• webpack-autoconf (opens new window) - webpack 配置工具 https://createapp.dev/
• webpack-dev-server (opens new window) - webpack 开发服务器。
• webpack-dev-middleware (opens new window) - webpack 中间件。
• webpack-merge (opens new window) - 合并 webpack 配置。
• webpack-chain (opens new window) - 通过 chain 风格 api 的方式修改 webpack 配置。
• webpack-bundle-analyzer (opens new window) - 构建产物占比分析。
• speed-measure-webpack-plugin (opens new window) - 统计 webpack 各阶段耗时。
• webpack-spritesmith (opens new window) - Webpack 插件，可将一组图像转换为 spritesheet 和 SASS/LESS/Stylus mixins
• webpack-to-vite (opens new window) - 将 Webpack 项目转为 Vite 项目

工具库

• whistle (opens new window) - HTTP, HTTP2, HTTPS, Websocket debugging proxy 官方文档 (opens new window)
• zan-proxy (opens new window)  本地调试线上环境的工具
• live-server (opens new window)  可以快速启一个本地 dev 服务 并且支持自动刷新的 http server
• serve (opens new window)  快速起本地静态服务
• mock
  • json-server (opens new window) - 最佳 RESTful API Mock
  • mockjs (opens new window) - 模拟数据生成器
  • mockapi (opens new window) 一个还不错的在线 mock RESTful 服务（可在线可视化编辑），官方文档 (opens new window)
• axios (opens new window)  目前最常见的请求库 axios 官方中文文档 (opens new window)
• quicklink (opens new window) - 让浏览器在空闲时间预加载（prefetch）可见界面上的链接来实现让网站体验更好
• fuse.js (opens new window) - 轻量级模糊搜索
• SortableJS (opens new window) - 功能强大的 JavaScript 拖拽库
• opener (opens new window) - 打开某个端口，固定文件
• object.omit (opens new window) - 返回忽略 key 的对象副本
• object-hash (opens new window) - 从 Node 和浏览器中的 javascript 对象生成 hash。
• download (opens new window) - 使用客户端 javascript 下载文件
• FileSaver.js (opens new window) - HTML5 saveAs（）FileSaver 实现
• sheetjs (opens new window) - JS SheetJS 社区版 Excel 数据工具包
• darken (opens new window) - 页面黑夜模式切换
• highlight.js (opens new window) - Javascript 语法高亮
• tagcanvas.js (opens new window) - HTML5 基于 canvas 的标签云
• countUp.js (opens new window) - 通过对数值进行动画处理
• pinyin (opens new window) - 🇨🇳 汉字拼音 ➜ hàn zì pīn yīn
• screenfull.js (opens new window) - JavaScript 全屏 API 的跨浏览器使用的简单包装
• compressorjs (opens new window) - JavaScript 图像压缩器
• imagemin (opens new window) - 图片压缩库
• nprogress (opens new window) - 异步请求进度条
• async-validator (opens new window) - 异步表单验证
• popperjs (opens new window) - 定位工具提示和弹出窗口
• mammoth.js (opens new window) - docx 文件转 html
• texme (opens new window) - 一个 JS 库，可以将 Markdown 自动渲染成网页内容
• any-rule (opens new window)  正则大全
• crypto-js (opens new window) - JavaScript 加密标准库。
• node-rsa (opens new window) - Node.js RSA 库。
• jsonpath (opens new window) https://www.jsonpath.cn
• echarts 官方中文文档 (opens new window)
• Tailwind CSS 官方文档 (opens new window)
• mitt 事件流库
• tippy.js 文档 (opens new window) - 免费开源且高度可定制的气泡提示独立组件
• StatiCrypt (opens new window) 这个工具可以对网页加密，生成一个新网页。打开新网页需要输入一个密码，才能看到内容。
• fingerprintjs (opens new window) 浏览器设备指纹
• nanoid (opens new window) - 小巧、安全、URL 友好、唯一的字符串 ID 生成器。

工程化

• TypeScript (opens new window) - TypeScript 是 JavaScript 的超集，可以编译为干净的 JavaScript 输出。 typescript 官方中文文档 (opens new window)
• babel (opens new window) Babel 中文文档 (opens new window)
• eslint (opens new window) - 静态代码检查 https://eslint.org/docs/rules/ ESLint 官方中文文档 (opens new window)
• standard (opens new window) 代码规范工具 https://standardjs.com/readme-zhcn.html
• nvm (opens new window)  安装/切换不同 node 版本
• nrm (opens new window)  切换不同的 npm 源
• np (opens new window) npm publish 辅助，自动 push、打 tag、升版本等
• postcss (opens new window) - 使用 JS 插件转换样式
• cross-env (opens new window) - 跨平台的环境变量声明
• prettier (opens new window) - 漂亮的代码格式化 https://prettier.io
• eslint-config-airbnb (opens new window) airbnb 约束风格
• lint-staged (opens new window) - 在 git 暂存文件上运行 linters
• jest (opens new window) - JavaScript 测试
• husky (opens new window) - 容易的使用 Git hooks
• codecov (opens new window) - 测试覆盖率
• npm-check (opens new window) - 检测依赖升级情况，我会和  yarn upgrade-interactive  配合着用，主要用来检测冗余依赖。
• vuepress (opens new window) - vue 官方出品的文档工具
• readme-md-generator (opens new window)  一个命令行脚本帮你快速的创建一个 README
• gh-pages (opens new window) - 将文件发布到 GitHub 上的 gh-pages 分支
• code-inspector (opens new window) - 一个 JS 打包器的插件，点击网页 DOM，就会自动打开 IDE，并定位到相应的源码位置，目前支持 webpack/vite/rspack 打包器
• codess (opens new window) - 快速生成和在线管理 VS Code 代码片段
• Accessibility (opens new window) - 一个 JS 库，用来增强网页的可用性。只要插入这个库，网页就会出现一个工具栏，让用户自己选择增大字体、加深对比色、增大间隔、朗读文本等等

Node

nodejs 中文文档 (opens new window) https://github.com/sindresorhus/awesome-nodejs

工具库

• cheerio (opens new window) 用类 jQuery 语法处理 HTML
• pm2 (opens new window) - node 进程管理工具
• npm-run-all (opens new window) 一个 CLI 工具可以并行或者串行执行 script 指令
• markdown-table (opens new window) - node.js 生成 markdown table 表
• onchange (opens new window) - 监听文件变动然后做一些事
• open (opens new window) node 打开浏览器
• jsonpath (opens new window) - 使用 JSONPath 表达式查询和操作 JavaScript 对象。适用于 Node.js 的强大 JSONPath 引擎。
• tsd

命令行

• npx 使用 npx 来让我们可以方便的调用项目的依赖模块 npx eslint --fix <file-pattern>
• minimist - 命令行参数解析处理, 还有另一个 optimist
  • const args = require('minimist')(process.argv.slice(2))
• nodemon (opens new window) - 监视 node.js 应用程序中的修改，实时更新
• Inquirer.js (opens new window) A collection of common interactive command line user interfaces. 命令行询问库
• prompts - 交互式命令工具，inquirer 的轻量级版本
• commander.js (opens new window) node.js 命令行界面变得简单
• kill-port-process (opens new window) - 命令行杀死被占用的端口服务
  • kill-port 3000
• fkill (opens new window) - 惊人地杀死进程。跨平台。
• execa (opens new window)一个更强大的子进程管理工具，它提供了更多的选项和功能，例如并发执行、流控制、更好的错误处理等。它是一个跨平台的替代方案，可以替代 Node.js 的 child_process 模块。
• tree-cli (opens new window) - 生成 tree 目录结构
  • tree -l 2 -o output.txt --ignore 'node_modules'
• tree-node-cli (opens new window) - node 根据目录结构生成 tree
• consola (opens new window) 优雅的命令行 console logger
• ora (opens new window) Elegant terminal spinner 命令行 loading
• progress (opens new window) - 用于在命令行中显示进度条，方便展示任务的进度。
• chalk (opens new window) - 用于给命令行输出添加颜色，可以让输出更具有可读性和吸引力。
• cli-table (opens new window) - 用于在命令行中创建漂亮的表格，方便展示数据。
• boxen (opens new window)用于在命令行中创建带边框的框，可以突出显示某些信息。
• figlet (opens new window) - 用于在命令行中生成艺术字体，可以让输出更具有视觉效果。
• node-notifier (opens new window) 在 NodeJS 环境中，可以很方便的唤起 notifier 通知
• zhlint (opens new window) - 用于检查中文排版是否规范的 lint 工具
  • zhlint <file-pattern> --fix
• dclone (opens new window) 用来下载某个特定的 github 仓库的文件夹，而不是下载整个项目，可以缩短下载时间
  • dclone https://github.com/ykfe/egg-react-ssr/tree/dev/example/ssr-with-loadable
• http-server (opens new window) - 一个简单的命令行 http 服务器
  • http-server . -p 8080 # 监听8080端口，以当前目录作为静态资源目录
• cloc - 使用 cloc 快速统计某文件夹下代码的数据
  • cloc --exclude-dir=node_modules . --exclude-ext=json,html # 统计文件类型，排除node_modules,排除json，html文件

文件处理

• shelljs (opens new window) - Node.js 的便携式 UNIX shell 命令
• fs-extra (opens new window) fs-extra 模块是系统 fs 模块的扩展，提供了更多便利的 API，并继承了 fs 模块的 API
• rimraf (opens new window) - 删除文件 rimraf node_modules
• glob (opens new window) - 文件查找
• tiny-glob (opens new window) - 文件查找 node-glob 的超小型替代品，速度约 350%
• cpx (opens new window)  复制，支持 glob，并且可以 watch

调试

• dumper.js (opens new window) - 能让你的 node console 更加的规整，方便调试
• debug (opens new window) - 打印调试信息
• ndb (opens new window) node 调试
• node-in-debugging (opens new window) node.js 调试指南
• Node.js 最佳实践 (opens new window)