前端开发必备文档

前言

本文尽可能为各大插件、工具、框架等官方文档导航，标注为中文文档参考则为民间有志青年翻译。

学习平台

w3school

这是一个免费的在线学习资源，提供HTML的完整教程，包括各种标签和属性的详细介绍，并附有实例演示。

网址：https://www.w3school.com.cn/

MDN Web Docs

这是Mozilla开发的免费学习资源，提供HTML的详细介绍和教程，并包含实例演示和用法示例。

网址：https://developer.mozilla.org/zh-CN/docs/Web/HTML

HTML Dog

这是一个HTML教程和参考网站，提供HTML的基础知识、标签、属性和实例，还包括HTML的最佳实践和CSS样式。

网址：https://www.htmldog.com/guides/html/

HTML.com

这是一个专门为HTML初学者准备的网站，提供HTML的入门教程和实例演示，以及更高级的技巧和用法。

网址：https://html.com/

菜鸟教程

菜鸟教程是一个免费的中文编程学习网站，它的内容丰富、易于理解，非常适合初学者学习使用。

网址：https://www.runoob.com/html/html-tutorial.html

CSS-Tricks

CSS-Tricks是一个由Coyier创办的CSS学习网站。它提供了大量的CSS教程、技巧和代码实例，适合初学者和进阶者使用。此外，它还有一个社区论坛和博客，让学习者可以和其他开发者交流。

网址：https://css-tricks.com/

Coding Fantasy

Coding Fantasy是一个通过游戏的方式，让你迅速学习到flex和grid布局方式，让你在玩游戏的过程学习到知识。

网址：https://codingfantasy.com/games

bilibili

在B站上，有很多优质的前端编程视频，其中包括Web开发入门、HTML、CSS、JavaScript等基础课程，也有Vue.js、React等流行前端框架的教程，以及一些实用的编程技巧和开发工具的介绍。这些视频由许多有经验的前端工程师制作，涵盖了从基础到高级的前端知识和实践内容。

网址：https://search.bilibili.com/all?keyword=前端开发

leetcode

LeetCode 平台提供了一个大量的算法练习题库，其中包括了多个类别的算法问题，例如数组、链表、树、字符串、动态规划等等。在这里，用户可以免费练习、在线编程比赛和竞赛、提交和评估自己的算法问题解决能力，同时也可以通过和其他用户的比较，激发自己更好的表现。

网址：https://leetcode.cn/

技术交流

GitHub

一个非常受欢迎的开源代码托管平台，让开发者可以共享、合作、探索各种开源项目，同时也是一个非常活跃的技术社区。

网址：https://github.com/

Stack Overflow

一个专门针对编程问题的问答社区，开发者可以在这里提问、回答问题，并与其他开发者交流和分享经验。

网址：https://stackoverflow.com/

掘金

稀土掘金是一个专注于程序员技术分享和交流的社区平台，致力于帮助开发者互相学习、交流和成长。它提供了丰富的技术博客和文章、开源项目、求职招聘信息等内容，同时也有大量的技术社区和问答平台。

网址：https://juejin.cn/

知乎

知乎是一个知识分享社区，也是一个非常受欢迎的技术博客平台。在知乎上，不仅可以阅读大量的技术文章和博客，还可以与其他技术爱好者交流和分享经验，获得专业的技术指导和解决方案。

网址：https://www.zhihu.com/

dev

dev社区和国内的掘金社区很相似，技术分类也比较多，像 Java、Python、js、分布式等应有尽有，文章质量普遍都还不错，其实如果平时多留意不难发现，掘金上有一些文章是翻译自 dev社区。

网址：https://dev.to/

书读百遍，其意自现

JS风格指南

这里包含了各种代码的规范风格，不会让你立刻变成一个优秀的工程师，长期奉行他们也并不意味着你能够高枕无忧不再犯错。

千里之行，始于足下。我们需要时常和同行们进行代码评审，不断优化自己的代码。

网址：https://github.com/airbnb/javascript

