项目基本技术栈

vue3 native-ui axios pinia vue-router tailwindcss echarts

建议使用vue文件格式开发 如果遇到 大量native-ui内部插槽 使用jsx 更合适
建议使用ts开发 代码提示更友好

文件结构

在 Windows 下可使用如下命令生成当前目录的文件树：

``
tree /f > tree.txt
`

- /f 参数表示显示所有文件。
- 结果会输出到 tree.txt` 文件中。

项目外部引入工具函数

lodash-es
mitt
gasp
dayjs
chimee - 视频流播放 (可选)
autofit.js - 自动缩放

工厂相关库

oceanx-components
@zkqh/c2d
@zkqh/c3d

对一些 问题的解决方案

- docx ppt pdf 预览 : @vue-office
- 自适应大小 : autofit.js
- 简单增删改 : 工厂组件 oceanx-components
- canvas 画图: @zkqh/c3d @zkqh/c2d
- 视频流播放 :chimee chimee-player
- 复杂动画 : gasp
- 图标 :echart
- 文字转拼音 :pinyin-pro
- 清除浏览器默认样式:reset-css

一些小注意点

- 其实不太需要环境变量 测试环境也是前后端一块部署 看情况 不过为了统一管理变量值可以使用
- 导入时尽量使用别名导入 迁移文件的成本比较低
- 使用vite最好直接使用对应导出的文件(如果index暴露的其他文件没有用到的话)
- package中的依赖的版本都需要使用准确版本
- 文件使用了ts开发 可以减少一些错误 并且及时提示 如果想用tsx可以直接 在vue文件中更改lang的类型 无缝切换 并且在vue文件中的样式代码存在样式隔离
- 项目使用font-class 引用对应的图标 (可以理解是一种字体) 方便改变其颜色和渐变
- 如果使用svg可以使用svg-icon组件 采用的是引入svg的raw文件然后替换对应的fill 如果是渐变的话添加对应的额defs