54 lines
1.2 KiB
Markdown
54 lines
1.2 KiB
Markdown
# 火情监控全链路业务监控视图
|
||
|
||
Vue 3 + TypeScript 开发的监控视图展示项目，带有动态流动效果的连线动画。
|
||
|
||
## 项目特点
|
||
|
||
- 使用 Vue 3 + TypeScript + Vite 构建
|
||
- 连线流动动画效果（8-12秒循环）
|
||
- 红色线条使用 #EB5017 颜色流动
|
||
|
||
## 本地开发
|
||
|
||
```bash
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 启动开发服务器
|
||
npm run dev
|
||
|
||
# 构建生产版本
|
||
npm run build
|
||
|
||
# 预览生产版本
|
||
npm run preview
|
||
```
|
||
|
||
## 部署到网站
|
||
|
||
项目已构建完成，生产文件位于 `dist` 目录。
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
/Users/gavin/monitor/
|
||
├── dist/ # 生产构建文件（可直接部署）
|
||
├── src/
|
||
│ ├── App.vue # 主组件（包含动画逻辑）
|
||
│ ├── main.ts # 入口文件
|
||
│ ├── style.css # 全局样式
|
||
│ └── vite-env.d.ts # TypeScript 类型定义
|
||
├── index.html # HTML 模板
|
||
├── monitor.svg # 监控视图 SVG 文件
|
||
├── package.json # 项目配置
|
||
├── tsconfig.json # TypeScript 配置
|
||
└── vite.config.ts # Vite 配置
|
||
```
|
||
|
||
## 技术栈
|
||
|
||
- Vue 3
|
||
- TypeScript
|
||
- Vite
|
||
- CSS3 动画
|