你不知道的JavaScript

这里讲述了很多你曾经并不在意但是又不可忽略的js小细节，它将带你把js的不同槽点、另类之处，一次性说个明白。

网址：https://github.com/getify/You-Dont-Know-JS

what the f*ck JavaScript

JavaScript 是一个不错的语言。它的语法简单，生态系统也很庞大，最重要的是，它拥有最伟大的社区力量。我们知道，JavaScript 是一个非常有趣的语言，但同时也充满了各种奇怪的行为。这些奇怪的行为有时会搞砸我们的日常工作，有时则会让我们忍俊不禁。

网址：https://github.com/denysdovhan/wtfjs

正确的学习JavaScript

这是一份为 JavaScript 新手准备的指南，同时也包含了可以给高手学习的最佳资料，虽然网站的名字是 the right way,但并不代表是学习 JavaScript 的唯一方法。这里只是将一些顶尖开发者的文章、提醒和技巧收集于此。由于它是由一些非常厉害的网民身上收集而来，故称之为 'the right way'或是最佳做法。

网址：https://github.com/braziljs/js-the-right-way

JavaScript数据结构和算法完全解析

这里包含了多种基于 JavaScript 语法的算法与数据结构。每种算法和数据结构都有自己的README.md，包含相关说明和链接，以便进一步阅读。

网址：https://github.com/trekhleb/javascript-algorithms

优秀开源项目大全

awesome-vite

awesome-vite 是一个收集了 Vite 生态圈相关资源的 GitHub 仓库，包括插件、模板、示例、文章等等。它的目的是为了帮助开发者更好地使用和探索 Vite。这个仓库由社区驱动，大家可以通过 Pull Request 来贡献自己发现的有价值的 Vite 资源，也可以通过 Issues 来反馈问题和建议。

网址：https://github.com/vitejs/awesome-vite

awesome-react

awesome-react是一个收集了 React 相关资源的精选列表，包括工具、组件、学习资源、示例等等。如果你是 React 开发者，这个列表可能对你很有用。该列表包含了一些非常流行和广泛使用的 React 组件和工具，也包含了一些相对较新但很有潜力的项目。

网址：https://github.com/enaqx/awesome-react

awesome-webpack-cn

awesome-webpack-cn 是一个中文版的 Webpack 相关资源列表，收录了很多 Webpack 相关的文章、教程、插件等，方便开发者学习和使用 Webpack。它包含了从入门到深入的 Webpack 相关内容，以及在 Webpack 使用过程中会用到的各种工具和插件。同时，Awesome-Webpack-CN 的内容也在不断更新和完善中。

网址：https://github.com/webpack-china/awesome-webpack-cn

awesome-github-vue

awesome-github-vue 是一个汇集了许多 Vue 相关的优秀开源项目、组件、工具、插件等资源的 GitHub 仓库。该仓库以清晰的分类和详细的介绍，方便开发者查找和使用 Vue 生态中的优秀资源。

网址：https://github.com/opendigg/awesome-github-vue

Javascript

正则

正则表达式是一种表示字符串模式的方法，常用于搜索、替换和匹配文本。它可以用来匹配特定模式的字符串，比如验证邮箱、手机号、身份证号码等。
RegexOne提供了一个互动的教程来学习正则表达式。
regulex是一个超级好用的正则表达式可视化工具。
regex101是一个在线的正则表达式测试平台。

网址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

ES6

ES6（ECMAScript 6）是 JavaScript 语言的一次重大更新，也称为 ECMAScript 2015。ES6 主要增加了许多新的语法特性，如箭头函数、解构赋值、let 和 const 关键字、模板字符串、类等，同时也增加了许多新的内置函数和方法，如 Promise、Set、Map、Array.from 等。

网址：https://tc39.es/ecma262/    https://es6.ruanyifeng.com/

typescript

