2026前端开发资源大全：工具、文档、框架、学习路线与实战指南

前端开发资源、工具、文档大全（超详细整理）

一、前端学习路线

1. HTML / CSS 基础

• HTML5 官方文档
  • https://developer.mozilla.org/zh-CN/docs/Web/HTML
• CSS 官方文档
  • https://developer.mozilla.org/zh-CN/docs/Web/CSS
• W3C 标准
  • https://www.w3.org/
• 菜鸟教程（适合新手）
  • https://www.runoob.com/
• Web.dev（Google 官方）
  • https://web.dev/

2. JavaScript 学习

• JavaScript MDN 文档
  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
• ECMAScript 官方规范
  • https://tc39.es/ecma262/
• JavaScript.info（强烈推荐）
  • https://javascript.info/
• ES6 教程
  • https://es6.ruanyifeng.com/
• TypeScript 官方文档
  • https://www.typescriptlang.org/docs/

3. 前端框架

Vue

• Vue 官方文档
  • https://cn.vuejs.org/
• Vue Router
  • https://router.vuejs.org/zh/
• Pinia
  • https://pinia.vuejs.org/zh/
• Nuxt
  • https://nuxt.com/
• Element Plus
  • https://element-plus.org/zh-CN/
• Vant
  • https://vant-ui.github.io/vant/

React

• React 官方文档
  • https://react.dev/
• Next.js
  • https://nextjs.org/
• Redux
  • https://redux.js.org/
• Zustand
  • https://zustand-demo.pmnd.rs/
• Ant Design
  • https://ant.design/
• Material UI
  • https://mui.com/

Angular

• Angular 官方文档
  • https://angular.dev/

---

二、前端核心工具

1. 编辑器 / IDE

VS Code（主流）

• 官网
  • https://code.visualstudio.com/
• 常用插件：
  • Chinese Language Pack
  • ESLint
  • Prettier
  • Auto Rename Tag
  • Path Intellisense
  • GitLens
  • Vue Official
  • Tailwind CSS IntelliSense

WebStorm

• 官网
  • https://www.jetbrains.com/webstorm/

---

三、前端构建工具

1. Vite（推荐）

• 官网
  • https://vitejs.dev/
• 中文文档
  • https://cn.vitejs.dev/

2. Webpack

• 官网
  • https://webpack.js.org/
• 中文文档
  • https://webpack.docschina.org/

3. Rollup

• 官网
  • https://rollupjs.org/

4. Parcel

• 官网
  • https://parceljs.org/

---

四、包管理工具

npm

• 官网
  • https://www.npmjs.com/

Yarn

• 官网
  • https://yarnpkg.com/

pnpm（推荐）

• 官网
  • https://pnpm.io/

---

五、CSS 工具与框架

1. Tailwind CSS

• 官网
  • https://tailwindcss.com/

2. Sass

• 官网
  • https://sass-lang.com/

3. Less

• 官网
  • https://lesscss.org/

4. Bootstrap

• 官网
  • https://getbootstrap.com/

---

六、UI 组件库

Vue UI

• Element Plus
  • https://element-plus.org/
• Vant
  • https://vant-ui.github.io/vant/
• Naive UI
  • https://www.naiveui.com/
• Arco Design
  • https://arco.design/

React UI

• Ant Design
  • https://ant.design/
• Material UI
  • https://mui.com/
• Chakra UI
  • https://chakra-ui.com/
• Shadcn/ui
  • https://ui.shadcn.com/

---

七、图标资源

1. Iconfont（阿里）

• https://www.iconfont.cn/

2. Font Awesome

• https://fontawesome.com/

3. Lucide Icons

• https://lucide.dev/

4. Heroicons

• https://heroicons.com/

---

八、接口调试工具

1. Postman

• https://www.postman.com/

2. Apifox（国内推荐）

• https://apifox.com/

3. Insomnia

• https://insomnia.rest/

---

九、代码规范工具

ESLint

• https://eslint.org/

Prettier

• https://prettier.io/

Stylelint

• https://stylelint.io/

Husky

• https://typicode.github.io/husky/

---

十、Git 与代码托管

Git

• 官网
  • https://git-scm.com/
• 学习文档
  • https://learngitbranching.js.org/?locale=zh_CN

GitHub

• https://github.com/

GitLab

• https://gitlab.com/

Gitee

• https://gitee.com/

---

十一、前端部署平台

Vercel

• https://vercel.com/

Netlify

• https://www.netlify.com/

Cloudflare Pages

• https://pages.cloudflare.com/

GitHub Pages

• https://pages.github.com/

---

十二、浏览器与调试工具

Chrome DevTools

• 文档
  • https://developer.chrome.com/docs/devtools/

Firefox DevTools

• 文档
  • https://firefox-source-docs.mozilla.org/devtools-user/

---

十三、前端动画库

GSAP

• https://gsap.com/

Framer Motion

• https://www.framer.com/motion/

Animate.css

• https://animate.style/

Lottie

• https://airbnb.io/lottie/

---

十四、数据可视化

ECharts（国内推荐）

• https://echarts.apache.org/zh/index.html

Chart.js

• https://www.chartjs.org/

D3.js

• https://d3js.org/

Recharts

• https://recharts.org/

---

十五、低代码与拖拽平台

LowCode Engine

• https://lowcode-engine.cn/

Appsmith

• https://www.appsmith.com/

Retool

• https://retool.com/

---

十六、AI 前端开发工具

Cursor

• https://cursor.com/

GitHub Copilot

• https://github.com/features/copilot

ChatGPT

