disinfection_high_front_end/README.md

# 大空间消毒机

# 技术选型

- 本项目采用的 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 取消单个请求也可以取消全部请求）。

# 项目结构

```javascript
├─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 // 全局样式
```

# 启动方式

```bash
yarn
yarn dev

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