TypeScript 中文网是 TypeScript 官方中文文档网站，提供全面的 TypeScript 中文学习资源，包括入门指南、手册、工具、文章、案例等。该网站由社区维护，更新及时、质量高，是学习 TypeScript 的好帮手。

网址：https://www.tslang.cn/docs/handbook/basic-types.html

TS练习题：https://github.com/type-challenges/type-challenges/blob/main/README.zh-CN.md

TS学习：https://00feng00.github.io/typescript-book-chinese/#how-to-contribute

vue学习

vue

Vue.js官方文档是学习 Vue.js 的最佳资源之一，提供了全面的 Vue.js 教程和 API 文档。

网址：https://cn.vuejs.org/

GitHub：https://github.com/vuejs/core

vue开发插件

一个 Vue.js 应用程序的浏览器调试工具，可以在 Chrome 和 Firefox 上使用。

网址：https://devtools.vuejs.org/

vueuse

VueUse是一个基于Vue 3的轻量级、模块化的函数库，提供了一些方便实用的Vue自定义Hooks。这里包含了许多常用的功能，例如状态管理、表单处理、时间处理、剪贴板操作、动画效果、浏览器API等，也支持Tree Shaking，可以根据需求选择所需要的模块，避免浪费不必要的资源和加载时间。

网址：https://vueuse.org/

nuxt

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架，用于创建服务端渲染 (SSR) 应用程序。它基于 Vue.js，封装了服务端渲染、异步数据加载、打包优化、静态资源预加载、路由系统等一系列的解决方案和最佳实践，使开发人员可以更快地构建高性能、可扩展的应用程序。

网址：https://www.nuxtjs.cn/

vuepress

VuePress是一个基于Vue.js的静态网站生成器，它能够生成具有文档阅读体验的静态网站。VuePress使用Vue.js的单文件组件和Webpack进行开发，支持Markdown写作格式，并提供了丰富的主题和插件可供选择。

网址：https://vuepress.vuejs.org/zh/

React学习

react

这是学习 React 最好的网站。它包含 React 完整的文档和教程,从基础到高级,涵盖了 React 的方方面面。建议从官网的 learn react 入手,系统学习 React。

网址：https://react.dev/

github：https://github.com/facebook/react

hooks文档:https://legacy.reactjs.org/docs/hooks-intro.html

router:https://reactrouter.com/en/6.14.1/start/overview

react开发插件

这是一个由 Facebook 官方开发的浏览器插件，可以方便地查看 React 组件的层次结构，以及 props 和 state 的值。

网址：https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

next.js

Next.js是一个基于 React 的服务器端渲染框架，支持自动代码分割、静态页面生成和基于数据的客户端路由等特性，可以帮助开发者快速构建高性能、可扩展的 Web 应用。

网址：https://nextjs.org/docs

中文文档：https://www.nextjs.cn/docs

Gatsby

Gatsby是一个基于 React 的静态网站生成器，支持使用 Markdown、React 组件、GraphQL 等构建静态网站，可以帮助开发者快速构建 SEO 友好、高性能的静态网站。

网址：https://www.gatsbyjs.com/

中文文档：https://www.gatsbyjs.cn/docs/

Ant Design Pro

Ant Design Pro是一个基于 Ant Design 的企业级后台管理系统模板，提供了丰富的组件和模板，可以帮助开发者快速构建高质量的企业级应用。

网址：https://pro.ant.design/zh-CN/docs/introduction/

小程序开发

微信小程序

在该文档中，你可以学习如何开发小程序，包括小程序的基础知识、开发工具的使用、小程序开发的各种组件和接口的使用方法等等。

网址：https://developers.weixin.qq.com/miniprogram/dev/framework/

taro

Taro是由京东·凹凸实验室开发的一款多端统一开发框架，支持编译成微信小程序、百度智能小程序、支付宝小程序、字节跳动小程序、QQ小程序、H5等多个平台的代码。

网址：https://taro-docs.jd.com/docs/

uni-app

