【项目前端】中后台框架feature点及问题点总结｜青训营笔记

Freaky_Forward
91 阅读4分钟

这是我参与「第四届青训营」笔记创作活动的第18天。

Random just fine 团队内容产出

前端项目feature点：

  • 主要feature点：

    • 青训营期间自建的前端中后台框架

      • 主体技术栈：TS + Vue3.3 + pinia + Mock.js + WindiCSS + SCSS，及vue3、vite相关生态
      • 特性支持： SCSS、JSX/TSX、ElementPlus组件与样式自动声明与导入，基于vite插件的vue3组件自动声明与导入。使用前端前沿技术栈，集成开发提效的vite社区轮子，提供良好开发体验基础
      • 依赖独立库：Echarts、Animate.css 、 vueuse、vanta.js

    • 页面三端自适应特性及其相关与附加的feature点

      • ErrorPreviewPage在移动端模式下通过悬浮按钮打开事件列表栏
      • 贯穿于应用程序生命周期的屏幕Resize事件监听效果实现

    • MainLayout部分的固定导航栏模式选择

      • 固定模式下，可见毛玻璃拟态的Header栏下的DOM流动
      • 基于flex布局，宽度可随页面自适应或根据菜单宽度选择变化的Header栏

    • 自封装用于扩展加密传输功能的WebCrypto模块

      • 用于监控数据传输的RSA+AES加密传输方案，兼顾速度与安全性
      • 主要用于加密用户密码等场景，仅需单向确认的bcrypt散列加密算法支持
      • md5、RSA1等初级散列加密算法，用于支持文件分段上传，文件完整性等场景需要

    • 友好的用户提示，动态的展示效果

      • 对关键性能指标等字段的tooltips
      • 按钮rotate，CSS动画移入移出，增加页面动态展示效果

    • 仿fundebug的两栏数据展示页面及优化

      • 左栏为错误事件列表，右栏为选中事件的详细信息展示，右栏数据内容随左侧选定列表项进行实时变化
      • 原生实现的列表展示栏及选中与脱选后展现的CSS样式
      • Performance检测数据的JSON形式统展
      • 基本信息页根据屏幕宽度自动选用两栏或单栏形式展示

    • 基于mock本地存储方式实现的用户管理页面

      • 根据条件筛选、增删改查等基础功能的mock实现

    • 动态背景

      • 解决vanta在vue3中的使用方式问题与全屏模式下失效与报错问题

    • 多级路由缓存技术实现

      • 二级路由转路由树，路由树转二级路由

  • 次要feature点：

    • 页面元素的过度动画
    • setting中设置可贯穿于项目的主题色，提供预设颜色主题
    • 全屏模式、黑暗模式、可动态实时调整的sidebar菜单栏宽度，及其余devoptions
    • 应用个性化设置数据持久化
    • 基于vite功能支持的mock模块导入与集成

\

页面概况展示：

前端开发过程中遇到的问题点：（基本解决）

  • 样式管理：

    • SCSS可否与WindiCSS混用？使用SCSS管理WindiCSS样式？
    • 为何v-bind()无法在:global选择器中使用？（未解决） *： 请注意：新版本中可在vue3style语法块中使用v-bind动态绑定JS中变量作为CSS输入。
    • 如何实现、设计和展现出带有观感良好的全局黑暗模式样式？（弃坑）（未解决）

  • 异步数据展示：

    • Vue3的DOM异步更新机制下，如何高效批量更新DOM数据段？（寻求最佳实践）
    • 父组件异步获得的数据，如何传递给子组件进行展示？最佳实践？（寻求最佳实践） （涉及父子组件生命周期关系）

  • 页面展示：

    • ErrorPreviewPage

      • 如何原生实现数据列表？
      • 使用何种方式获取数据列表承载的数据内容？冒泡事件捕获？事件监听代理？（寻求最佳实践）
      • 如何实现列表项选中与非选中状态的CSS样式变化？
      • 如何解决由于采用了Flex布局（原先设计思路上出于适配性的需要），Info-content中的内容，在内容量增加时，会自动扩张宽度，导致sidebar部分不断随ErrorPreview页面的宽度变化的问题？（寻求最佳实践）

    • Header

      • 如何实现header在固定导航栏情况下，实现DOM元素滚动在其底层可见？（Header玻璃拟态）
      • 如何在满足第一条件情况下，保持Header宽度动态可变特性？

    • Sidebar

      • 如何实现sidebar根据开关从左侧移入移出效果？TranslateX？
      • 要求满足第一条件情况下，右侧内容可根据左侧移入移出状态动态填补sidebar空缺

    • Layout

      • 如何实现应用全生命周期实时对Resize事件发生做出反应？

  • 项目设置配置：

    • vite全局引入SCSS文件
    • 报错无node path模块
    • Vite unplugin-auto-import插件组件自动声明功能无效
    • 位于views文件夹下的vue文件没有被自动导入，unplugin-vue-component插件不起作用
    • vite升级，mock服务无法通过过去import.meta.globEager方式进行全模块引入
avatar
文章
阅读
粉丝