项目基本技术栈

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