PHP码农用10个月从0 到 1 掌握前端 NodeJs, Nuxt3, Vue3 & React18 与 vite

我自雇8年都在写PHP（虽然PHP版依然保持新版8.1+以上，因为维护的框架是我自己写的，基本东西都够用了），最近2-3年趋势有明显转向前端 js 框架，在 2023年的前2年我都有在关注 vue2 和 react16,17，当时的我看了代码都不知道为什么会有个package.json 这些配置的东西，和版本匹配问题，还有一个非常讨厌的繁琐的导入这个import，学到一半莫名被劝退了。

直到2023年3月份开始进入前端（幸运有个伯乐，进了一家不到5人的公司愿意栽培我），公司一开始是从nuxt3 下手，因为它提供了前后端，由于我很多都是基础为0开始，包括从windows 转去 mac，很多终端的指令都是从0开始，所以学习遇到非常多的坑。。。骂了很多三字经。。。

这2023 下半年，我除了睡觉基本都在学习的路上，为了前端学习我平均都睡4-5小时。干完第8个月，我就辞职了，11月1号我开始开发属于我自己接freelance 的框架，方便我接项目和快速开发赚更多的钱。

第一框架我当然拿nuxt3 开始作为我复制的标准，由于我自己使用PHP MVC 写过框架的人，加上自己有点经验 ，所以database 的设计我还是使用我以前的设计，毕竟那个设计是多年来磨出来，当然还有另一个理由是方便我转换，这里我是采用了 sequelize model 配置的（和PHP ORM 相近）。

我学习 nuxt3 比 vue3, react 久，毕竟一大堆规矩要学习，有些相似但用法不一样，所以会有反复测试它真正的用意，它除了前端的规矩，还有后端规矩，本来想用第三API NodeJS Koa 来搞定就完了，但是这样用nuxt3 的意义就没有了，所以还是坚持用一用，这样又多花了一些学习成本了，过后整个nuxt3 我用1月半的时间，过后1比1复制了vue3, 和 react18, 前前后后为了统一标准，让3个框架除了界面，还有代码名称都保持一致或接近，方便我下次维护或使用直接就明白。

但是3个框架不一样的是界面，原本这给它也统一，后来发现如果全部统一其实不是最适合的，后来想想安慰自己，就当学习3种UI吧。
Nuxt3 - nuxt/ui, vue3 - element-plus, react18 - ant design.
在 vue3 与 react18 由于本身没要支持后端，我知道很多人推荐使用PHP，但是我偏偏就要用 nodejs 的 koa 做后端接口，毕竟在公司学好的，一定要拿出来用尽它，了解它才罢休。

话说回来，关于这3种设计，有2个很接近，element-plus 与 ant deisign, 它们两好像互抄，毕竟都是东方人开发的，互相跳槽拿idea 也是合理的，哈哈！

这里我说说学习过程，我一开始比较看懂 vue，因为 html 看起来容易，所有我比较倾向 vue，这就为什么我把 react18 放到最后开发。
另外一个原因是Nuxt3 它是基于 vue3 的，所以我第二个开发当然是持续学习更深层的vue3，不然冒冒然进入react 会把我自己搞懵逼的。

谁知～原本我只想学学react 有个了解就罢了，心想我最后还是倾向vue3的, 谁知。。。react 当你上手了，其实容易过vue3，他确实像网路说的react 不会让你记太多规矩，来来去去都是这样写，同事读你的代码也相对容易（当然前提是有个标准去follow）。

最后我想总结的是，这3个框架里都是有用vite, nuxt3 背后也在使用vite，只是代码外面不明显，过后中途给我看到vite 可以在vue3 和 react18 做自动导入，我才积极复制这3个框架，否则我估计3个多月也不会出3个框架，没有vite, 我至少要3个月 x 2 才可以搞定吧！

在闲余的时间，我好奇看了angular 17 了，我总感觉好像写法有点像PHP，是不是有点过时了？我看了没什么新鲜，所以没兴趣复制angular 17，还有angular的 vite 好像要手动配置才可以，加上它越来越冷门，所以目前放弃，隔一边去，等时机到才搞！

最后。。。js 框架也只不过如此，提升信心去学习接下来的目标 react native, nextjs, golang, flutter.

我发现学新技术几时都不算迟，如果我早学vue2, 隔年我为版本大改而蛋疼，如果我早学，我现在的vue 和 react 依然不停的重复 import 很多很多的 svg icons, import 很多很多的 components，所以别急学新的技术。。。在不稳定之前你可能都会白学，没啥好羡慕的你会什么什么，你有多牛～，对于学习现代技术是否要过于深入，往往需要权衡短期的需求和长期的趋势。在追求深度学习的同时，保持对广泛知识的敏感度也许能够更好地适应不断变化的科技环境。

各位老板，我已经准备好了，我可以接准备接项目了。。。

马来西亚人到此一游。。。

本作品采用《CC 协议》，转载必须注明作者和本文链接