前端架构要点(vue3框架下)

60 阅读1分钟

关注点分离,模块化,是架构的核心。
架构需要维护,重构,保持精简,防止架构腐化。

1、数据层分离(最重要的点)

1.1)API层抽离,
1.2)利用hooks实现数据逻辑的封装,
1.3)利用pinia实现状态的集中管理,
1.4)hooks(带响应式数据),methods(带api数据),utils(纯函数)结合使用,
1.5)数据校验,

2、组件通信

2.1)基础组件用props,
2.2)祖孙组件用provide,inject
2.3)业务组件用pinia,

3、全局样式(节省大量研发精力)

需要结合UI规范(没有规范的引导设计师出一套规范。)
3.1)封装全局样式类,
3.2)封装基础组件,
3.3)用scoped还是css module要想好,
3.4)弹窗,提示,加载

4、适配(4k, 2k)

5、配置信息

环境变量,
其他配置,

其他

  • 按领域来组织文件;
  • 文件,组件要短小精悍;
  • 利用引擎,声明式,配置式,而不是命令式;
  • axios封装,
  • 错误处理,