vue3+ts 开发系统 -目录结构

开发系统的部分问题与笔记
系统使用vue3+ts进行开发，ui库使用element-ui，使用echarts进行图表绘制。

构建目录结构

• assets: 静态目录，存放图标与必需小图
  • icons
  • image
• components: 组件目录
  • public
• layout: 页面公共header / footer
• styles: 存储全局less变量
• plugins: 插件列表
• router: 路由
• store: 全局存储
• type: 全局类型
• utils: 工具目录
  • services: fetch api
  • helper: 工具函数
  • storage: 本地存储函数目录

echarts使用

• echarts为图标库，yard add echarts，配置options后可使用图表。
• 本系统使用v-5.3-echarts，参考apache echarts 使用
• 建议是粗略了解功能后直接查看所需图标的配置项，直接使用实例code无法达到图例效果。另5.3版本直接使用无法产生适配，屏幕宽窄变化时图不会重绘，需通过监听事件手动触发图重绘，其他版本未知。

element-ui

• 结合文档使用即可，使用element-v3。

svg使用

• 本系统曾打算使用svg图标，vite中使用svg可通过增加svg文件编译插件和增加svgIcon组件的方式实现简便从icons/svg目录下获得svg，但本系统中使用element-icon可完成绝大部分需求功能，感觉成本大于收益，遂放弃。

列表和列表项的使用与适配

• 系统中显示列表，希望有宽屏显示三列，中屏显示两列，窄屏显示1列的效果。（简称list和item）
• 先前实现：宽屏逐渐适应窄屏，适配规则写在item的less中。
• 缺陷：后续详情页需使用item组件，适配规则出现问题。
• 问题：1. 适配规则应该写入list的less中，item仅仅只是组成项，不应在其中调整样式，除非确定整个系统中的item的适配性。2. 建议从最小宽度适配，再通过媒体查询适配宽屏。本需求中，宽屏使用三列显示，item外部container宽度应为 33%（list中使用flex布局），从宽屏适配，未来使用到item组件时需要从33%重新调整宽度，但外部使用通常时每次都需从100%开始调整适配，不易理解，建议默认小屏，再从窄到宽的min-width进行适配。

coding时常忘记总结blog，希望未来多加注意。