第1周：项目初始化与UI框架搭建

前言本周核心任务——项目初始化UI框架搭建背景补充简要说明项目整体目标如搭建个人博客/管理系统等本周作为项目启动第一周的核心价值预期成果项目结构规范、UI骨架成型、可正常运行展示基础页面一、本周核心任务拆解1.1 核心任务总览完成项目初始化配置搭建符合项目需求的UI基础框架确保布局合理、样式统一、可扩展性强实现诗文研习平台首页、模块选择页、模块介绍页及用户中心抽屉的页面布局与基础样式保证页面交互流畅、视觉效果贴合教育主题同时完成基础功能的初步调试确保页面可正常访问。1.2 具体细分任务项目环境搭建配置Vue3Element Plus开发环境安装所需依赖路由、图标库等完成项目目录结构规划。基础页面开发搭建首页Hero首屏、模块选择页、模块介绍页3个核心页面的布局实现页面滚动切换交互效果。UI组件实现开发固定顶栏、用户中心抽屉、模块卡片、解析卡片等核心UI组件确保组件样式统一、可复用。样式优化统一页面配色、字体、间距优化组件hover、动画效果提升页面视觉质感贴合诗文研习平台的温润科技风。基础功能调试验证页面滚动切换、用户抽屉开关、模块卡片点击等基础交互的可用性确保无报错、页面正常渲染。UI组件库引入与主题定制引入Element Plus UI组件库结合项目“温润科技风”主题定制全局主题样式包括配色、字体、组件圆角等确保组件样式与项目主题高度契合。全局路由与状态管理设计设计项目全局路由结构配置路由守卫实现页面跳转权限控制搭建Vuex/Pinia状态管理模式管理用户状态、页面状态等全局数据确保数据统一管理与高效复用。前端代码规范制定结合项目开发需求制定统一的前端代码规范包括ESLint、Prettier配置细化、代码命名规范、组件开发规范、注释规范等确保团队开发代码格式统一、可读性强、便于维护。二、项目初始化过程2.1 环境搭建开发工具VS Code | IDEA | MongoDB技术栈jdk17maven 3.9.10node.js 22.18.0环境配置下载mongodb 点击图示右下方新建数据库数据库命名WenXin同时新建名为user的集合点击图示号新建poem和conversation集合2.项目部署打开idea选择来自版本控制的项目粘贴https://gitee.com/JLuuu/wen-xin.git并克隆3.项目运行运行CommonApplication与PoemApplicationfront文件夹使用VsCode打开终端运行npm install命令若无报错运行npm run serve命令打开链接2.2 初始化验证无报错基础页面可正常访问三、UI框架搭建核心过程3.1 UI框架设计思路结合诗文研习平台的主题定位采用“温润科技风”设计兼顾古典韵味与现代UI美感布局上采用“固定顶栏全屏滚动页面”的结构确保页面层次清晰、交互流畅组件设计遵循“可复用、可扩展”原则基于引入的Element Plus组件库定制主题核心组件顶栏、抽屉、卡片统一样式规范便于后续功能迭代和维护配色以蓝紫色系为主贴合诗文雅致氛围搭配白色背景提升页面清爽度重点模块通过阴影、渐变突出层次感同时配合全局路由与状态管理保障页面跳转与数据管理的流畅性。3.2 核心模块设计固定顶栏模块实现Logo标题展示、导航链接首页、模块选择、模块介绍、用户中心触发器添加背景渐变和模糊效果提升视觉质感导航链接添加active状态标识优化hover交互。用户中心抽屉采用右侧滑出式抽屉实现用户头像真实头像/默认首字母头像、用户名、状态展示添加登录/退出登录、联系客服、关于平台等操作菜单绑定点击事件确保交互正常。全屏滚动页面搭建3个核心页面Hero首屏、模块选择页、模块介绍页实现鼠标滚轮控制页面切换添加过渡动画提升页面切换流畅度首屏突出“文心雕龙”主题模块选择页采用卡片式布局模块介绍页通过分栏卡片展示模块详情。核心卡片组件设计模块选择卡片、模块解析卡片添加hover上浮、阴影加深效果区分古诗词和现代文模块的配色确保视觉区分度卡片内部布局统一包含图标、标题、描述提升页面一致性。3.3 关键问题与解决方案问题1页面滚动切换时出现卡顿、动画不流畅解决方案优化过渡动画时长设置为0.8s采用cubic-bezier缓动函数关闭页面多余渲染确保滚动事件触发时无冗余操作提升切换流畅度。问题2原生滚动与页面滑动效果冲突解决方案禁用页面原生滚动通过自定义滚动逻辑替代原生滚动结合页面滑动交互需求封装专属滚动方法确保页面滑动效果流畅彻底解决两者冲突问题。核心代码问题3组件样式不统一视觉杂乱解决方案提取全局样式变量统一字体、颜色、间距、圆角封装公共样式类所有组件复用统一样式确保页面视觉一致性。四、本周成果展示1. 完成项目初始化搭建Vue3Element Plus开发环境项目目录结构规范无报错基础页面可正常访问2. 落地UI基础框架完成3个核心页面首页、模块选择页、模块介绍页的布局与样式开发页面滚动切换流畅视觉效果贴合项目主题3. 实现核心UI组件固定顶栏、用户抽屉、模块卡片、解析卡片的开发与复用组件交互正常样式统一4. 完成基础交互功能调试包括页面滚动切换、用户抽屉开关、导航栏active状态切换、模块卡片点击提示等确保功能可用5. 优化页面响应式适配确保在不同屏幕尺寸下布局合理提升用户体验最终实现的页面可直接用于后续功能开发符合项目初期规划要求。五、遇到的问题与反思5.1 主要问题对Element Plus组件的细节配置不够熟悉开发用户抽屉时出现抽屉头部样式错乱、图标显示异常的问题花费额外时间调试页面动画优化经验不足初期滚动切换时出现卡顿、动画衔接不自然的情况对缓动函数的选择和动画时长的设置不够精准样式复用性考虑不够全面初期部分组件样式单独编写未提取公共样式导致后期修改时需要逐一调整效率较低5.2 反思与改进方向加强Element Plus组件的学习重点掌握常用组件的细节配置和自定义样式方法开发前先查阅官方文档避免重复踩坑提升开发效率学习前端动画优化技巧熟悉不同缓动函数的应用场景合理设置动画时长结合实际效果反复调试提升页面交互质感注重样式复用性开发初期提取全局样式变量和公共样式类组件样式统一基于公共样式扩展减少冗余代码便于后期维护和修改六、下周计划登录 / 注册界面开发完成登录页、注册页的开发确保视觉风格与项目统一、交互体验流畅实现完整的表单校验、输入状态联动、页面权限控制。规划后续开发梳理学习模块的核心功能需求制定详细的开发计划为下周后续功能开发奠定基础。