Vue3 大屏可视化平台环境搭建

环境要求

在开始之前，请确保您的系统满足以下要求：

Node.js >= 16.0.0
npm >= 7.0.0 或 pnpm >= 6.0.0

1. 安装 Node.js 环境

如果您还未安装 Node.js，请参考 NVM及NODE开发环境搭建进行安装。

验证安装：

node -v
npm -v

2. 克隆项目

git clone https://github.com/znlgis/vue3-map-dashboard.git
cd vue3-map-dashboard

3. 安装依赖

使用 npm：

npm install

或使用 pnpm：

pnpm install

4. 配置 API 密钥

在运行项目之前，必须配置以下 API 密钥：

4.1 天地图 API Key

访问天地图开放平台
注册并登录账号
创建应用获取 API Key（选择”浏览器端”）
打开 src/config/map.config.js
在 MAP_CONFIG.key 中填入你的密钥：

export const MAP_CONFIG = {
  key: "你的天地图API密钥", // 替换这里
  center: [105.0, 35.0],
  zoom: 5,
  minZoom: 5,
  maxZoom: 18,
  mapType: "vec",
  showLabel: true
}

4.2 和风天气 API Key

访问和风天气开发平台
注册并创建项目
在”项目管理”中创建应用，选择”Web API”
获取 API Key
打开 src/config/map.config.js
在 WEATHER_CONFIG 中配置：

export const WEATHER_CONFIG = {
  key: "你的和风天气API密钥", // 替换这里
  baseUrl: "https://devapi.qweather.com/v7", // 免费订阅使用此地址
  // 如果是付费订阅，使用自定义域名，例如：
  // baseUrl: "https://你的自定义域名.qweatherapi.com/v7",
  lang: "zh",
}

提示：

天地图和和风天气都提供免费额度，足够开发和演示使用
生产环境建议使用付费订阅以获得更高的调用限额
请勿将 API 密钥提交到公开仓库

5. 项目配置说明

5.1 性能和功能配置

配置文件： src/config/dashboard.config.js

export const DASHBOARD_PERFORMANCE_CONFIG = {
  // 人员位置更新配置
  personnel: {
    updateInterval: 1000,       // 位置更新间隔（毫秒）
    enableAutoUpdate: true,     // 是否启用自动更新
  },
  
  // 天气更新配置
  weather: {
    updateInterval: 300000,     // 天气更新间隔（5分钟）
    cacheTimeout: 600000,       // 缓存超时时间（10分钟）
    retryAttempts: 3,           // 失败重试次数
  },
  
  // 日志配置
  logging: {
    enableConsoleLog: true,     // 是否启用控制台日志
    logLevel: 'info',           // 日志级别：debug/info/warn/error
  },
  
  // 缓存配置
  cache: {
    enableCache: true,          // 是否启用缓存
    maxCacheSize: 100,          // 最大缓存条目数
  },
}

5.2 主题配置

配置文件： src/config/theme.config.js

export const THEME_CONFIG = {
  primaryColor: '#2C58A6',      // 主色调
  backgroundColor: '#001d58',    // 背景色
  cardBgColor: '#034c6a',       // 卡片背景色
  borderColor: '#2C58A6',       // 边框颜色
  textColor: '#ffffff',         // 文字颜色
  chartColors: [                // 图表颜色系列
    '#5490CB', '#63B2EE', '#76DA91', 
    // ...更多颜色
  ]
}

5.3 大屏配置

配置文件： src/config/index.js

export const DASHBOARD_CONFIG = {
  title: '基于VUE3的大屏',      // 大屏标题
  menuItems: [                   // 顶部菜单项
    { label: '视频监控', path: '/video' },
    // ...更多菜单
  ]
}

环境变量说明

Vite 提供的环境变量：

import.meta.env.DEV - 开发环境为 true
import.meta.env.PROD - 生产环境为 true
import.meta.env.MODE - 当前模式（development/production）

使用示例：

const config = import.meta.env.PROD ? PROD_CONFIG : DEV_CONFIG

常见问题

Q: npm install 失败？

A: 尝试以下解决方案：

清除 npm 缓存：npm cache clean --force
删除 node_modules 和 package-lock.json，重新安装
检查 Node.js 版本是否满足要求

Q: 网络问题导致安装慢？

A: 配置 npm 镜像源：

npm config set registry http://registry.npmmirror.com