邓郭龙

项目经历

1. 基于 React 的叶子记账应用

   项目预览 源码链接

   技术栈： React TypeScript Vite UnoCSS

   • 项目描述：

   • 这是一款基于 React / TypeScript / Vite / UnoCSS 构建的记账应用，使用了 React Hooks, React Router,Zustand 等工具库，构建的单页面记账页面

     用户可以进行日常生活中各项收支流水的记录，同时可以对记录进行分类，添加标签功能，方便用户对记录进行分类管理， 同时可以对记录进行统计分析，查看收支情况，具备信息可视化查看功能

     用户记录的各项数据通过 Ruby on Rails 后端 提供的 API 进行数据的获取和存储

     可适配手机、平板、PC 端，同时具备响应式布局，适配不同分辨率的设备，提升用户体验

     主要页面有：登录页面、记账页面、新增标签页面、统计页面、记账信息可视化页面

     记账数据可以查看本月、上月、今年以及自定义时间的收支情况，同时可以查看本月、上月、两月前的收支情况的饼图、折线图

     项目构建过程中，我深入理解了和实践了 React 和 TypeScript 的使用方法，同时也对 React Hooks 和 React Router 等工具库有了更深的理解

   • 项目经验：

   • 使用 ReactRouter 来做路由鉴权和路由守卫，使用 Zustand 来做全局状态管理

     主要采用了 UnoCSS 和 styled-component CSS技术方案，由于 UnoCSS 是静态渲染的，所以还采用了 styled-component 来应对动态渲染 CSS 的情况

     为了适配移动端浏览器，放弃了全屏，使用 vh-check 来整高度，使页面刚好填满画面

     在没有后端 api 的情况下，用 Mock 和 fakerjs 来模拟请求数据

     使用 JWT 来做登录鉴权，封装了 useAjax Hooks 让拦截器读取JWT，进行统一的错误处理和自动Loading，使用 errorElement + loader 实现路由守卫

     使用 SWR 来优化数据请求，用 useSWRInfinite 实现无限加载数据

     可视化部分引入 Echarts 模块，实现了折线图和饼图两种数据的可视化

     提升网站性能方面，采用动态 import 和 Code Splitting 项目使用动态 import + suspense 来动态加载组件,用 manualChunks 对 Echarts 和 node_modules 进行手动分块，大大提高了网站的加载速度

     后端接口方面使用 Ruby on Rails 实现，使用 rspec 进行测试驱动开发，用户数据使用 PostgreSQL 存储

2. 基于 Vue3 的叶子记账应用

   项目预览 源码链接

   技术栈： Vue3 TSX Vite

   • 项目描述：

   • 本项目是本人为了提升自己的技术能力而做的项目，为了技术提升，所以本项目采用了之前不常用的技术栈 Vue3 / TSX / Vite 构建的记账应用， 使用了 Vue Router, Pinia 等工具库

     用户可以进行日常生活中各项收支流水的记录，同时可以对记录进行分类，添加标签功能，方便用户对记录进行分类管理， 同时可以对记录进行统计分析，查看收支情况，具备信息可视化查看功能

     用户记录的各项数据通过 Ruby on Rails 后端提供的 API 进行数据的请求和存储

     可适配手机、平板、PC 端，同时具备响应式布局，适配不同分辨率的设备，提升用户体验

     主要页面有：登录页面、记账页面、新增和删除标签页面、统计页面、记账信息可视化页面

     记账数据可以查看本月、上月、今年以及自定义时间的收支情况，同时可以查看本月、上月及定义时间的收支情况的饼图、折线图

     项目构建过程中，我深入理解了和实践了 Vue 3 Composition API 和 如何在 Vue 中使用 TSX，同时也对 Vue Router 和 Pinia 等工具库有了深入的理解

   • 项目经验：

   • 使用 VueRouter 来做路由鉴权和路由守卫，使用 Pinia 来做全局状态管理

     主要采用了 CSS Modules 的技术方案来实现 CSS 渲染

     使用 JWT 来做登录鉴权，封装了 Axios 实现自动Loading，自动的路由守卫，使用 beforeEach 做登录的权限控制

     项目大量使用插槽和 v-model 来减少代码重复

     使用 Echarts 实现可视化，引入 Vant UI 实现一些功能复杂的组件

     使用自制 Vite SVG Sprites 插件优化 svg图片，将多个 svg 图片变成一个大的 svg

     在没有后端 API 的情况下，使用 Mock 和 fakerjs 来模拟请求数据

     性能优化方面，dynamic import 和 Rollup chunk 优化，然后进行条件编译，减少不同环境下的代码量

3. 基于 React 的大屏可视化

   项目预览 源码链接

   技术栈： React TypeScript Echarts

   • 项目描述：

   • 这是一款基于 React / TypeScript / Echarts 构建的大屏可视化界面

     页面将 Grid 布局和 Flex 布局结合起来，实现了页面的响应式布局

     并且使用 Echarts 来实现数据可视化，实现了数据的实时更新

     页面采用了动态rem的方案，来适配所有屏幕

     项目中包含的图例有柱形图，折线图，饼图，地图等，并且所有图例 都可以实时更新数据并辅以动画交互

   • 项目经验：

   • 项目使用了echarts来实现数据的可视化，了解了 Echarts 的属性如何控制图表的样式

     采用动态rem的方案来适配各种尺寸的屏幕，保持页面始终上下居中，左右居中

     放弃使用像素，编写了一个 px() 函数来适配所有 div

     通过这个项目，我掌握了大屏可视化项目的制作技巧

4. 基于 Vue 3 的 Gulu-UI 框架

   项目预览 源码链接

   技术栈： Vue3 TypeScript Vite

   • 项目描述：

   • 这是一款基于 Vue3 / TypeScript / Vite 开发的 UI 框架

     目前仅有四种不同的组件 Switch 组件，Button 组件，Dialog 组件，Tabs 组件， 但我可能会在以后添加更多，它可以在 npm 上下载安装

     组件样式采用了简洁风的设计，简单易用，组件源代码也非常简洁，文档中也有良好的代码提示

     UI组件封装过程中，让我对 Vue3 composition API 有了深入的理解，对 TypeScript 规范有了新的认识

   • 项目经验：

   • 使用 Vite 前端开发工具进行构建，其对于 Vue3 和 TypeScript 组合支持性极佳，开盒即用，项目构建快捷高效， 开发工程中项目各个组件拆分合理，分析需求，分解思路清晰，可实现高效模块化编程

     使用 VueRouter 搭建 SFC 单文件应用，避免发送不必要的服务器请求，降低负担

     Vue 3有许多新特性，其中最突出的一点就是组合式 API，围绕 setup 入口函数进行编程，打破 Vue 2 的模板语法固有模式 同时两者也可以结合使用

     编写这个库的过程是一个非常有价值的学习经历，我遇到了一些之前从未遇到过的问题，比如如何使用函数打开对话框窗口， 对话框元素应该放在DOM中的哪个位置， 如何对CSS进行结构化，以避免用户创建组件时出现问题