前端开发必备文档（持续更新中...）【建议点赞关注+收藏】

工欲善其事，必先利其器。作为前端开发者，手握一份准确、权威、全面的资源清单，能让你的学习和开发效率事半功倍。

一、基础学习平台

• MDN Web Docs
  • 官网：https://developer.mozilla.org/zh-CN/
  • 说明：Mozilla 维护的 Web 开发权威文档，涵盖 HTML、CSS、JavaScript API 等所有前端基础，日常开发首选查阅手册。
• JavaScript.info (现代 JavaScript 教程)
  • 官网：https://zh.javascript.info/
  • 说明：从基础到高阶（闭包、原型链、事件循环）的深度教程，讲解清晰，是深入学习 JS 语言特性的必读网站。
• freeCodeCamp
  • 官网：https://www.freecodecamp.org/
  • 说明：完全免费的互动式编程学习平台，包含大量编程挑战和项目实战，完成项目可获得证书。
• 菜鸟教程
  • 官网：https://www.runoob.com/
  • 说明：中文编程学习入门网站，内容丰富、易于理解，适合快速查阅基础语法。
• W3School
  • 官网：https://www.w3school.com.cn/
  • 说明：经典的 Web 技术教程网站，提供基础的 HTML、CSS、JS 在线编辑和试运行环境。
• CSS-Tricks
  • 官网：https://css-tricks.com/
  • 说明：专注于 CSS 技巧的博客，包含大量高质量的前端技巧、Almanac（手册）和论坛讨论。

二、核心技术栈文档

开发实战的案头必备，涵盖语言、框架、工具链的官方权威文档。

1. 语言与标准

• TypeScript
  • 官网：https://www.typescriptlang.org/zh/docs/
  • 说明：JavaScript 的超集，提供静态类型。大型项目标配，能大幅提升代码健壮性和可维护性。
• ECMAScript 6 入门 (阮一峰)
  • 官网：https://es6.ruanyifeng.com/
  • 说明：国内最好的 ES6 教程之一，详细讲解了 ES6 的新特性。
• Can I Use
  • 官网：https://caniuse.com/
  • 说明：查询 Web 技术在浏览器中的兼容性支持情况，解决兼容性问题的神兵利器。

2. 主流框架

• React
  • 官网：https://react.dev/ | 源码：https://github.com/facebook/react
  • 说明：Facebook 出品，组件化思想，生态极其丰富。
  • 生态：Next.js (SSR框架), Redux (状态管理), React Router (路由).
• Vue.js
  • 官网：https://cn.vuejs.org/ | 源码：https://github.com/vuejs/core
  • 说明：渐进式框架，上手简单，文档中文友好。
  • 生态：Nuxt.js (SSR框架), Pinia (状态管理), Vue Router (路由), Element Plus (UI组件库).
• Angular
  • 官网：https://angular.io/
  • 说明：Google 出品，大而全的企业级框架，自带完整解决方案。

3、常用 UI 组件库

按PC端（管理后台/复杂网页）和移动端（H5/App）分类，方便快速选型。

(1) React 组件库

• PC端（后台/复杂页面）
  • Ant Design：https://ant.design/ —— 企业级 UI 设计语言，组件丰富。
  • Arco Design：https://arco.design/ —— 字节跳动出品，设计精美。
  • MUI (Material-UI)：https://mui.com/ —— Google Material Design 风格。
  • Semi Design：https://semi.design/ —— 抖音团队出品，现代化设计。
• 移动端
  • Ant Design Mobile：https://mobile.ant.design/ —— 蚂蚁金服移动端组件库。
  • NutUI React：https://nutui.jd.com/react —— 京东风格的移动端组件。

(2) Vue 组件库

• PC端（后台/复杂页面）
  • Element Plus：https://element-plus.org/ —— Vue 3 经典组件库，文档完善。
  • Ant Design Vue：https://antdv.com/ —— Ant Design 的 Vue 版本。
  • Arco Design Vue：https://arco.design/vue/docs/start —— 字节跳动出品。
  • Naive UI：https://www.naiveui.com/ —— Vue 3 比较完整的组件库，主题定制强。
• 移动端
  • Vant：https://vant-ui.github.io/vant/ —— 有氧科技出品，轻量、可靠的移动端组件库。
  • NutUI：https://nutui.jd.com/ —— 京东出品，面向电商业务场景。
  • Varlet：https://varlet.gitee.io/varlet-cn/ —— 基于 Vue 3 的 Material Design 风格移动端组件库。

(3) 跨端/工具类

