3. 开发环境搭建与工具链

在开始实时监控大屏项目之前，必须建立一套标准、可复用的开发环境。本节将指导你完成从 Python 虚拟环境、Node.js 运行时到 Docker 容器化、Git 版本控制以及 VS Code 编辑器配置的完整工具链搭建。这套环境将贯穿整个课程，确保所有学员在一致的平台上进行开发与调试。

3.1 Python 虚拟环境：venv 与 Conda

Python 项目依赖管理是数据工程的基础。使用虚拟环境可以避免不同项目间的包版本冲突。本课程推荐两种方式：轻量级的 venv 和功能更全面的 Conda。

3.1.1 使用 venv 创建虚拟环境

在项目根目录下执行以下命令，创建并激活虚拟环境：

# 创建虚拟环境（Windows / macOS / Linux）
python -m venv venv

# 激活虚拟环境
# Windows (CMD/PowerShell)
venv\Scripts\activate

# macOS / Linux (bash/zsh)
source venv/bin/activate

# 验证环境
which python   # macOS/Linux
where python   # Windows
# 输出应指向项目目录下的 venv/bin/python 或 venv\Scripts\python.exe

# 安装项目依赖
pip install -r requirements.txt

# 退出虚拟环境
deactivate

3.1.2 使用 Conda 创建虚拟环境

如果你已经安装了 Miniconda 或 Anaconda，可以使用以下命令：

# 创建名为 dashboard_env 的 Python 3.10 环境
conda create -n dashboard_env python=3.10 -y

# 激活环境
conda activate dashboard_env

# 安装包（同时支持 conda 和 pip）
conda install pandas numpy
pip install flask dash

# 导出环境配置
conda env export > environment.yml

# 从文件创建环境
conda env create -f environment.yml

# 退出环境
conda deactivate

3.2 Node.js 与 npm 安装

前端开发与构建工具依赖 Node.js 运行时。npm 是 Node.js 的包管理器，用于安装前端库（如 D3.js、Chart.js）和构建工具（如 Webpack、Vite）。

3.2.1 安装步骤

1. 下载安装包： 访问 nodejs.org，下载 LTS（长期支持）版本。
2. 运行安装程序： 按默认选项安装，npm 会自动包含。
3. 验证安装：

# 查看 Node.js 版本
node --version
# 输出示例：v18.17.0

# 查看 npm 版本
npm --version
# 输出示例：9.6.7

# 初始化项目（生成 package.json）
npm init -y

3.2.2 常用 npm 命令速查

3.3 Docker Desktop 配置

Docker 容器化技术可以确保开发、测试、生产环境的一致性。对于实时监控大屏项目，我们将使用 Docker 来部署后端 API、消息队列（如 Redis）和数据库（如 InfluxDB）。

3.3.1 安装与验证

1. 下载 Docker Desktop： 访问 docker.com，选择对应操作系统版本。
2. 启动 Docker Desktop： 安装后启动，确保右下角（Windows）或顶部菜单栏（macOS）显示 Docker 图标。
3. 验证安装：

# 查看 Docker 版本
docker --version
# 输出示例：Docker version 24.0.6

# 查看 Docker Compose 版本
docker compose version
# 输出示例：Docker Compose version v2.21.0

# 运行测试容器
docker run hello-world
# 输出应显示 Hello from Docker! 信息

3.3.2 配置镜像加速器

国内用户建议配置镜像加速器，以提升 Docker 镜像拉取速度。在 Docker Desktop 设置中，找到 Docker Engine 配置，添加以下内容：

{
  "registry-mirrors": [
    "https://docker.mirrors.ustc.edu.cn",
    "https://hub-mirror.c.163.com"
  ]
}

配置完成后，点击 Apply & Restart 使配置生效。

3.4 Git 版本控制初始化

Git 是团队协作和代码版本管理的核心工具。我们将为项目初始化一个 Git 仓库，并配置 .gitignore 文件以排除不必要的文件。

3.4.1 初始化仓库

# 在项目根目录执行
git init

# 配置用户信息（首次使用）
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

# 创建 .gitignore 文件
echo "venv/" >> .gitignore
echo "__pycache__/" >> .gitignore
echo "*.pyc" >> .gitignore
echo ".DS_Store" >> .gitignore
echo "node_modules/" >> .gitignore
echo ".env" >> .gitignore

# 添加所有文件并提交
git add .
git commit -m "初始化项目：实时监控大屏开发环境"

3.4.2 标准 Git 工作流

3.5 VS Code 插件推荐

VS Code 是数据可视化项目开发的首选编辑器。以下插件将显著提升开发效率：

3.5.1 配置 VS Code 设置

在 settings.json 中添加以下配置，以统一团队开发风格：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "python.defaultInterpreterPath": "./venv/bin/python",
  "python.terminal.activateEnvironment": true,
  "files.exclude": {
    "**/__pycache__": true,
    "**/.pytest_cache": true
  }
}