KUN's Blog对于 Web 学习路线的认识
首先要说的是，我仅仅是一名学习了一年的 Web 开发人员，我所说的技术层次完全达不到专业的水平，仅供参考。
概览
首先要打开 Web 的思维，被后端人员指挥的前端并不是一个合格的好前端，不会前端的后端人员也不是一个好后端。
还有一点基础，作为一名合格的开发人员，第一件事就是 24 小时 Proxy
前端
前端的概念是什么？
一切能看到的用户界面，包括命令行，都是前端，能做出这些界面让用户看，这就是前端的职责
前端的要领是什么？
Practice makes your perfect.
后端
后端的概念是什么？
前端展示的数据从哪里来？合理的把这些数据给前端，这就是后端的工作。
后端的要领是什么？
我不能认为我特别懂后端，不知道
作为一名 web 开发人员，学习路线是什么？
下面是我个人的经历
- HTML (这是网站页面的骨架，任何时候都不能离开)
- CSS (浏览器只认识
HTML,CSS,Javascript，然而CSS是网站的衣服) - Javascript (想让页面和用户进行基本的交互，那么 Js 是必要的)
请记住，这三者是前端之魂，学习它们永远不会亏
如果必须选出一个最重要的，那么它是 Javascript
前端三剑客的进阶
作为一名合格的前端人员，不仅需要 HTML5, CSS3, Javascript, 还需要知道
- SCSS / SASS (总的来说就是 CSS Plus, 比 CSS 方便一些)
- Typescript (带有类型的 Javascript, 我强烈推荐使用，用习惯就知道它的好了)
- Jsx / Tsx (HTML 和 Javascript / Typescript 结合后的产物，更加方便)
这些里面，最重要的是 Typescript，一定要学好
前端包管理器系列
需要注意的是，npm 是一切的基础，它的安装需要注意以下几点
- 先安装
NVM(这是 npm 的版本管理器，可以随意切换 npm 的版本) - 目前来看，
Node 18的稳定的 - 不要用垃圾
cnpm
还有几个常用的包管理器
- pnpm (个人十分推荐，速度我个人觉得是最快的)
- yarn (很多人用，但是我自己装包的时候经常装不上)
- bun (新出来的东东，好朋友说不推荐，没用过)
前端框架
注意，想要学习框架，务必先弄明白前端三剑客的基础
一个较为可行的评估方案是把一个你自己喜欢的网站自己实现一次，使用纯三剑客，自己写一个小网站当然是最好的
对于框架，我自己先学习了 Vue3，是标准的 Vue3 Composition API + Setup, 不包括 Vue2
框架是什么
框架是工具，开发的工具，甚至可以说只是 Javascript 的工具。
框架的作用是帮助你把一些复杂的 Javascript 需要实现的逻辑，使用简单的框架函数就能实现的东东
目前主要有六个较为知名的前端框架
Vue
Vue2 和 Vue3 的区别还是很大的，我推荐直接学最新的 Vue3，性能好的同时更加符合现代框架的语法和设计
React
目前最流行的前端框架，没有之一。直接在官网学习效率是最高的。
Angular
没接触过，是和 Vue 知名度相当的框架
Solid
一个细粒度为主的前端框架，和 React 写法上较为相似，很多人说直接学 Solid 就足够了，因为学完之后 React 也会写了。
请注意，我说的是写法，Solid 和 React 的核心是有极大不同的。
设计非常优雅，打包后大小仅有 7kb，缺点是没有足够成熟的生态，没有足够的参考案例
Svelte
类似于 Vue 写法的框架，但是和 Vue 的本质有较大不同。
Marko
新框架，使用自定义的 marko 语言，类似于 jsx / tsx 的语法，没了解过
前端工程化
为什么需要前端工程化？
使用纯三剑客，搭建一个实用性的网站，代价太大了。
为什么会代价大，重复的流程过多，没有合适的分工协作，一个团队想要完成一个项目，难如登天
工程化的流程是什么
我们的前端工程化，指的是使用一套成熟可靠的方案，来开发出一个难易度中等及以上的网站
为什么是难易度中等以上？简单的就不行吗？
当然也可以，但是万事都要分场景而来，我假设你要搭建一个自己的博客，如果你没有特殊需求的话，我想 SSG (静态站点生成) 可以完美解决你的需求
当然如果你想要高度的可定义性，那就可以从新建一个前端工程开始
工程化需要知道哪些知识
首先是作为一名程序员的基础，git 我认为应该学会。
请注意，起码要学会 vscode 中使用 git 插件提交代码到 GitHub
下面我要描述以下工程化的基本流程，技术栈是关于 Vue3，某些专业词语听不懂没关系，具体代码不展示
- 使用
pnpm + Vite创建项目，使用Vue3 + Typescript模板 - 使用
vscode打开项目，pnpm i安装node_modules - 使用
Vite dev运行项目，查看是否创建成功 - 使用
git提交项目至GitHub，标记为第一次提交 - 集成
SCSS或less,tailwindcss,postcss等样式配置，并简单测试配置 - 使用
git提交项目至GitHub - 集成前端项目的
router,store等 - 使用
git提交项目至GitHub - 集成可选配置，
ESLint,husky,commitlint,Prettier,Vitest等 - 配置
src文件夹目录
从上面的描述中我们可以知道什么？
创建项目
我们使用了 pnpm 结合 Vite 创建了一个官方的模板项目
请注意，前端工程化的核心，目前的主流是 Vite 和 Webpack，这两者都是用于构建 Web 项目的工具，用户把写好的代码打包放在服务器上运行。
TIP
请注意，使用官方模板创建出来的项目，可以帮你省掉很多的细节
当然你也搜索 xxx-starter 来使用别人创建好的更定制化的配置，当然我推荐自己先试试
构建项目
我们上面说了，浏览器只认识 HTML, CSS, JS, 所以 .vue, .tsx, .scss 这些代码文件都是要被编译后成为纯粹的前端三剑客之后才能使用
构建工具系列有这么几种
Vite
非常快速的构建工具，官网有很详细的说明
有一个坑，打包出来的产物可能会和源代码不一样，不过一般都可以解决
Webpack
经典的打包工具，配置比较麻烦，但是有现成的配置可以抄
Gulp
我也没接触过
vscode
前端的开发工具一般是这个，核心在于需要大量的插件
当然，你可以选择 Jetbrains 的软件
框架专用技术栈
不同的框架是有不同的技术栈支持的，举个例子
如果你想要使用 SSR (服务端渲染) 技术的话，对于 Vue 你可以使用 Nuxt3, 对于 React 你可以选择 Next, 对于 Solid 你可以选择 Solid-starter
对于一个合理的动态前端大型站点来说，下面的要素是必要的
- 任意一个或多个前端框架
- 任意一款 CSS 预处理器
- 一个 UI 组件库
- Typescript (不支持 Typescript 绝对是大型应用的致命缺点)
- 合理的 Store 数据存储
- Router
- 规范措施 (ESLint, commitlint, Prettier 等)
- 测试
请注意，这是大型站点，自己折腾的话，不使用 tailwind, 不使用 Typescript, 不使用 UI 组件库，甚至不用框架都是完全可以的
TIP
具体框架这些技术栈怎么找，我也说不完整
有一个很实用的方法，搜索 awesome xxx 就可以找到对应框架的 GitHub 仓库，里面有大量实用的技术栈
还有一点，搜索 xxx starter 就可以看到他人使用的技术栈，一般是比较完整的
项目结构
经过以上的步骤之后，应该会得到一个类似于下面结构的前端项目
.
├── docs
├── index.html
├── LICENSE
├── package.json
├── pnpm-lock.yaml
├── public
│ └── vite.svg
├── README.md
├── src
│ ├── api
│ ├── App.vue
│ ├── assets
│ ├── components
│ ├── directives
│ ├── error
│ ├── hooks
│ ├── language
│ ├── layout
│ ├── main.ts
│ ├── router
│ ├── store
│ ├── styles
│ ├── types
│ ├── utils
│ ├── views
│ └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts测试
一个项目的完成必须要经过测试阶段，否则直接上线用户发现大量 BUG，甚至是遭到不萌萌人的攻击，这些都是极为严重的后果
测试过程有专门的测试工程师，这是软件测试的部分
?
不会测试的前端能叫 web 工程师吗？
学习一下 mockjs, vitest, jest 等知识
部署
前端工程的部署较为容易，将打包后的 dist 文件扔给后端就可以
？
让后端乱部署你的成果？不会后端的前端能叫 web 工程师吗？
学习一下 nginx, Apache, Docker 等知识
必须要说的是
前端工程化只是为了提升开发体验，不要为了一点小 demo 就乱用工程化，有时候官方的 Playground 是不错的选择
还有，任何的框架都只是建立在 Javascript 之上的东东，也许前端的尽头是纯 HTML
大前端
总的来说就是具备开发一个跨端（不同设备都能用）应用能力的工程师，主要指前端
请注意，并不是会了 Electron 就是大前端，不要滥用 Electron
可以从以下几个方面进行分析
开发一个浏览器 Web 应用
这是前端的基本工作，这个应用必须可以在浏览器稳定安全运行
让应用页面可以自适应屏幕宽度，适配手机和电脑
这个工作使用媒体查询就可以做到，如果使用了 UI 框架，使用现成的布局就可以完成
做到这两点，勉强算是兼容了手机电脑，如果你想，可以给它套一层 Electron 了，这样就变成应用了
但是这不是优雅的做法
可以思考以下做法
使用
Flutter跨端开发，不过我个人没有试过，不知道学习
Kotlin，制作Android App应用学习
Swift, 制作IOS应用及Mac应用学习
CSharp，开发UWP应用学习
Qt, GTK, WPF...，构建。。。
如果说，这些都做到了，那么将会变成一个自豪的大前端工程师了！
当然，大前端怎么能不会点后端呢 hhh，本质上 Web 是不分家的
ASP.NET
不要忽视 MicroSoft 的实力，我相信 ASP.NET 绝对不会比任何一个前端框架差到哪去，而且它还是跨端的
它的不好在于和 MicroSoft 深度绑定，接触之后我想之后的几年里都离不开 Visual Studio 了
但是绑定也没有什么大问题，它有成熟的体系，并且有 MicroSoft 的强大支持
总结
需要学的东东大概有 (由基础向外扩散)
核心
- HTML
- CSS
- JS
接下来实战一下，做一个静态或简单动态的网页
进阶
- Jsx / Tsx
- Typescript
- SCSS / SASS
试着用这些技术写一个小网页
框架
- Vue3
- React18
- Angular
- Solid
- Svelte
- Marko
建议入手从 React / Vue 中选一个学，如果按照就业标准
一般学完一个就可以开始做小项目了，例如管理系统，其它的自然就会了
常用的库
这个说不完了，一般来说一个 UI 库或者 tailwindcss 能极大提高开发效率
又或者类似于 lodash 这样的工具库，或者是 cross-env 这样的
但是对于快速开发，我想你需要知道这些 UI 组件库
- Material Design
- Ant Design
- UIKit
- Semantic UI
- Element-Plus
- ...
还需要知道 tailwindcss, Unocss 等方便样式工具
请善于搜索
效率工具
- ESLint (检查格式)
- Husky (代码提交规范)
- commitlint (代码提交规范)
- Prettier (代码格式化)
- Jest / Vitest (代码测试工具)
- .editorconfig (编辑器配置)
- mockjs (数据模拟)
请注意，效率是相对的，这些规范都是为了保证团队代码的规范统一，如果是个人做项目，大可不必
文档管理
- Show doc
- Api Studio
推荐 Show doc，免费好用，支持私有部署
需要注意的是，一个项目文档是必要的，因为任何项目都需要说明，没人愿意看一个没有注释没有文档的代码的，那叫无头屎山
接口测试
- ApiFox
- Postman
- ApiPost
推荐 ApiFox，非常好用，上手就知道
CI / CD
- GitHub Actions
- Jenkins
所谓的 CI / CD，指的是 Continuous Integration（持续集成）和 Continuous Deployment/Delivery（持续部署/交付）
核心在于自动化
举个例子，我现在在这里写文章，我要把文章部署到 GitHub Pages，我应该怎么做？
如果不使用 CI / CD，就要手动 ssh 进入服务器，然后
~ cd /home/kun/kun-galgame/kun-galgame-koa/
~ git pull && pnpm build && pnpm restart
...这样极为麻烦，但是使用 CI / CD 之后，在我提交代码之后，工作流就会自动帮我部署代码到网站，省去了很多麻烦
中后台开发
一般来说一个大型网站，例如电商网站，论坛，在开发完毕后都会有一个后台管理系统来管理数据，对用户进行管理
这种开发一般在 GitHub 上可以找到成熟的解决方案，直接套用即可
后端基础
- Nodejs
- Express
- Koa
- Nextjs
前端学后端 Nodejs 起手是较为可行的，因为都是 Javascript / Typescript
当然，学习常规的 Java 也没什么不好，不推荐原因是 Java 已经过饱和了
其它
- Electron
- Flutter
- Mongodb
- UniApp
- Ruoyi frame
- WebSocket
- WASM
- Worker
- ...
请注意，这些技术并不是不好，而是各有各的使用场景
还有各类低代码，微前端，前端分布式，都可以略作了解
ChatGPT
不会的问他，问他比问某些专家强
甚至一般的专家都比不过他
产品，原型
扔给产品经理
?
不会产品和原型的前端能叫 Web 工程师？
去了解一下 Axure, Processon
设计
扔给 UI 设计师
?
不会设计的前端能叫 Web 工程师？
去学一下 PS, AI, Web Design, 以及各类配色基础
不要怕被别人骂不好看，因为美是相对的，一般情况下经过更改之后我相信不会丑的完全不及格的
开发流程
一般来说，一个项目的开发流程应该是
需求提出 -> 明确需求 -> 甲方和产品经理对需求 -> 产品经理和 UI, 程序核对需求 -> 再次核对需求 -> 编写 PRD, UI 设计 -> 开始开发 <--> 修订需求 -> Code Review -> 内部测试 -> 灰度测试 -> 部署上线 -> 推广维护升级
请注意，我还没有参加过真实公司项目的开发，不过我大概知道这么一个流程
这整个过程被称为 devops, 其核心资金花费在维护上，开发占的成本其实很小
谨记官网
几乎任何技术的官网都是最佳实践，需要经常翻阅
感谢
感谢 yurzhang 的纠错！
直到刚才我都以为 Vite 是 Rust 写的。。。也不知道什么时候知道的。。
关于我
改天给网站写个 footer 吧。。。