• Tailwind CSS：https://tailwindcss.com/ —— 原子化 CSS 框架，不局限于具体端，适合全平台开发。
• TDesign：https://tdesign.tencent.com/ —— 腾讯出品，同时支持 Vue / React / Angular / 移动端。

4. 跨端开发

• Electron
  • 官网：https://www.electronjs.org/
  • 说明：使用 JS、HTML 和 CSS 构建跨平台桌面应用（VS Code 就是基于它）。
• React Native
  • 官网：https://reactnative.dev/
  • 说明：使用 React 构建原生移动应用。
• Taro
  • 官网：https://taro.zone/
  • 说明：京东出品，多端统一开发框架，支持编译到微信/支付宝/百度小程序、H5 等。
• Uni-app
  • 官网：https://uniapp.dcloud.net.cn/
  • 说明：DCloud 出品，基于 Vue.js 的多端开发框架。

三、工程化与工具链

提升开发效率，规范代码质量的必备工具。

• 构建工具
  • Vite：https://cn.vitejs.dev/ —— 下一代前端构建工具，极速开发体验。
  • Webpack：https://webpack.js.org/ —— 强大的模块打包器，生态成熟。
  • Rollup：https://rollupjs.org/ —— 专注于库打包的构建工具，支持 Tree Shaking。
  • Babel：https://babeljs.io/ —— JavaScript 编译器，用于将 ES6+ 代码转换为向后兼容的版本。
• 代码规范
  • ESLint：https://eslint.org/ —— JavaScript 代码检查工具。
  • Prettier：https://prettier.io/ —— 代码格式化工具，配合 ESLint 使用。
  • Stylelint：https://stylelint.io/ —— CSS 样式检查工具。
• 版本控制与包管理
  • Git：https://git-scm.com/ —— 分布式版本控制系统。
  • GitHub：https://github.com/ —— 代码托管与协作平台。
  • npm：https://www.npmjs.com/ —— Node.js 包管理器。
  • pnpm：https://pnpm.io/ —— 快速、节省磁盘空间的包管理器。

• Git 提交规范
  • Husky：https://typicode.github.io/husky/ —— Git hooks 工具，用于在 git commit或 git push之前触发自定义脚本（如运行 lint 检查）。
  • lint-staged：https://github.com/okonet/lint-staged —— 只对本次暂存的文件运行 lint 检查，避免全量检查导致的提交慢问题。

四、常用开发库

解决具体业务场景的高频工具库。

• 网络请求
  • Axios：https://axios-http.com/ —— 基于 Promise 的 HTTP 客户端。
• 数据处理
  • Lodash：https://lodash.com/ —— 一致性、模块化、高性能的 JS 实用工具库。
  • Day.js：https://day.js.org/ —— 轻量级日期处理库（替代 Moment.js）。
• UI 组件与可视化
  • Ant Design：https://ant.design/ —— 企业级 UI 设计语言和 React 组件库。
  • ECharts：https://echarts.apache.org/ —— 基于 JS 的可视化图表库。
  • Three.js：https://threejs.org/ —— 3D Web 开发库。
• 工具类
  • SheetJS (xlsx)：https://sheetjs.com/ —— 电子表格读写库。

五、技术交流与社区

遇到问题寻找答案，获取前沿资讯的最佳场所。

• Stack Overflow：https://stackoverflow.com/
  • 说明：全球最大的程序员问答社区，解决 Bug 的首选。
• 掘金：https://juejin.cn/
  • 说明：国内高质量的技术社区，前端板块活跃，不仅有文章还有“沸点”动态。
• SegmentFault 思否：https://segmentfault.com/
  • 说明：国内优质的开发者问答社区。
• Hacker News：https://news.ycombinator.com/
  • 说明：硅谷风格的技术新闻聚合，培养国际化视野。

六、优秀开源项目大全 (Awesome 系列)

学习源码、寻找最佳实践、发现新工具的宝库。

• Awesome JavaScript
  • 地址：https://github.com/sorrycc/awesome-javascript
  • 说明：精心分类的 JS 资源列表，包括库、框架、工具等。
• Awesome Vue
  • 地址：https://github.com/vuejs/awesome-vue
  • 说明：Vue.js 生态相关资源精选列表。
• Awesome React
  • 地址：https://github.com/enaqx/awesome-react
  • 说明：React 组件、工具、学习资源的汇总。
• Awesome Webpack
  • 地址：https://github.com/webpack-contrib/awesome-webpack
  • 说明：Webpack 相关的插件、Loaders 和教程集合。