本文基于VS Code 官方 CMake 流程 + Windows 下 SDL2/SDL2_image 实战移植经验，把创建 CMake 项目 → 配置头文件 / 库路径 → 自动复制 DLL → 一键构建运行全流程讲透，新手跟着点就能跑通图形 + 图片加载工程。
一、前置环境准备（必装）
-
VS Code + 官方扩展
-
C/C++（微软）
-
CMake Tools（微软）
-
-
编译工具
-
MinGW-w64（路径无中文无空格）
-
CMake 3.10+（安装时勾选 Add to PATH）
-
-
库文件
-
安装到固定目录，例如：
-
D:\SDK\SDL2
-
D:\SDK\SDL2_image
-
提示：编译安装SDL2/SDL2_image库请参照Windows平台下使用cmake构建SDL2和SDL2_image库。
二、创建 CMake 项目（用 CMake: Quick Start）
-
新建项目文件夹，用 VS Code 打开
-
快捷键
Ctrl+Shift+P→ 执行CMake: Quick Start -
步骤：
-
输入项目名（如
AntGame） -
语言选 C++
-
项目类型选 Executable
-
-
自动生成：
-
CMakeLists.txt -
main.cpp
-
三、创建 CMakePresets.json（统一构建配置）
-
Ctrl+Shift+P→CMake: Configure -
选择 Add a New Preset → Create from Compilers
-
选择你的编译器（MinGW GCC / MSVC）
-
命名预设（如
mingw-debug） -
生成后文件示例：
json
{
"version": 8,
"configurePresets": [
{
"name": "mingw-debug",
"displayName": "MinGW GCC Debug",
"generator": "MinGW Makefiles",
"binaryDir": "${sourceDir}/out/build/${presetName}",
"cacheVariables": {
"CMAKE_BUILD_TYPE": "Debug",
"CMAKE_CXX_COMPILER": "g++"
}
}
]
}四、核心配置：CMakeLists.txt 完整模板（直接替换）
这是可直接运行的最终配置，已包含多源文件、头文件路径、库目录、链接、自动拷贝 DLL、资源文件复制。
cmake
cmake_minimum_required(VERSION 3.10.0)
project(AntGame VERSION 0.1.0 LANGUAGES C CXX)
# 1. 生成可执行文件（把你的 cpp 全列进来）
add_executable(AntGame
main.cpp
ant.cpp
ground.cpp
home.cpp
)
# 2. 配置 SDL2 & SDL2_image 路径（改成你自己的解压目录）
set(SDL2_BASE "D:/SDK/SDL2")
set(SDL2_IMAGE_BASE "D:/SDK/SDL2_image")
# 3. 头文件包含路径
target_include_directories(AntGame PRIVATE
"${SDL2_BASE}/include/SDL2"
"${SDL2_IMAGE_BASE}/include/SDL2"
)
# 4. 库文件搜索路径
target_link_directories(AntGame PRIVATE
"${SDL2_BASE}/bin"
"${SDL2_IMAGE_BASE}/bin"
)
# 5. 链接库
find_package(SDL2 REQUIRED CONFIG REQUIRED COMPONENTS SDL2)
target_link_libraries(AntGame PRIVATE
SDL2::SDL2
SDL2_image
)
# 6. 自动复制 DLL 到输出目录（关键！解决运行报错）
file(COPY "${SDL2_BASE}/bin/SDL2.dll" DESTINATION "${CMAKE_BINARY_DIR}")
file(COPY "${SDL2_IMAGE_BASE}/bin/SDL2_image.dll" DESTINATION "${CMAKE_BINARY_DIR}")
# 7. 复制图片资源
file(COPY ./ant0.png DESTINATION "${CMAKE_BINARY_DIR}")
file(COPY ./ant1.png DESTINATION "${CMAKE_BINARY_DIR}")五、VS Code 代码提示配置（可选但推荐）
新建 / 修改 .vscode/c_cpp_properties.json，加入 SDL 头路径：
json
{
"configurations": [
{
"includePath": [
"${workspaceFolder}/**",
"D:/SDK/SDL2/include/SDL2",
"D:/SDK/SDL2_image/include/SDL2"
],
"intelliSenseMode": "windows-gcc-x64"
}
],
"version": 4
}六、main.cpp 测试代码（验证窗口 + 图片）
cpp
#define SDL_MAIN_HANDLED //SDL2不要接管main函数
#include <SDL.h>
#include <SDL_image.h>
#include <iostream>
int main() {
SDL_Init(SDL_INIT_VIDEO);
IMG_Init(IMG_INIT_PNG);
SDL_Window* window = SDL_CreateWindow(
"SDL2+CMake 测试",
SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED,
800, 600, SDL_WINDOW_SHOWN
);
SDL_Renderer* render = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED);
SDL_SetRenderDrawColor(render, 255, 255, 255, 255); //白色
SDL_Texture* img = IMG_LoadTexture(render, "ant0.png");
bool running = true;
SDL_Event e;
while (running) {
while (SDL_PollEvent(&e)) {
if (e.type == SDL_QUIT) running = false;
}
SDL_RenderClear(render);
SDL_RenderCopy(render, img, NULL, NULL);
SDL_RenderPresent(render);
}
SDL_DestroyTexture(img);
SDL_DestroyRenderer(render);
SDL_DestroyWindow(window);
IMG_Quit();
SDL_Quit();
return 0;
}七、一键构建 + 运行（3 步）
-
配置
-
Ctrl+Shift+P→CMake: Configure -
或点底部状态栏齿轮图标
-
-
构建
-
Ctrl+Shift+P→CMake: Build -
或点底部 Build
-
-
运行 / 调试
-
点底部 ▶️ 运行
-
或 F5 调试（需 CMake Tools 接管启动）
-
八、新手高频报错速查（90% 都能解决）
| 报错现象 | 原因 | 解决方法 |
|---|---|---|
找不到 SDL.h |
头路径错 | 核对 target_include_directories |
| undefined reference | 没链接库 | 检查 target_link_libraries |
| 运行丢 DLL | 未复制 | 用 file(COPY ...) 自动拷贝 |
| 图片加载失败 | 资源不在 exe 同目录 | 用 file(COPY 图片 ...) |
| CMake 找不到编译器 | 未选生成器 | Configure 时选 MinGW Makefiles |
九、总结
用 VS Code + CMake 管理 SDL2 项目，只靠一份 CMakeLists.txt 就能搞定：
-
自动管理多源文件
-
统一头文件 / 库路径
-
自动复制 DLL、资源
-
跨平台、可分享、可调试
比手动改 tasks.json/launch.json 更稳定、更易维护，适合游戏、模拟器、图形工具等中型 C++ 工程。