Weierstrass 发表于 2024-9-23 01:10

Web框架工具盘点

前端框架总结

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 发表于 2024-9-23 07:03

支持学习总结

d199212 发表于 2024-9-23 08:38

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

kevinZ0 发表于 2024-9-23 08:51

挺好的,希望继续总结

一只小凡凡 发表于 2024-9-23 09:03

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

shadmmd 发表于 2024-9-23 09:34

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

同样没听说过这个Ember.js框架,但是看到这个的Github已经高达2万star,插件网也有1400+的插件
翻到葡萄城在博客园贴出来的【Ember.js和Vue.js对比】
https://img2018.cnblogs.com/blog/139239/201911/139239-20191115154932473-149885199.png

kittylang 发表于 2024-9-23 11:19

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

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

shengchiqie 发表于 2024-9-23 13:58

支持学习总结

Lanzl 发表于 2024-9-24 14:25

补充一下部分的UI组件库(我使用过的):
Element Plus(Vue3)、View UI Plus(Vue3)、Ant Design Vue(Vue3)、Ant Design(React)、Ant Design Mobile RN(React Native)、Vant(移动端)、Echarts(可视化图表)
页: [1]
查看完整版本: Web框架工具盘点