95 lines
2.1 KiB
Markdown
95 lines
2.1 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` 目录。
|
||
|
||
### 方式 1: 使用 Vercel（推荐）
|
||
|
||
1. 安装 Vercel CLI：
|
||
```bash
|
||
npm install -g vercel
|
||
```
|
||
|
||
2. 在项目目录运行：
|
||
```bash
|
||
cd /Users/gavin/monitor
|
||
vercel
|
||
```
|
||
|
||
3. 按照提示操作即可完成部署
|
||
|
||
### 方式 2: 使用 Netlify
|
||
|
||
1. 安装 Netlify CLI：
|
||
```bash
|
||
npm install -g netlify-cli
|
||
```
|
||
|
||
2. 部署：
|
||
```bash
|
||
cd /Users/gavin/monitor
|
||
netlify deploy --prod --dir=dist
|
||
```
|
||
|
||
### 方式 3: 使用 GitHub Pages
|
||
|
||
1. 创建 GitHub 仓库并推送代码
|
||
2. 在项目根目录创建 `.github/workflows/deploy.yml`
|
||
3. 配置自动部署工作流
|
||
4. 推送后自动部署到 GitHub Pages
|
||
|
||
### 方式 4: 上传到传统服务器
|
||
|
||
将 `dist` 目录下的所有文件上传到你的 Web 服务器（Apache/Nginx）的网站根目录即可。
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
/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 动画
|