大空间消毒机

技术选型

• 本项目采用的 vue3 + vite + js 脚手架搭建
• 包管理工具为 Yarn

代码规范

随着团队的不断扩大，每个人都有自己的 coding 风格，但是如果一个项目中的代码存在多种风格，那对于代码的可维护性和可读性都大大减少，所以说一个项目规范对于前端团队来说很重要。

Prettier

1、vscode插件 --- Prettier - Code formatter
2、.prettierrc文件

全局状态管理

使用 pinia

UI 框架

https://tdesign.tencent.com/

- 桌面端
    - Vue Next for Web
    - https://tdesign.tencent.com/vue-next/getting-started
- 移动端
    - Vue3 for Mobile
    - https://tdesign.tencent.com/mobile-vue/getting-started

axios 封装

src/service

• 灵活的拦截器；
• 可以创建多个实例，灵活根据项目进行调整；
• 每个实例，或者说每个接口都可以灵活配置请求头、超时时间等；
• 取消请求（可以根据 url 取消单个请求也可以取消全部请求）。

项目结构

├─node_modules // 依赖包
├─public
└─src
    ├─api // 请求方法
    ├─assets // 静态资源
    │  └─scss // scss文件
    |    └─globalMixin.scss // 全局mixin
    |    └─globalVar.scss // 全局样式变量
    ├─components // 组件
    ├─router // 路由
    ├─service // 封装的工具类
    ├─store // 全局状态管理
    │  └─modules // 分modules
    ├─views // 视图
    ├─App.vue // 项目根组件
    ├─main.js // 项目入口yarn
    └─style.scss // 全局样式

启动方式

yarn
yarn dev

# 工控机浏览器打开右键菜单
touch /var/zapp_flag/chrome_in_test_mode