前言
时隔三年，重新写代码。距离上一次写代码，已经过去三年了。
三年前从前端转去做产品，前端本身对于产品经理来说，也算是轻车熟路，所以厌倦了写代码的无聊，或者对于前端岗位的担忧，于是选择换一个赛道卷。
也不知道这样的选择是否正确，不过现在看来，在互联网行业急剧萎靡的当下，似乎没有多大差别。
去年裸辞休息了大半年，在当时的就业环境下，肯定是一个十分勇气的选择。
不过，不管怎么样，在公司干得不开心，不管什么样的选择，都是无可厚非的。
相比于钱来说，我可能更加惜命。
重新捡起代码
本以为，3年时间0接触前端代码，重新捡起来可能需要很长时间，当我真的重新打开 VS Code 的那一刻，仿佛一切都回来了，那感觉就像是热血动漫中高能时刻。
一切还是那么顺手，某种层面上来说，似乎更加顺手了。
不得不说，前端的迭代实在太快了，一日不见，已经迭代了无数个版本。
本项目是个人项目，基于vue3+elementUI Plus开发的微信聊天截图生成器，如下：
技术选型
一个小而美的网站，最适合的还是Vue，再选择一个顺手的UI框架，基本可以满足大部分需求了，这适合大部分前端项目。
本项目，技术选型vue3.0+elementUI Plu。
由于用到了数据存储，作为一个纯前端项目，选择使用indexDB，方便数据操作，引入了dexie.js。
图片生成工具选择html-to-image
项目部署直接使用github pages
vue3.0相比于2.0代码风格实在相差太大了。
当然，尤大大还是很贴心的兼容了2.0的代码风格，所以大胆拥抱吧。
不过既然选择3.0，那就是希望体验3.0的特性，比如组合式Api，比如steup语法糖，不得不说相比选项式，这种代码书写方式，真是随心所欲。
当然也有不太舒服的地方，响应式数据必须使用ref包裹，刚开始可能会忘记。
项目页面结构
本项目页面比较少，仅有首页、关于等文案性页面，聊天截图、转账截图等功能性页面。
选择上中下页面布局，对于功能性页面，左右布局，左侧为功能菜单和选项。
功能主要包含，手机界面状态参数配置，比如手机时间，信号等级，WiFi，充电等等，手机型号选择，对应不同的像素尺寸，角色创建，创建不同的聊天角色头像和昵称。对话编辑，包括文字，系统时间、语音等。
最后将所有参数和数据渲染到手机界面上。
渲染的界面可以通过html-to-image转成png图片，实际上是生成base64图片路径。
但是，在转成图片的过程中，可能会和实际html有一定的出入，这可能是由于图片渲染的机制问题，比如我代码中使用了margin，但是渲染的时候就不显示边距，但我改成padding就没有这个问题。
所以还是需要实际调试的。
最终生成截图效果
总结：项目没什么难度，但是对于数据流转，尤其是和indexBD的数据交换，还是比较容易出错的，最后就是项目打包时，由于是需要部署到github上，并非服务跟目录，所以打包时vite配置需要选择相对路径。
体验还是很不错的，有兴趣的同学可以在线看一下。