最全的前端开发框架介绍

江山如画 • 2023年1月18日下午6:30 • 网页设计 • 阅读 3120

前端框架一般指用于简化网页设计的框架，比如，jquery，extjs，bootstrap等等，这些框架封装了一些功能，比如html文档操作，漂亮的各种控件（按钮，表单等等）。
前段框架的好处：对于互联网的产品而言，前端用户体验往往决定了一款产品的竞争力和吸引力;而对于前端工程师来说，考虑的问题更为复杂，他们既要为网站上提供的产品和服务实现一流的Web页面、优化代码，保证体验的最佳，更要考虑与市面上各大浏览器的兼容性，还需顾及Web前端表现层和前后端交互的架构，以及模化、通用类库、框架编写等一系列问题，由此提升前端开发的效率，降低开发成本和周期。

JS框架

Vue.js
React.js
Svelte（轻量级框架，最近比较火）。
angular（逐渐淘汰）

对比：

vue ：声明式编程，数据驱动的思想
React：函数式编程。如果你要改变数据，那么必须调用api去改。

在vue 中，几乎给你想要的全部给你了；而react 追求的更多的是自力更生。

CSS框架、组件库（B端常用）

React 技术栈：Ant Design（简称Antd）
Vue 技术栈：Element、Ant Design Vue
简单的CSS响应式框架：Bootstrap
Tailwind CSS（最近比较火）
Vant Weapp：轻量级的移动端（含H5、小程序）组件库

知识库框架

Vuepress（基于 Vue.js，推荐）
Docusaurus（基于 React.js，推荐）
GitBook
docsify：可制作简易的 wiki 文档。案例：掘墓人的 Wiki

补充：知识库框架，首先推荐 Vuepress 和 Docusaurus，功能强大，成熟稳定。

API 文档框架

TypeDoc：将TypeScript项目生成 html、markdown等文档。
storybook：用于搭建UI组件的知识库。可在线预览UI组件的样式和交互效果。

跨端框架

Flutter（最近比较火）：Flutter 的Dart开发语言，可以编译为 ARM 64、x86 和 JavaScript 代码
ReactNative（逐渐没落）：App、Web端
Taro：小程序、H5

桌面应用开发框架

Electron 框架。案例：VS Code软件就是用 Electron 开发的。

Electron 非常流行，也被大量公司使用，也有很多成功软件，比如 VS Code、Facebook Messager、Twitch、Microsoft Teams 等。Electron 虽然上手容易，但问题也很明显，就是慢、吃内存和大，Electron 吃内存是因为打包的 Chromium 吃内容，同时一个 Hello World 编译后就要 120M+ 。

VS Code、chrome、小程序开发者工具，本质上都是运行的 chrome 内核。所以你会发现，这三个软件都很占内存，都很卡。我将其称之为“前端头痛三剑客”。