• https://chatgpt.com/

Claude

• https://claude.ai/

---

十七、前端面试资源

前端面试题

• https://github.com/Advanced-Frontend/Daily-Interview-Question

前端知识体系

• https://github.com/woai3c/Front-end-articles

JavaScript 面试题

• https://github.com/sudheerj/javascript-interview-questions

---

十八、开源项目学习

Vue 开源项目

• https://github.com/vuejs/vue

React 开源项目

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

Vite

• https://github.com/vitejs/vite

Next.js

• https://github.com/vercel/next.js

---

十九、前端学习网站

免费学习

MDN

• https://developer.mozilla.org/zh-CN/

freeCodeCamp

• https://www.freecodecamp.org/

廖雪峰教程

• https://www.liaoxuefeng.com/

慕课网

• https://www.imooc.com/

极客时间

• https://time.geekbang.org/

---

二十、前端常用资源站

图片资源

• Unsplash
  • https://unsplash.com/
• Pexels
  • https://www.pexels.com/
• Pixabay
  • https://pixabay.com/

配色网站

• Coolors
  • https://coolors.co/
• Color Hunt
  • https://colorhunt.co/

渐变颜色

• uiGradients
  • https://uigradients.com/

Loading 动画

• https://loading.io/

CSS 灵感

• https://uiverse.io/
• https://css-tricks.com/

---

二十一、前端性能优化工具

Lighthouse

• https://developer.chrome.com/docs/lighthouse/

WebPageTest

• https://www.webpagetest.org/

GTmetrix

• https://gtmetrix.com/

---

二十二、Node.js 后端相关

Node.js

• https://nodejs.org/

Express

• https://expressjs.com/

NestJS

• https://nestjs.com/

Koa

• https://koajs.com/

---

二十三、数据库相关

MySQL

• https://www.mysql.com/

MongoDB

• https://www.mongodb.com/

Redis

• https://redis.io/

---

二十四、前端工程化

Monorepo

• Turborepo
  • https://turbo.build/
• Nx
  • https://nx.dev/

自动化

• Jenkins
  • https://www.jenkins.io/
• GitHub Actions
  • https://github.com/features/actions

---

二十五、移动端开发

UniApp

• https://uniapp.dcloud.net.cn/

React Native

• https://reactnative.dev/

Flutter

• https://flutter.dev/

Taro

• https://taro.zone/

---

二十六、小程序开发

微信小程序

• https://developers.weixin.qq.com/miniprogram/dev/framework/

支付宝小程序

• https://opendocs.alipay.com/mini

抖音小程序

• https://developer.open-douyin.com/

---

二十七、前端安全

OWASP

• https://owasp.org/

Web 安全文档

• https://developer.mozilla.org/zh-CN/docs/Web/Security

---

二十八、前端开发常用网站

Can I Use

• https://caniuse.com/

npm Trends

• https://npmtrends.com/

Bundlephobia

• https://bundlephobia.com/

RegEx101

• https://regex101.com/

JSON 格式化

• https://jsonformatter.org/

---

二十九、学习建议

新手阶段

学习顺序：

1. HTML
2. CSS
3. JavaScript
4. Git
5. Vue / React
6. TypeScript
7. Node.js
8. 工程化
9. 项目实战

进阶阶段

重点方向：

• 前端工程化
• 性能优化
• 浏览器原理
• 网络原理
• 数据结构与算法
• 前端架构
• 微前端
• SSR
• CI/CD

---

三十、推荐前端项目实战

新手项目

• TodoList
• 个人博客
• 企业官网
• 后台管理系统

中级项目

• 电商平台
• IM 聊天系统
• CMS 内容管理系统
• 数据可视化平台

高级项目

• 微前端架构
• 低代码平台
• 在线编辑器
• 可视化拖拽系统
• SSR 服务端渲染项目

---

三十一、前端开发者必备浏览器插件

Chrome 插件

• Vue DevTools
• React Developer Tools
• JSON Viewer
• Wappalyzer
• Octotree
• Lighthouse
• Tampermonkey

---

三十二、优秀前端博客与社区

社区

• 掘金
  • https://juejin.cn/
• Stack Overflow
  • https://stackoverflow.com/
• DEV Community
  • https://dev.to/
• Reddit Frontend
  • https://www.reddit.com/r/frontend/

博客

• 阮一峰
  • https://www.ruanyifeng.com/blog/
• CSS-Tricks
  • https://css-tricks.com/
• Smashing Magazine
  • https://www.smashingmagazine.com/

---

三十三、推荐前端学习路线（2026版）

Vue 技术栈

HTML → CSS → JavaScript → TypeScript → Vue3 → Pinia → Vite → Node.js → SSR → 工程化 → 性能优化

React 技术栈

HTML → CSS → JavaScript → TypeScript → React → Next.js → Zustand/Redux → Node.js → SSR → 工程化 → 微前端

---

三十四、前端开发者推荐电脑配置

基础配置

• CPU：i5 / R5
• 内存：16GB
• 硬盘：512GB SSD

推荐配置

• CPU：i7 / R7
• 内存：32GB
• SSD：1TB

---

三十五、总结

前端开发不仅仅是页面开发，还包括：

• 工程化
• 架构设计
• 性能优化
• 自动化部署
• 安全
• 跨端开发
• AI 编程协作

建议：

• 一定要多做项目
• 多看源码
• 多写总结
• 多刷面试题
• 保持持续学习

真正的前端高手，核心竞争力在于：

• 解决复杂问题
• 工程能力
• 架构能力
• 性能优化能力
• 团队协作能力