开发工具-IDE
-
Visual Studio Code：简称
vscode，前端开发神器，最牛没有之一，官网下载。 -
WebStorm：在
vscode还没流行起来，小编也是一名webstorm使用者，它功能很强大，特别是其中的Git版本管理非常好用，以及时刻记录历史输入的功能，相当 Nice。但缺点也很明显，功能多，势必就对性能有影响，需要对电脑硬件有一定要求，不然项目规模如果很大（文件多、单文件长），使用起来都是贼卡贼卡的-.-，而且使用前需要破解激活或者花钱购买，官网下载。 -
Notepad++：一款比较轻便的文本代码编辑器，在没有使用
vscode之前，如果你想快速打开一个项目中某个文件进行代码修改，相信大部分程序猿都会选择它，官网下载 -
Sublime Text：它同
Notepad++一样是需要比较轻便的编辑器，但是它功能稍微强一些，拥有自己的插件系统、丰富的主题选择以及汉化能力，感觉有点像是vscode的前身(✪ω✪)，当年小编差点就入坑了，后面还是转投入vscode的怀抱，但不可置疑它是一个很优秀的产品， 官网下载。
主流前端技术栈
- 前端三剑客：
HTML+CSS+JS一切的一切由来都是从这三兄弟（或者三姐妹）出发的，不用多说，前端路途的必备内容，学就完事。
三剑客是站于巅峰之上的王者，而它们之下，便是三分天下，犹如三国鼎立时期。
-
Vue：一个渐进式
Javascript框架，特点是易学易用，性能出色，它有以下两个主流版本。 -
React：用于构建Web和原生交互界面的库。它的入手难度相对会比较困难，学习它之前你最好应该先去学习一下 JSX ，虽然
React与JSX是两个相互独立的东西，但它们经常一起使用。 -
Angular：构建未来的Web开发框架。可能
Angular在国内用的比较少，但它确确实实存在的并且其王者地位也不容置疑，受百万人喜爱，最早诞生于2009年，顺便一提，React出现于2011年，Vue于2014年。小编最早使用过Angular1版本，当时成天琢磨其中的 "脏查询" (〃＞＿＜;〃)。
三国之下便是无数州、郡、县的臣下人物了，他们大多服务或臣服于三国之下，但这并不意味万古不易，未来也可能其中一方突然就推翻上层统治，建立新的政权也未尝不可能🏯。
-
Vue的"好伙伴"：
-
vue-router：
Vue的官方路由库。 -
vuex：
Vue的状态管理库，Vue2配合Vuex3，Vue3配合Vuex4。 -
pinia：
Vue的最新状态管理库，你可以把它当成是不同名称的Vuex 5，当然，Pinia可不是Vue3专属，它同样也是适用于Vue2的。 -
mitt：一种替换
Vue2中的EventBus方式，它并不是只能用在Vue中，React、JQ等框架中也可以使用。 -
vueuse：基于
Vue组合式API的实用工具集。从v4.0开始，它通过vue-demi的加持，可以在Vue2和Vue3中使用。 -
vue-demi：一个能让你编写的
Vue程序自动适配Vue2和Vue3的通用库。
-
-
React的"好伙伴"：
-
react-router-dom：
React的网页应用官方路由库。 -
react-router：完整的
React路由解决方案，它与react-router-dom的区别在于还包含了react-native的一些组件，如果你只需要做网页应用的话，只用react-router-dom即可。 -
redux：
React的状态管理库。老实说React的状态管理方案还真有点多，你可以使用其内置的Hooks（useState/useReducer/useContext） 自己来实现一个强大的状态管理系统；也可以选择其他流行的解决方案，如：mobx 、zustand、recoil、jotai、xstate 等等。 -
redux-thunk：
redux的异步处理中间件。 -
dva：一个基于
redux和redux-saga的数据流方案
-
-
Angular的"好伙伴"：
-
@angular/router：
Angular的路由包，它并不需要单独再下载，内置在主包之中。 -
rxjs：一个用于实现反应式编程的反应式库，以处理异步执行、回调和基于事件的程序。
-
zone.js：一个
JS库，它提供了一种机制来拦截和跟踪异步操作。它通过重写全局的异步操作API来实现这一功能。在Angular中，zone.js被用于拦截Angular框架中的异步操作，并提供了一种方便的方式来处理异步任务的错误处理、跟踪和性能监测。
-
-
Typescript：
TS是JS类型的超集，可以编译成纯JS。它能把JS这种弱类型语言变成强类型语言，那"谁"说过一句话，JS前半生拼命把类型中JS中移除，后半生又拼命把类型加回来，你品，你细品。 -
JQuery：一个快速、小型且功能丰富的
JS库。其实它就是一个给你提供快速操作DOM的库，虽然现在也可以不用学它，但它确实是一个好东西，值得入手把玩把玩😉。 -
Solid：一个用于构建用户界面，简单高效、性能卓越的
JS库。如果你是一名React开发者，那么使用Solid将会感觉很自然，它们遵循着相同的理念，具有单向数据流、读/写隔离和不可变接口。但是放弃了使用虚拟DOM，使用了完全不同的实现。 -
Svelte：一个构建Web应用程序的工具。与
React和Vue等JS框架类似，但有一个关键区别：Svelte在"构建/编译阶段"将你的应用程序转换为理想的JS应用，而不是在 "运行阶段" 解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。说白了就是没有运行时，没有运行时所依赖的代码，从而减少产物，进而去提升性能，大声高喊："No Runtime"。🔉 -
Preact：一个和
React类似的用于构建用户界面的前端库。官网介绍它是具有和React相同API的快速 3kb 替代方案，它的特性与React几乎完全相同，它同样使用虚拟DOM、Context、Hooks等概念。当然，现在渐渐淡出大家的视野了，辉煌好似转瞬即逝般。 -
Ember：一个基于MVVM模型的开源框架，该框架主要用于创建复杂的多页面应用程序。这是一个全栈型框架，它不如
Vue轻盈，而且它有些复杂，上手稍微有点难度，不太适合应用于较小的项目中。 -
Backbone：一个轻量的
MVC框架，注意是MVC设计模式，可能java开发人员会比前端人员更容易上手这种模式的设计吧😓，但它还是比较简单的，学习曲线平坦，上手快，源码的质量很高，可以通读一遍玩玩。 -
Rust：这是一门语言，没错，你没听错，它和
JS语言是并列的，而且它还是一门较难学的语言，但是我们应该去了解或者学习它，不说为了什么重大原因，单单就是现在越来越多的前端工具都在用Rust重写，这个理由就够了。😤
突然一问：
你知道
vanilla.js吗？😊 --- 返璞归真！！！
前端UI库
PC端
-
ElementPlus：基于
Vue3的组件库。 -
Ant Design：基于
React的组件库，由蚂蚁团队出品，它不仅仅是前端组件库，更是前端的设计指南和设计体系，其社区也提供了 Vue2 与 Vue3 版本，还有 Angular 版本。 -
TDesign：由腾讯团队推出的组件库，各种技术栈都有对应的组件库，如：Vue2、Vue3、React、微信小程序 等等版本，它属于后起之秀，值得关注。
-
Arco Deisgn：提供了基于
React与Vue3两个主要版本的组件库，由字节跳动团队出品。 -
Bootstrap：一个不依赖前端三大框架的组件库，最早在
JQuery时代就闻名于前端圈子，在V3版本之前它是基于JQuery，从V4开始后就不强依赖JQuery了，想用在什么技术栈就随便用。😉 -
Semi UI：基于
React的组件库，由抖音团队出品。 -
Opentiny：支持
Vue、React与Angular的企业级组件库，由华为云出品，适配了移动端，支持跨端、跨框架。 -
Vuetify：基于
Vue3的组件库，由国外一群大佬在Github上共同维护开发，国内相对用得比较少。 -
Naive UI：基于
Vue 3的组件库，听说尤大大推荐它。 -
Idux：基于
Vue3的组件库，由深信服科技团队出品。 -
Material：基于
React的组件库，在国外比较流行。 -
Mantine：一个全能的 React 组件库，支持 100+ 个组件和 50 个
hooks。
移动端
-
Vant：轻量、可定制的移动端
Vue组件库，目前Vant官方提供了Vue2版本、Vue3版本和微信小程序版本，并由社区团队维护React版本和支付宝小程序版本。 -
Varlet：一个基于
Vue3开发的Material风格移动端组件库，全面拥抱Vue3生态，由社区团队维护。作者 在掘金上挺活跃的，可以先看看其分享的文章。 -
Ant Design Mobile：
Ant Design相信作为前端人员基本都知道吧，这是其推出的React移动端组件库，Antd Mobile是国内React移动端项目的首选组件库，如果你打算开发支付宝小程序，还可以使用 Ant Design Mini。 -
TDesign Mobile：
TDesign推出的移动端版本，有 Vue 、 React 和 微信小程序 版本。 -
Arco Design Mobile：
Arco Design推出的移动端版本，基于React。 -
Cube UI：基于
Vue2的组件库，滴滴团队出品。 -
NutUI：由京东团队推出的移动端组件库，Web上有
Vue和React两个版本，Vue的版本略强于React版本。 -
React WeUI：基于
React面向微信开发的移动端组件库，微信团队出品。 -
Zarm：基于
React的组件库，由众安科技团队出品。 -
Mint UI：基于
Vue2的组件库。
后台模板
-
ant-design-pro：
React + ant-design。 -
vue-antd-admin：
Vue2 + ant-design-vue。 -
vue-element-admin：
Vue2 + JS + element-ui -
vue-admin-template：
vue-element-admin的精简版本，感觉更适合二次开发。 -
electron-vue-admin：
vue-element-admin的桌面端版本。 -
vue-typescript-admin-template：
vue-element-admin的TS版本，Vue3 + TS + element-ui -
vue-vben-admin：
Vue3 + Vite + ant-design-vue + TS -
vue-vben-admin-thin：
vue-vben-admin的精简版本。 -
iview-admin：
Vue2 + iView -
vue-admin-beautiful：
Vue2 + element-ui -
d2-admin：
Vue2 + element-ui + SASS -
ngx-admin：
Angular + TS + Bootstrap4 + SCSS -
adminLTE：
TS + Bootstrap5 -
tabler：
JS + Bootstrap5 -
gentelella：
JS + Bootstrap4 -
blur-admin：
Angular + Bootstrap -
vue-pure-admin：
Vue3 + Vite + TS + element-plus + Pinia + Tailwindcss -
pure-admin-thin：
vue-pure-admin的精简版本。 -
geeker-admin：
Vue3 + TS + Vite + Pinia + element-plus -
Naive Ui Admin：
Vue3 + Naive UI + TS + Vite + Pinia。
工程化脚手架相关
打包工具
-
Webpack：这就不用介绍了吧，你熟，我熟，大家都熟啦。🤡
-
Rollup：一个
JS模块打包器，它与Webpack定位不同，它更专注于JS类库的打包工作。 -
Esbuild：新一代的
JS打包工具，尤大大最新推出的Vite工具内置了它，也在内部很多地方使用了其中的功能（transform），但并没有作为打包使用，而是选择了更加灵活的Rollup，主要是它针对的一些构建应用的重要功能仍然还在开发中，如代码分割和CSS处理方面。 -
Gulp：一个基于流（任务）的自动化构建工具，
Gulp是基于Node构建的，利用它流的能力，它强调的是前端开发流程规范化管理，从Vue等SPA框架出现后，它慢慢不介入业务的实际生产开发中了。 -
Grunt：它是
Gulp的前身，Gulp相比Grunt更加简洁，设计理念更合理，核心API只有五个。 -
Parcel：一个极速零配置的
Web应用打包工具，能支持打包各种文件，偶尔用来快速启动一个服务进行开发。 -
Turbopack：它是
Webpack的作者使用Rust语言开发一个前端模块化的工具，其目标是取代Webpack，它速度挺快的，曾经号称比Vite快 10 倍，比Webpack快 700 倍，但好像尤雨溪大大亲自去测量了一下，有点打脸，可以自行看看，传送门。😉
静态网站生成器
有哪些技术能快速生成博客网站、接口文档、官网、个人小站点的神兵利器呢❓
-
VuePress：
Vue驱动的静态网站生成器，Vue开发者的不二选择。 -
VitePress：它是
VuePress的最新替代品，强烈推荐，冲它就完事🚀。 -
Gatsby：一个为
React打造的快如闪电的现代化站点生成器。 -
Docusaurus：一个基于
React的静态网站生成器，专门为构建文档网站而设计。 -
Astro：集多功能于一体的Web框架，用于构建快速、以内容为中心的网站，它是顶级的
React静态网站生成器之一。 -
Halo：强大易用的开源建站工具，有丰富的模板与插件，能帮助你构建你心中的理想站点，推荐。
-
Hexo：一个用于快速、简洁且高效的博客框架，推荐。
-
Hugo：一个基于
Go语言的框架，特点是生成静态页面贼快，毕竟是基于Go，不容小觑。 -
Docsify：一款神奇的文档生成利器，简单、好用、轻量，值得入手。
-
wordpress：一个很老牌的技术，基于
PHP和MySQL。 -
Gridsome：基于
Vue构建。 -
MkDocs：基于
Python开发。 -
Pelican：一个用
Python编写的静态站点生成器。 -
Typecho
-
Saber
-
zola
-
Assemble
太多了~太多了，根本列举不完，就这样子吧。😅
网络请求
-
XMLHttpRequest：
XHR对象用于与服务器交互，最早的一种浏览器发起网络请求的方式。 -
WebSocket：它可以在用户的浏览器和服务器之间打开交互式通信会话，你可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。
-
fetch：浏览器最新推出的内置
API，它基于Promise的方式来进行网络通信。
上述三种是浏览器常见的网络请求方式，其余的发起网络请求的包、库大多底层都是基于这三者的封装。
-
axios：一个基于
XMLHttpRequest与Promise的网络请求库，可以用于浏览器和node。 -
useFetch：
vueuse中基于fetch的网络请求钩子，常在Vue3中使用。 -
$.ajax：
JQuery中的网络请求方式。 -
https：
Node中发起网络请求的模块，属于内置模块并不需要额外下载安装。 -
request：也是
Node中发起网络请求的方式，可惜已经弃用！🤢 -
superagent：
Node中一个轻量级、灵活的、易读的、低学习曲线的客户端请求代理模块，推荐使用。 -
got：
Node中另一个用户友好的轻量级HTTP请求库，推荐使用。 -
node-fetch：
Node中以fetch形式的网络请求模块。
❗有很多"小朋友"👶可能认为
AJAX也是一种网络请求方式，但实际不是，它只是一个代称/称谓。AJAXA是synchronous JavaScript and XML的缩写，即异步的JS和XML。你可以简单认为它就是指XMLHttpRequest。
CSS预处理器
CSS预处理器 是一种基于 CSS 扩展了一套属于自己的 DSL（Domain Specific Language）新语言。主要是为 CSS 增加一些编程特性，如变量、条件语句、逻辑运算等等，开发者用这种语言进行 CSS 的编码工作，然后再编译输出最终正常的 CSS 文件。
而 CSS 预处理器有以下三巨头：
-
Sass/Scss："世界上最成熟、最稳定、最强大的专业级CSS扩展语言！" 虽然官网是这么说的，但是曾经
node-sass的问题让无数程序猿抓狂🥶。小编从此转投进Less的怀抱，不过现在Sass好像变"好"了，新的一代也改称为Scss，不过很久没用过了💤。 -
Less：
Less和Sass比起来可编程功能不够，但是它的优点是完全亲近CSS，这让大部分开发者更容易上手，它也影响了Sass演变成Scss的时代。 -
Stylus：来自于
Node社区，主要用来给Node项目进行CSS预处理支持。当然，其他的Web项目也能使用，只是现在用得比较少了。
时间线：
Sass(2007)➡Less(2009)➡Stylus(2010)
包管理工具
-
npm：全称是 Node package manager ，它是
Node的包管理器，随同Node一起安装. -
cnpm：全称是 Chinese Node package manager ，它是
npm的国内代理站点。 -
yarn：全称是 Yarn Package Manager ，由 Facebook 、Google 等联合推出的一个新的包管理工具，它弥补了
npm的很多缺陷，在性能上优于npm很多。 -
pnpm：全称是 Performance Node Package Manager ，
pnpm是一个后起之秀，主要优点在于快速的、节省磁盘空间，如果你的包在一个项目中已经下载了，其它项目再用到这个包就不需要再次下载，而是通过 "软链接" 的方式关联。
插一个 Npm 发展历史图😉：
服务端/后端技术
- Node：是一种跨平台的运行环境，能够使得
JS脱离浏览器运行，相信也不用过多介绍了吧，懂的都懂啦，就这样😎。
和
JS与Vue/React/Angular的关系一样，Node也有它座下的三大骑士，使用它们能帮助我们快速完成Node应用的开发。
絮絮叨叨一下🤡：
以上三个框架小编都使用过，而且都各自输出了多个应用，也踩过很多坑。最早入坑的是
Express，然后就是Koa2，最后是Egg，但是多年下来，最终还是选择Koa2托付终生。这里就不评判谁的好坏，都各有优劣，只是对Koa2的爱多一点，在Koa2的基础上建立自己的一套快速开发的基础封装。
服务端渲染-SSR
SSR (Server Side Rendering)指服务端渲染，它原理是将在客户端渲染 HTML 的工作放在了服务端完成，然后直接返回 HTML 给到客户端去展示给用户。SSR 有着更好的 SEO 能力，而且首屏加载速度也更快。💓
-
Nuxt：
Vue技术栈中解决SSR的方案，并且现在已经推出了3的稳定版本，与Vue3保持同步，推荐Vue开发的同学有需要优先使用它。 -
Next：
React技术栈中解决SSR的方案。 -
Nest：
Angular技术栈中解决SSR的方案。
科普小知识⏰：
CSR：全称是 Client Side Rendering ，代表的是客户端渲染。当前最主流的SPA就是客户端渲染形式。
SSR：全称是 Server Side Rendering ，代表的是服务端渲染。
SSG：全称是 Static Site Generation ，代表的是静态站点生成。其也被称为预渲染，指的是如果用服务端渲染一个页面所需的数据对每个用户来说都是相同的，那么我们可以只渲染一次，提前在构建过程中完成，而不是每次请求进来都重新渲染页面。预渲染的页面生成后作为静态 HTML 文件被服务器托管。
ISR：全称是 Incremental Site Rendering ，代表的是增量式的网站渲染。指的是将"关键性的页面(网站首页、热点数据)"预渲染为静态页面，缓存至CDN，保证最佳的访问性能
DPR：全称是 Distributed Persistent Rendering ，代表的是分布式的持续渲染。ISR的升级版，通过On-demand Builder（按需构建器）来响应未经过预渲染的页面，然后将结果缓存至CDN。还有更多的
NSR、ESR等等，剩下的就自己去了解吧，偷个懒。😄
微前端方案
微前端的概念来源于微服务的架构理念，其核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，它于2016年提出，主要为了解决 iframe 的各种潜在问题。
-
iframe：Web中的原生方案，也是微前端的起源，接入很简单，但是最大缺点就是通信很麻烦。
-
single-spa：较早兴起的微前端框架，是后续很多微前端框架的奠基石。
-
qiankun：基于
single-spa，由阿里巴巴出品，国内比较主流的微前端方案，社区也很活跃，值得入手使用。 -
micro-app：基于
Webcomponent的微前端方案，由京东出品，不久前刚刚发布了v1.0版本。不久前，小编刚好在掘金上看了官方发布的文章介绍，可以看看，传送门。 -
EMP：基于
webpack 5 module federation（联邦模块） 的微前端方案，由欢聚时代出品。 -
无界：腾讯推出的一款微前端解决方式。它是一种基于
Web Components + iframe的全新微前端方案，继承iframe的优点，补足iframe的缺点，让iframe焕发新生。
小程序/跨端技术
跨端框架
-
Uniapp：一个跨端框架，支持
H5、多种小程序、APP、桌面端， 更加适合Vue技术栈的开发者。 -
Taro：一个跨端框架，支持
H5、多种小程序、RN，适合React/Vue/Nerv技术栈的开发者，其实小编感觉更适合React开发者😏。
Nerv：是一款由京东凹凸实验室打造的类 React 前端框架。
-
React native：使用
React来创建Android和iOS的原生应用。
突然一问：
你知道
Hybrid吗？😊 --- 混合APP！！！
原生应用"争论发展史"：
Hybrid➡RN&Weex➡Flutter
UI库
-
uni-ui：
Uniapp官方UI组件库。 -
vant/weapp：轻量、可靠的微信小程序
UI组件库。 -
taro-ui：
taro官方UI组件库。 -
taroify：
taro的React版本UI组件库，也是由Vant👍 出版。 -
nutUI：由京东开发，提供了多种版本的 ，如
taro、RN、Uniapp等等。 -
react-native-elements：
RN的UI组件库。 -
ReactBase：其从
RN诞生之际就出现了，有丰富和广泛的生产级别UI组件。 -
weex-ui：
weex的官方UI组件库。 -
weex-amui：
weex的UI组件库。 -
bruno：企业级
Flutter的UI组件库。
桌面端应用
-
Electron：一个使用
HTML+CSS+JS构建桌面应用程序的框架，推荐，小编桌面端应用都是使用它来完成的💕，vscode就是用它来制作的。 -
NW.js：一个基于 Chromium 和
Node的Web运行环境，可让你直接在DOM中调用Node模块，并可使用任何现有的Web技术来编写本地应用。简单来说就是 "Node+ 前端任意框架 = 桌面应用"。 -
Flutter for Desktop：
Flutter的衍生产物，也不错😗。 -
Tauri：也是一个构建桌面端应用不错的东西，在2021年兴起，它是基于
Rust语言，这对大部分前端程序猿来说，可能没接触过，但Rust语言的前景是不错的，不过学习门槛稍微有点高。
插个小话题🐶：
不知道你了解
Vite不？作为一名前端人员，你能不知道？😡正题，
Vite在底层使用了EsBuild和Rollup这两个打包工具，一个是速度很快，一个是很灵活，但现在两者在Vite中的结合并不是非常完美。不过这也正常，两个都是完全独立的东西，且又不是专门为了Vite而开发的，故这会产生或导致Vite在打包上存在一些无法解决的问题。为此，
Vite团队正在研发新的打包工具，从这两者中取"精华"去"糟粕"，这个新的工具名为Rolldown，而最最最重要的，它是使用Rust语言来开发的。还有还有，
Turbopack知道吧？就是那个曾经号称比
Vite快10倍，由Webpack的作者开发，意在替换Webpack成为新一代打包王者，而它也是由Rust👍编写的。当然， 在
Vite推出4.3之后，Vite重新拿回了属于它的荣耀。💯
版本控制工具
-
Git：一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。
-
SVN：俗称小乌龟🐢，它与
Git最大的区别在于，Git是分布式的，SVN是集中式的。最早小编刚入行的时候用得就是小乌龟，现在用得比较少了，感觉正在慢慢退出历史舞台，官网已经几个月打不开了。
代码托管平台
-
Github：一个基于
Git实现的在线代码仓库，是目前全球最大的代码托管平台，可以帮助程序员之间互相交流和学习。 -
Gitee：国内比较出名的代码托管平台。
-
GitLab：一个代码托管平台，但一般用于在企业、学校等内部网络搭建
Git私服。 -
Codeup/云效：基于
Git的代码管理平台，阿里云推出。做外包的小伙伴推荐使用它，很好用，真的。👻
至此，本篇文章就写完啦，撒花撒花。
希望本文对你有所帮助，如有任何疑问，期待你的留言哦。
老样子，点赞+评论=你会了，收藏=你精通了。