二、【环境搭建篇】：Django 和 Vue3 开发环境准备

【环境搭建篇】：Django 和 Vue3 开发环境准备

- 前言
- - 为什么我们需要特定的开发环境？
  - 准备工作
  - 第一步：搭建后端开发环境 (Python, Django, DRF)
  - - [1. 安装 Python](#1. 安装 Python)
    - [2. 创建和激活 Python 虚拟环境](#2. 创建和激活 Python 虚拟环境)
    - [3. 在虚拟环境中安装 Django 和 DRF](#3. 在虚拟环境中安装 Django 和 DRF)
  - 第二步：搭建前端开发环境 (Node.js, Vue3, Vite)
  - - [1. 安装 Node.js](#1. 安装 Node.js)
    - [2. 创建 Vue3 项目](#2. 创建 Vue3 项目)
    - [3. 进入前端项目并安装依赖](#3. 进入前端项目并安装依赖)
    - [4. 启动前端开发服务器 (验证)](#4. 启动前端开发服务器 (验证))
  - 项目目录结构预览
  - 总结

前言

欢迎来到《Django + Vue3 测试平台》开发实战专栏！在上一篇文章中，我们一起探讨了为什么选择 Django 和 Vue3 来构建测试平台，并勾勒了它的整体架构蓝图。

现在，是时候撸起袖子，为我们的项目准备好开发环境了。环境搭建就像是建造房屋前的地基工作，虽然看起来枯燥，但却是后续一切顺利进行的关键。

为什么我们需要特定的开发环境？

就像不同的项目可能需要不同的工具箱一样，我们的 Django 后端和 Vue3 前端也各自需要特定的运行环境和依赖库。

Python 环境 (Django 后端): 我们需要安装 Python 解释器，以及 Django 和 Django REST Framework (DRF) 这两个框架。
Node.js 环境 (Vue3 前端): 我们需要安装 Node.js 运行时，以及 Vue3、构建工具 (如 Vite) 和各种前端库。

划重点：虚拟环境和包管理器

为了避免不同项目之间的依赖冲突，或者污染你的系统环境，我强烈推荐使用：

Python 虚拟环境 (Virtual Environment): 它能为你创建一个独立的 Python 运行环境，所有安装的库都只在这个环境里生效，不会影响到系统或其他项目。就像为每个项目配备一个专属工具箱。
Node.js 包管理器 (npm/yarn/pnpm): Node.js 生态系统庞大，依赖众多。包管理器可以帮你方便地安装、更新、删除前端项目所需的各种库，并管理它们之间的版本关系。

准备工作

在开始之前，请确保满足以下条件：

稳定的网络连接： 需要下载一些安装包。
基础的终端/命令行操作知识： 我们大部分操作都会在终端里完成，我会提供具体的命令。
代码编辑器： 推荐 VS Code、PyCharm、WebStorm 等，它们对 Python 和 JavaScript/Vue 的支持都非常好。

第一步：搭建后端开发环境 (Python, Django, DRF)

我们将从后端开始。

1. 安装 Python

Django 是基于 Python 的，所以首先要安装 Python。请安装 Python 3.8 或更高版本。

Windows 用户：
- 访问 Python 官方下载页面：https://www.python.org/downloads/
- 下载最新版本的 Windows 安装程序（exe 文件）。
- 运行安装程序，非常重要 ：在安装界面的第一步，勾选 "Add Python to PATH" (将 Python 添加到环境变量)。然后选择"Install Now"进行安装。
- 安装完成后，打开命令提示符 (CMD) 。
macOS 用户：
- macOS 通常自带 Python，但版本可能较老。推荐使用 Homebrew 安装最新版本。
- 如果没安装 Homebrew，打开终端，执行 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 安装。
- 安装 Homebrew 后，执行 brew install python 安装最新 Python 3。
- 安装完成后，打开终端。
Linux 用户：
- 大多数 Linux 发行版都自带 Python。使用包管理器安装最新版本：
  - Debian/Ubuntu: sudo apt update && sudo apt install python3 python3-venv
  - Fedora: sudo dnf install python3 python3-venv
  - CentOS/RHEL: sudo yum install python3 python3-venv (可能需要 EPEL 源)
- 安装完成后，打开终端。

验证安装：

打开你的终端（命令提示符），输入以下命令并回车：

bash 复制代码

python --version

如上图所示，能看到 Python 的版本号，说明安装成功！

2. 创建和激活 Python 虚拟环境

首先，为你整个项目创建一个根目录。打开终端，在你的开发文件夹下创建一个名为 test-platform 的文件夹。

bash 复制代码

mkdir test-platform

使用 cd 命令进入这个文件夹：

bash 复制代码

cd test-platform

接下来，打开代码编辑器，创建虚拟环境。

bash 复制代码

# 创建一个名为 'venv' 的虚拟环境
python -m venv venv

这会在 test-platform 文件夹下创建一个名为 venv 的子文件夹，里面包含了独立的 Python 环境。

激活虚拟环境：

这是关键一步！每次开始在这个项目工作时，都要激活虚拟环境。

macOS 和 Linux 用户：
bash 复制代码
```
source venv/bin/activate
```
Windows 用户：
bash 复制代码
```
venv\Scripts\activate
```

激活成功后，在Terminal，目录前面会显示虚拟环境的名称，如下图所示：

验证虚拟环境是否激活：

输入以下命令检查当前使用的 Python 解释器路径：

bash 复制代码

# macOS / Linux
which python
# Windows
where python

如果路径指向你项目目录下的 venv 文件夹内，说明激活成功！如下图所示：

要退出虚拟环境，只需输入 deactivate 命令即可。但在开发时，请保持虚拟环境激活状态。

3. 在虚拟环境中安装 Django 和 DRF

虚拟环境已经激活，现在安装项目所需的库。使用 pip（Python 的包管理器，虚拟环境激活后，使用的就是虚拟环境独立的 pip）。

bash 复制代码

# 安装 Django
pip install django

# 安装 Django REST Framework (DRF)
pip install djangorestframework

验证安装：

可以查看当前虚拟环境已安装的所有库：

bash 复制代码

pip list

你应在列表中能看到 Django 和 djangorestframework 以及它们的版本号。如下图所示：

至此，你的后端开发环境已经准备就绪！

第二步：搭建前端开发环境 (Node.js, Vue3, Vite)

接下来，我们来搭建前端所需的环境。

1. 安装 Node.js

Vue3 项目的构建和运行依赖于 Node.js。请安装 Node.js 的 LTS (长期支持) 版本 。

访问 Node.js 官方下载页面：https://nodejs.org/
下载推荐的 LTS 版本安装包，根据你的操作系统选择。
运行安装程序，一路点击"Next"，接受默认设置即可。安装程序会自动配置环境变量。

验证安装：

打开新的终端窗口（Node.js 的环境变量可能需要新的终端窗口才能生效），输入以下命令并回车：

bash 复制代码

node -v
npm -v

如果能看到 Node.js 和 npm（Node.js 的默认包管理器）的版本号，说明安装成功！

提示： 除了 npm，你也可以选择使用 yarn 或 pnpm 作为包管理器，它们各有优劣，但对于初学者来说，使用 npm 就足够了。

2. 创建 Vue3 项目

Node.js 安装好后，我们可以使用 Vue 官方推荐的现代构建工具 Vite 来快速创建 Vue3 项目。

回到你的项目根目录 test-platform。我们将在里面创建一个新的文件夹来存放前端代码，比如叫做 frontend。

bash 复制代码

cd test-platform # 确保你在项目根目录

现在，运行创建 Vue 项目的命令：

bash 复制代码

npm create vue@latest

这个命令会启动一个交互式的向导，帮你配置新项目。按照提示来：

输入你的前端项目名称： frontend。
Add TypeScript? (Yes)。
Add JSX Support? (No)，Vue 单文件组件（SFC）足够覆盖大部分场景。
Add Vue Router for Single Page Application development?(Yes)，后续我们会用到路由。
Add Pinia for State Management? (Yes)，Pinia 是 Vue3 推荐的状态管理库。
Add Vitest for Unit Testing? (No)，单元测试可以后续再学。
Add Cypress for End-to-End Testing? (No)，E2E 测试也可以后续再学。
Add ESLint for Code Linting? (Yes)，帮助规范代码。
Add Prettier for Code Formatting? (Yes)，帮助格式化代码。

向导完成后，它会提示你在哪个文件夹下创建了项目，以及接下来的步骤。

3. 进入前端项目并安装依赖

根据向导的提示，进入你刚创建的前端项目文件夹（例如 frontend）：

bash 复制代码

cd frontend

然后，安装项目所需的所有依赖库。npm create vue 只是创建了项目结构和配置，并没有安装这些库。

bash 复制代码

npm install
# 或者如果你习惯用 yarn
# yarn install
# 或者如果你习惯用 pnpm
# pnpm install

这个过程可能需要一些时间，取决于你的网络速度。npm 会读取项目中的 package.json 文件，下载并安装列出的所有依赖及其子依赖。安装完成后，会在 frontend 文件夹下生成一个 node_modules 文件夹。

4. 启动前端开发服务器 (验证)

安装完成后，你就可以尝试启动前端开发服务器了。

bash 复制代码

npm run dev
# 或者如果你用 yarn
# yarn dev
# 或者如果你用 pnpm
# pnpm dev

这表示你的 Vue3 开发服务器已经在本地的 http://localhost:5173/ (端口号可能不同) 运行起来了。在浏览器中打开这个地址，你能看到一个 Vue3 的欢迎页面，如下图所示。

按下 Ctrl + C 可以停止前端开发服务器。

项目目录结构预览

到目前为止， test-platform 项目文件夹结构如下：

后续的 Django 后端代码将放在 backend/ 的文件夹，后端和前端代码在项目根目录下是分开存放的，这是一种常见的全栈项目组织方式，清晰且易于管理。

总结

恭喜你！你已经成功搭建了 Django 后端和 Vue3 前端项目的基本开发环境。

✅ 安装了 Python 并配置了虚拟环境。

✅ 在虚拟环境中安装了 Django 和 DRF。

✅ 安装了 Node.js 和 npm。

✅ 使用 create-vue 创建了一个 Vue3 项目，并安装了其依赖。

✅ 成功启动了 Vue3 的开发服务器并看到了欢迎页面。

在下一篇文章中，我们将正式开始构建测试平台的后端部分，首先从设计数据模型开始，定义我们平台需要管理的数据（比如项目、模块、测试用例等）。