uni-app是由DCloud公司开发的一款基于Vue.js开发的多端统一开发框架，支持编译成微信小程序、支付宝小程序、百度智能小程序、QQ小程序、快应用、H5等多个平台的代码。

网址：https://uniapp.dcloud.net.cn/

react Native

React Native是 Facebook 推出的一种跨平台移动应用开发框架，支持使用 JavaScript 和 React 以及其他web技术进行移动应用开发。可以在 Android 和 iOS 上构建本机应用，同时也支持在 web 上开发。

网址：https://reactnative.dev/

微前端

Qiankun

Qiankun是阿里巴巴前端体系基于微前端规范实现的一套解决方案。它提供主应用和微应用两种角色。主应用作为整个项目的入口,微应用负责独立业务场景。微应用可以选择React、Vue或者其他框架开发,并且可以部署在不同域名下。主应用动态加载微应用,微应用之间也可相互嵌套。提供沙箱机制,确保微应用之间的隔离性。提供主应用和微应用之间的通信方案。支持SSR渲染和TypeScript。

网址：https://qiankun.umijs.org/zh

工具

环境配置

node.js

这是Node.js的官方网站，提供了关于Node.js的文档、API参考和下载链接等信息。官网还提供了一个交互式的Node.js教程，帮助初学者了解Node.js的基本概念和语法。

网址：https://nodejs.cn/

npm

npm是Node.js官方的包管理器，用于帮助Node.js开发人员安装、发布、分享和管理Node.js模块（也称为包或库）。这里提供了npm的文档、包管理器、包搜索和社区等。学习者可以在这里找到各种npm相关的信息和资源，包括如何使用npm安装、发布和管理包等。

网址：https://www.npmjs.com/

中文文档：https://www.npmjs.cn/

git

Git 是一个开源的分布式版本控制系统，用于管理软件开发过程中的源代码。它最初由Linus Torvalds在2005年创建，目的是更好地管理Linux内核的开发。Git 可以轻松地管理大型项目，并使多人协作变得更加简单和高效。

网址：https://git-scm.com/book/zh/v2

常用库

axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它提供了一种简洁、优雅、灵活和易于使用的方式，使得发送 HTTP 请求变得容易。

moment.js

Moment.js 是一个流行的 JavaScript 库，用于处理、解析和显示日期和时间。它提供了丰富的日期和时间处理功能，包括格式化、解析、时区转换、相对时间计算等。

网址：https://momentjs.com/

lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

网址：https://www.lodashjs.com/

echarts

ECharts 是一个由百度前端开发团队开发的基于 JavaScript 的可视化图表库，支持各种常见图表类型，如折线图、柱状图、散点图、饼图、仪表盘等，可以灵活扩展和定制化，广泛应用于数据可视化和图表展示的场景。

网址：https://echarts.apache.org/zh/index.html

xlsx

sheetjs 提供了excel在前端使用纯js导出的解决方案，在线阅读excel和导出excel工具。

网址：https://sheetjs.com/

构建工具

webpack

webpack是一个非常强大的JavaScript模块打包工具，可以处理各种类型的文件，支持自定义配置和插件，同时也提供了一些优化功能，如代码压缩、缓存等。

网址：https://webpack.docschina.org/

vite

Vite是一个现代化的构建工具，可以快速构建现代Web应用程序。Vite可以快速启动项目，支持快速热更新、动态导入和静态分析等功能。与传统的打包工具不同，Vite采用原生ES模块作为开发时的模块系统，可以实现按需编译，避免了不必要的打包时间和编译过程。

网址：https://cn.vitejs.dev/

rollup

rollup是一个专门用于打包JavaScript库的构建工具，支持ES6模块和Tree Shaking等功能。

网址：https://rollupjs.org/

中文文档：https://www.rollupjs.com/

项目配置

eslint

ESLint 是一个 JavaScript 代码检查工具，用于检测代码中潜在的问题和错误，以保证代码质量和一致性。它可以识别并纠正常见的代码风格问题，如缩进、括号、引号等，还可以检查语法错误、未使用变量、未声明变量、代码重复等问题。

