金色摇篮项目总结示例
概述
新员工入职的考核项目，主要是让自己发现自己的不足并补全不足，然后公司根据员工水平再分配合适的任务给员工。
成员
- 梁天誉
时间计划
| 开始时间 | 结束时间 | 阶段目标 |
|---|---|---|
| 2021/9/22 | 2021/9/26 | 完成金色摇篮项目 |
成果展示
https://gitee.com/ltyweb/golden-cradle.git
完成情况
| 预期 | 实际 | 描述 |
|---|---|---|
| 用3天时间完美复刻项目 | 4天勉强完成项目 | 技术不够硬，细节不到位 |
完成的挑战
| 挑战 | 解决办法 |
|---|---|
| 做移动端适配 | 使用rem |
| 使用rem需要频繁计算 | 使用vscode的px2rem插件 |
| 使用ps查看切图效果不好 | 使用pxcook查看切图 |
| 切图的图片是散开的 | 使用ps把图片合并再转为png |
| 没接触过nuxt框架 | 查看官方文档并简单使用 |
| chrome浏览器的最小字体为12px | 使用transform: scale()把元素缩小 |
| 回家无聊想继续打代码 | 把项目上传到gitee |
| 使用transform: scale()位置改变 | 使用margin负值进行调整 |
| 设置了inline-block元素间会有间隙 | 父元素设置font-size: 0，在元素中设置字体大小，本质是空白符引起 |
| 元素上下间隙过大 | 设置元素的line-height调整 |
未解决的问题
| 把项目重复的模块组件化 |
|---|
| 加入各种动画效果 |
| 把模块做成根据内容自适应调配 |
| 图片原生的大小不同，如何把其设置成同等大小且不变形 |
| chrome浏览器设置字体小于12px除了transform如何实现 |
| css和html的class命名不够规范 |
| vue可利用路由实现一页面嵌入路由组件，nuxt如何实现 |
| 使用的绝对布局有点多，如果子元素字数过多会造成不同元素的互相覆盖 |
| 代码打的少，项目经验不足 |
| 项目的结构掌握不熟练，不知道如何拆分项目成不同的部分，单个文件的代码量过大 |
经验总结
项目的变量命名要慎重，这样如果以后要复制或做成组件少很多麻烦；
移动端尽量使用vw、rem等百分比设置页面；
使用切图时，先想好效果如何实现再写代码，避免发现不对要把代码删完重打；
设置页面时要注意各种浏览器的不同特点，尽可能的做兼容处理。