大前端框架生态

"把所有前端框架列出来"实际上做不到,因为框架和库数量非常多(几百个+),还在持续出现。更实用的是按 主流生产环境、元框架、移动端、桌面端、状态管理、构建工具、CSS、全栈、微前端 等生态梳理。

你做过 React/Vue 企业项目,我按"大前端全景图"整理,尽量覆盖主流生态。

一、主流前端 UI 框架(核心)

1. React

Meta 出品,当前企业使用最多。

核心:

复制代码
React
├── JSX
├── Hooks
├── Context
├── Suspense
├── Server Components

生态:

路由:

  • React Router

  • TanStack Router

状态管理:

  • Redux

  • Zustand

  • MobX

  • Recoil

  • Context

请求:

  • Axios

  • Fetch

  • TanStack Query

  • SWR

UI:

  • Ant Design

  • Material UI

  • Chakra UI

表单:

  • React Hook Form

  • Formik

动画:

  • Framer Motion

图表:

  • ECharts

  • Recharts

元框架:

  • Next.js

  • Remix

  • Gatsby


2. Vue.js

生态:

核心:

复制代码
Vue
├── Composition API
├── Options API
├── SFC

官方:

  • Vue Router

  • Pinia

  • Vuex(旧)

  • VueUse

元框架:

  • Nuxt

UI:

  • Element Plus

  • Vant

  • Naive UI

  • iView/View UI

  • Arco

请求:

  • Axios

状态:

  • Pinia

3. Angular

Google 出品。

生态:

复制代码
Angular
├── RxJS
├── TypeScript
├── DI
├── Signals

配套:

  • Angular Router

  • NgRx

  • Angular Material

适合:

复制代码
金融
政府
大型后台

4. Svelte

生态:

  • SvelteKit

  • Stores

特点:

复制代码
编译时优化
体积小
性能强

5. SolidJS

生态:

  • SolidStart

特点:

React 思想 + 更高性能


6. 其他框架

较少但存在:

  • Preact

  • Qwik

  • Lit

  • Alpine.js

  • Ember

  • Backbone

  • Knockout

  • Mithril

  • Riot

  • Aurelia

老框架:

  • jQuery

二、SSR / 全栈框架(热门)

React 系

  • Next.js

  • Remix

  • Gatsby

Vue 系

  • Nuxt

  • Quasar

新一代

  • Astro

  • Fresh


三、构建工具生态

现代前端离不开打包器。

主流:

  • Vite(当前最流行)

  • Webpack

  • Rspack

  • Turbopack

  • Rollup

  • Parcel

  • Esbuild

  • SWC


四、CSS 生态

CSS 框架:

  • Tailwind CSS

  • Bootstrap

  • Bulma

预处理:

  • Sass

  • Less

  • Stylus

CSS-in-JS:

  • Styled Components

  • Emotion


五、状态管理

React:

复制代码
Redux
Zustand
MobX
Recoil
Jotai
Valtio

Vue:

复制代码
Pinia
Vuex

跨框架:

复制代码
RxJS
XState

六、移动端框架

跨端:

  • React Native

  • Flutter

  • Ionic

  • Taro

  • uni-app

小程序:

  • Taro

  • uni-app


七、桌面端

桌面应用:

  • Electron

  • Tauri

  • Neutralino

例如:

复制代码
VSCode → Electron

八、服务端 / 全栈(前端常接触)

Node:

  • Node.js

  • NestJS

  • Express

  • Koa

  • Fastify

Bun:

  • Bun

Deno:

  • Deno

九、微前端

企业级常见:

  • qiankun

  • single-spa

  • Module Federation


十、2026 企业招聘最常见技术栈(现实情况)

如果看招聘,不是"所有框架",而是:

第一梯队:

复制代码
React + Next + TS + Vite
Vue3 + TS + Vite + Pinia

第二梯队:

复制代码
Angular
React Native
NestJS

第三梯队:

复制代码
Svelte
Solid
Qwik
Astro

结合你的背景(React/Vue、后台系统、性能平台),继续投入建议:

复制代码
React 深化
↓
Next.js
↓
TypeScript 高级
↓
Node/Nest
↓
AI SDK
↓
Agent + 全栈

。

相关推荐
恋猫de小郭1 分钟前
Flutter THLC 的 WebView 滚动终于从 70 FPS 提升到 120 FPS
android·前端·flutter
严肃小白兔42 分钟前
TanStack Router 更新构建工具链:Node.js 兼容性、路由分割与前端工程实践
前端·node.js·状态模式
IT_陈寒1 小时前
Vue这个奇葩的响应式问题让我加班到凌晨
前端·人工智能·后端
风骏时光牛马1 小时前
功能可用性自动化测试验证
前端
LucianaiB11 小时前
【元宝搜索开发者征文大赛】AI时代,学得慢就不用学?用元宝搜索打造一个教程保质期,确保每一个教程符合你的现状
前端·人工智能·ai编程
好的佩奇11 小时前
Dart 之扩展类型
android·flutter·dart
excel11 小时前
JavaScript 对象池:减少高频对象创建与 GC 压力
前端
陈随易13 小时前
纯 Go 写的 JS 引擎,跑分超过了 C 语言的 QuickJS
前端·后端·程序员
子兮曰15 小时前
Chrome 权限元素实战:144 与 151 的渐进增强写法
前端·javascript·chrome
IT_陈寒15 小时前
Redis连接池泄漏那次,我差点把生产环境搞崩了
前端·人工智能·后端