网址：https://eslint.org/docs/latest/use/getting-started

prettier

Prettier 是一个代码格式化工具，可以根据配置自动格式化代码，使代码风格一致，减少开发者在代码格式上的时间和精力投入，从而提高开发效率。

网址：https://prettier.io/

style-lint

style-lint 是一款强大的 CSS 代码规范检查工具，它可以帮助开发者保持一致的 CSS 代码风格，提高代码可维护性和可读性。Stylelint 支持配置文件，可以针对不同的项目需求进行定制化设置。

网址：https://stylelint.io/user-guide/get-started/

husky

Husky 是一个 Git hook 工具，可以让开发者在代码提交、推送等 Git 操作前自动执行一些脚本。常见的用途包括在提交代码前自动运行代码检查、格式化代码等操作，从而保证代码的质量和风格一致性。

网址：https://www.breword.com/typicode-husky/#skip-all-hooks-rebase

babel

Babel 是一个 JavaScript 编译器，用于将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本。在使用 Babel 进行开发时，需要进行相应的配置才能使 Babel 正常工作。

网址：https://www.babeljs.cn/docs/

lint-staged

lint-staged是一个在git暂存文件(staged files)上运行代码格式规范的工具。它只校验暂存文件的改动(diff),而不是整个项目。这样可以提高lint效率,并且避免提交未修改的文件产生的lint错误。

网址：https://github.com/okonet/lint-staged#readme

css编译器

less

Less 是一种动态样式语言，是 CSS 的一种扩展，提供了许多 CSS 所没有的功能，如嵌套规则、变量、运算、函数等，使得 CSS 更加易读、易维护和易扩展。

网址：https://lesscss.org/

sass

sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。它扩展了CSS，并添加了许多有用的特性，如变量、嵌套规则、Mixin（混合）、函数等。

网址：https://sass.bootcss.com/

stylus

Stylus是一种CSS预处理器，Stylus具有类似于Less和Sass的功能，但它的语法更加简洁，并且可以非常容易地与Node.js集成。同时，Stylus还支持实时编译，可以让开发人员更快地调试和开发CSS样式。

网址：https://stylus.bootcss.com/

PostCSS

PostCSS 是一个 CSS 后处理器，它能够解析 CSS 代码并且使用插件来转换 CSS。PostCSS 的插件生态系统非常丰富，可以实现各种 CSS 的转换，例如自动添加浏览器前缀、将 rem 单位转换为 px、压缩 CSS 等等。

网址：https://www.postcss.com.cn/

单元测试

Jest

jest是由Facebook开发的JavaScript测试框架，可用于测试React、Angular和Vue等前端框架。

网址：https://jestjs.io/zh-Hans/docs/getting-started

Mocha

Mocha是一个基于Node.js和浏览器的JavaScript测试框架，支持异步和同步测试，并且可以与各种断言库和测试覆盖率工具配合使用。

网址：https://mochajs.org/

AVA

AVA是一个轻量级的JavaScript测试框架，支持异步测试和并发执行，具有快速、简单和易于使用的特点。

网址：https://github.com/avajs/ava

三维开发

Three.js

Three.js 是一款基于 WebGL 的 3D 渲染引擎，可以用于制作各种 3D 场景、动画、交互等效果。它提供了丰富的 API 和示例，可用于创建复杂的 3D 网站、游戏、虚拟现实（VR）、增强现实（AR）等应用。

网址：https://threejs.org/

Cesium

cesium是一个开源的 JavaScript 库，用于创建基于 Web 的地球浏览器应用程序。它使用 WebGL 进行硬件加速，并使用大量的开放数据标准，如 WMS、WFS、GeoJSON、KML 等。

网址：https://cesium.com/

Babylon.js

Babylon是一个功能强大的三维引擎，专门用于创建基于 WebGL 的游戏和应用程序，可在浏览器、移动设备和桌面上运行。

网址：https://www.babylonjs.com/