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