每日总结喵 | Apr 13

做了什么

这几天都耗在这b前端上了哎卧槽，重构了可能有四五次？从一开始的嗯写Vue + SCSS + TS到现在把包管理器到脚本工具到什么路由什么import什么插件全部配上，真是要了我命了。其实一开始就是想抄别人代码，但是抄的代码好像有点牛逼哈，人家什么插件都配上了反而让我搞得有点无从下手不知道怎么抄索性就，有时候太有强迫症也不是好事？

我想想重构了几次：

• 一开始的项目是刚开学的时候，因为接的那个毕设单写的，用Vue + SCSS + Typescript嗯写结果写出来依托石山，最搞笑的事是Vue和SCSS都是GPT给我推荐的路线，我根本不知道Vue和SCSS在整个前端构建的逻辑中起到什么作用（现在想起来我貌似是把scss当css跑的（笑）），就这么用99%ai + 1%调石山的经验勉勉强强写出来个"能跑"的前端，优点是能跑，缺点是能跑的补集，然后近一个月没碰过前后端一根
• 直到上周让我改初稿，我才像是大梦初醒般想起还有坨大份在等着我，然后在git clone一个月前的代码后我喜悦地发现这石山不知道怎么维护了，堆积如山的组件和样式，像史一样啊（感叹），这我能忍？毅然决定重构（现在回想起来好像也不是那么无法维护哈，也就是组件逻辑和scss乱一点罢了……如果早知道……
• 第一次重构：试着用了tailwindcss，但是因为官方给的vite导入教程和问gpt的postcss导入教程不符多次用混导致项目变成一团乱麻，加上我急着下班随意改随意删导致项目很快就到了无法挽回的程度，不得以git回退
• 第二次重构：水群的时候发现headlessui和daisyui两个神秘宝具，看官方网站上效果挺不错的果断加进待做清单里，然后做着做着发现headlessui + vue3 + tailwindcss产生了神秘的化学反应，盒模型遇水会变大变高（雾），并且本来应该是vertical的组件变成了horizontal并且怎么调也调不回来，尝试数小时后遂放弃
• 第三次重构：这次重构是因为git，忘了具体细节了但是大体上是github和本地git的版本控制出了问题，然后我对git不熟就一直revert，没想到revert了几个发现我主要的源码文件夹怎么空了（悲），不得以checkout老版本，全部复制然后删库重开
• 第四次重构：一边修bug一边水群的时候听群友说有个比Headless UI对Vue3适配更强，功能更强大的组件库Element Plus，此时被Combobox折磨了个把小时的我果断换库重构，顺便加上了vue-router做页面切换（对我之前都是用前端的弹窗续建和后端的Restful API做效果的……难怪做成了依托石山）
• 第五次重构：想抄Element plus给的starter代码，然后发现它是用unplugin-vue-router等插件配全自动router, import, components的，并且它是用unocss而不是tailwindcss，此时的我也发现tailwindcss貌似和scss有点八字不合

为了抄代码的路更顺利遂开始大重构……（其实到现在已经没多少重构成本了，之前搓的粗粒度组件已经荡然无存了）

• 第六次重构：在不断重构的路中开始思索整个前端项目的构建逻辑，我这么频繁的修改vite.config.ts和tsconfig.json究竟是为什么？我究竟是为什么天天重构这个重构那个？然后去油管看tutorial，看typescript，看vue3，看vite，看npm，结果是用pnpm换掉了npm，用just build换掉了npm run build，详细地配了一边unocss，各种unplugin插件和router逻辑，然后就到了现在

好困，回去睡觉了，这周还有高数期中，完蛋