Web框架工具盘点

Weierstrass

前端框架总结

1.简介
本文为个人心得与整理类型的文章，无资源。
主要是盘点前端常见的框架、工具，对互联网上可见的信息做一个汇总，主要涉及前端的各个框架技术，并出于我个人的理解进行简介。
不包含数据库，技术细节，后端等部分，也不包含版本管理、代码部署等部分，如有错误还请指正。遗漏的部分还请各位补充。

2.基础
Web前端的基础技术是HTML，CSS，Javascript
HTML：用于决定要展示的东西如何排布，提供一些基础展示元素比如大标题和正文
CSS：设置展示元素的样式
Javascript：提供动态交互代码，值得说的是Javascript与Java差别很大。Javascript更接近脚本语言与函数式语言，提供动态类型，可以传递函数，这一点相当特别。

3.框架
Angular、Vue、React、Ember
组件框架：
Bootstrap(html+css库)  一个比较美观的组件框架
CSS框架：
Sass, Less, Stylus：这几个是CSS的抽象，将对应代码转换成CSS，可以用来配置大量CSS
TailwindCSS：也是配置CSS的一个框架
Typescript：Javascript的超集，支持Javascript的所有特性，同时提供类型检查。动态类型确实比较麻烦，代码多了根本不知道变量里是函数还是别的玩意。
状态管理库：Redux, Vuex, MobX
网页中由不同组件构成，不同组件可能展示同一个数据的不同形式，需要处理同步与更新等问题，如果组件少或者交互简单就不需要这些框架或者库
Electron：使用web技术开发本地应用的大型框架

4.工具
4.1运行时
类似Python，Javasrcipt运行时需要一个环境进行解释运行，除去浏览器外，最常用的运行工具就是Node.js
Node.js、Deno、Bun
4.2 打包构建工具
打包：Webpack、Rollup、Parcel、Vite、esbuild Browserify、Rspack
构建/编译：Babel, Webpack, Gulp, Grunt
4.3 包管理器
管理代码包，处理依赖问题
npm、pnpm、yaru
以上便是一些常见框架、工具的盘点，以后有机会再继续完善这个帖子。

darkf

支持学习总结

d199212

Ember这个什么框架？我怎么没听过

kevinZ0

挺好的，希望继续总结

一只小凡凡

yarn不是yaru，还有少了最著名之一的element-ui，除此之外随vue3推出的pinia比vuex更好用，跨平台Tauri也很不错，著名代{过滤}{过滤}理软件 cla{过滤}{过滤}sh 桌面程序就是它写的（不是内核）

shadmmd

d199212 发表于 2024-9-23 08:38
Ember这个什么框架？我怎么没听过

同样没听说过这个Ember.js框架，但是看到这个的Github已经高达2万star，插件网也有1400+的插件
翻到葡萄城在博客园贴出来的【Ember.js和Vue.js对比】

kittylang

shadmmd 发表于 2024-9-23 09:34
同样没听说过这个Ember.js框架，但是看到这个的Github已经高达2万star，插件网也有1400+的插件
翻到葡萄 ...

这东西是十年前就出了，比vue还早。没听过是因为过气了

shengchiqie

支持学习总结

Lanzl

补充一下部分的UI组件库（我使用过的）：
Element Plus（Vue3）、View UI Plus（Vue3）、Ant Design Vue（Vue3）、Ant Design（React）、Ant Design Mobile RN（React Native）、Vant（移动端）、Echarts（可视化图表）