我的前端之路
关于我
从0~1的实践:小箱单智造·Min Work
项目从 2022.10 开始，从人员的招聘，业务技术调研，团队内部工程化落地，从零到一的技术搭建，后期用户体验的优化（性能优化），项目实地部署（稳定性治理）。这也是我职业生涯中第一次深刻理解到，一个互联网产品的诞生与成长。
没有到齐的吗喽合影 
项目业务背景
小箱单是针对中小制造业,以管控仓库物流、车间管理透明化、规范业务流程为目标，打造以现场驱动、聚焦场内物流的全链路执行系统。
两端控制:管理人员通过web端管理人、物、箱、路线，通过权限控制，定制作业路线，展示可视化报表；操作人员通过小程序/PDA实现物料装箱/搬运/报工等功能。
Vue3 + Vue-Router + Pina + Vite + Vitest + AntDv / 微信原⽣⼩程序
难点和亮点
【12个业务组件封装】
自定义键盘组件：用户年龄定位四五十岁，手机默认的数字输入键盘太小，自定义封装了大号计算器键盘全局使用，并针对需求切换是否为小数点键盘，且需要考虑到有的表单是否携带默认值和自定义校验；
扫码组件：针对箱子上的二维码，在管理端使用qrcode生态库配置对应的信息二维码展示字段，使用html2canvas实现预览功能；调取打印机打印二维码；小程序基于原生camera封装了扫码组件，可以扫取web端生成的二维码，自动填入箱单信息，存入扫描记录；
还有各类表格组件、标签组件、底部状态栏等通用公共组件，提高了团队开发效率。
【接近 lowCode 的实践】
web端自定义配置页面的拖拽点击自定义选项，渲染表单，并把配置好的页面展示在小程序页面中，是一次接近 lowCode 实践（通过拖拽方式 渲染页面 组件库 如何存起来 如何渲染，针对这个我会总结一篇文章）。
边缘计算盒(AIoT)
vue3.0+TypeScript+Vite
尤大大在 vue3.0 beta 直播中推荐了 vite 工具，强调是针对 vue 单页面组件的无打包开发服务器，快速冷启动服务器、即时热模块更换（HMR） 、真正的按需编译。很新颖，我决定用它来搭建一个 vue3 项目。
使用 vite 搭建项目；
npm init vite-app安装 typescript、vue-router@next、axios、sass 等相关插件；
eslint + stylelint + commitlint + husky 前端编码规范工程化的实践；
并封装了通用组件：
当数据可视化遇上疫情：测温大屏的开发之旅
Vue2 + Vuex + webpack + echarts + Cypress
疫情期间，本测温大屏一体机集成刷脸识别与体温检测功能，实时展示访客体温是否异常，为防疫数据大屏提供可视化支持。
与公司项目组的算法工程师、后端开发工程师联合开发，我觉得比较有意思的地方是接口联调，加入了算法接口；另外大屏的数据展示也需要前端开发对浏览器性能的优化+可视化图形转化能力。
对于前端工程师来说，数据可视化也是非常重要的能力。推荐《The Grammar of Graphics》，⼀套⽤来描述所有统计图形深层特性的语法规则，该语法回答了『什么是统 计图形』这⼀问题，以⾃底向上的⽅式组织最基本的元素形成更⾼级的元素。
跨端开发的安卓平板
uni-app + HbuilderX + Android Studio
作为一次跨端开发的尝试，我基于 uni-app 框架在 HBuilderX 中完成了安卓平板 App 的前端逻辑与界面开发，并借助 Android Studio 打包生成应用外壳，最终通过数据线连接设备完成安装调试。
此前我的工作主要围绕 Web 前端展开，App 开发对我而言是一次全新的挑战——从浏览器环境延伸到移动端，既要适配平板的交互与性能，又要理解原生打包的流程。这次实践让我更深入地体会到跨端框架的灵活性与局限性，也为后续探索移动端开发展开了更多可能。
国际网站开发
此项目是采用 wordpress 前后端一体的方法，当时有和产品讨论用 vuepress 技术，但由于面向海外市场，后期方便功能性维护，插件更丰富的 wordpress 更合适， 前端开发使用的是原生三剑客——html+css+javascript。设计师是一个澳大利亚人，很有趣，感谢他会说中文。
cocoscreator2D+Typescript 小游戏
工作之余，我依然热衷于“用代码造物”的探索。最近用 Cocos Creator 2D 独立完成了一款网页小游戏（3D 还在学习清单上排队，迟早会捡起来💪）。 在我看来，游戏开发是前端能力的自然延伸——同样是逻辑梳理与文档啃透，但多了一份“让静态方法变成动态体验”的魔法。将方法论注入生动的游戏动作，这个过程本身就充满挑战与成就感。
项目的完整开发流程已开源在 GitHub 仓库，并会持续更新。欢迎来逛逛，一起交流前端与游戏交汇的乐趣～
联系方式
邮箱：lumang7520@126.com