windows 10 下 vscode 编写编译一个 nana c++ 库的示例程序

在 Windows 10 上刚安装好 VS Code，要编译 Nana C++ GUI 示例，核心需要准备 C++ 编译器 + CMake + Nana 库 + VS Code C++ 环境。Nana 本身是 CMake 项目，所以走 MSVC + CMake + VS Code 这条路线，这是 Windows 下最稳定的方式。

下面从零开始。

---

1. 安装 C++ 编译环境（MSVC）

VS Code 本身不带 C++ 编译器，需要安装 Microsoft Visual C++ 工具链。

1.1 下载 Visual Studio Build Tools

打开：

https://visualstudio.microsoft.com/visual-cpp-build-tools/

下载：

Build Tools for Visual Studio 2022

安装时选择：

☑ 使用 C++ 的桌面开发

右侧确认包含：

MSVC v143 - VS 2022 C++ x64/x86 build tools
Windows 10 SDK
C++ CMake tools for Windows

安装完成。

---

2. 安装 VS Code 插件

打开 VS Code。

安装：

C/C++

微软官方：

C/C++

发布者：

Microsoft

作用：

• 代码补全
• 调试
• IntelliSense

CMake Tools

安装：

CMake Tools

作用：

• 配置 CMake
• 编译
• 运行

---

3. 安装 Git

Nana 从 GitHub 获取。

安装：

https://git-scm.com/download/win

安装默认即可。

测试：

打开 PowerShell：

git --version

应该看到：

git version 2.xx.x

---

4. 安装 CMake

虽然 VS Build Tools 已经带 CMake，但建议确认。

PowerShell：

cmake --version

例如：

cmake version 3.31.x

如果没有：

下载：

https://cmake.org/download/

安装时选择：

Add CMake to PATH

---

5. 下载 Nana 源码

建立工作目录，例如：

D:\cpp\

进入：

cd D:\cpp

克隆 Nana：

git clone https://github.com/cnjinhao/nana.git

得到：

D:\cpp\nana

目录类似：

nana
 ├─ include
 ├─ source
 ├─ CMakeLists.txt
 ├─ examples

---

6. 创建你的测试项目

不要直接改 Nana 源码。

建立：

D:\cpp\nana-test

目录：

nana-test
│
├── CMakeLists.txt
│
└── ex01_hello.cpp

---

7. 放入你的代码

复制：

ex01_hello.cpp

内容保持不变。

---

8. 编写 CMakeLists.txt

在：

nana-test/CMakeLists.txt

写：

cmake_minimum_required(VERSION 3.20)

project(nana_test)

set(CMAKE_CXX_STANDARD 17)

add_subdirectory(
    D:/cpp/nana
    nana-build
)

add_executable(
    hello
    ex01_hello.cpp
)

target_link_libraries(
    hello
    PRIVATE
    nana
)

注意：

这里：

D:/cpp/nana

改成你的 Nana 实际路径。

例如：

C:/Users/Tifeng/source/nana

---

9. 用 VS Code 打开项目

VS Code：

File
 ↓
Open Folder
 ↓
D:\cpp\nana-test

打开。

---

10. 选择 MSVC 编译器

底部状态栏：

点击：

No Kit Selected

选择：

Visual Studio Community 2022 Release - amd64

或者：

MSVC x64

---

11. 配置 CMake

按：

Ctrl + Shift + P

输入：

CMake: Configure

执行。

第一次会花一点时间。

成功后：

输出类似：

Configuring done
Generating done
Build files have been written

---

12. 编译

方法1：

底部：

点击：

Build

或者：

Ctrl+Shift+P：

CMake: Build

成功：

hello.exe

生成位置类似：

build\Debug\hello.exe

---

13. 运行

VS Code：

Ctrl + F5

应该出现：

示例 1 — Hello, Nana!
一个 C++ 跨平台 GUI 库

窗口。

---

推荐目录结构

最终：

D:\cpp
│
├── nana
│
└── nana-test
    │
    ├── CMakeLists.txt
    │
    ├── ex01_hello.cpp
    │
    └── build

---

常见问题

1. 找不到 nana

错误：

Cannot find source directory

检查：

add_subdirectory(
    D:/cpp/nana
)

路径必须存在。

---

2. 链接错误

例如：

unresolved external symbol

通常是：

• C++标准库不一致
• x86/x64混用

检查：

VS Code 选择：

amd64

不要：

x86

---

3. 窗口一闪而过

不要直接运行：

hello.exe

双击。

因为 GUI 程序退出后窗口关闭。

用：

Ctrl+F5

运行。

---

4. 为什么不用 MinGW？

Nana 支持 MinGW，但 Windows GUI 开发：

编译器	推荐
MSVC	★★★★★
MinGW	★★★

原因：

• Nana 官方主要测试 MSVC
• Windows SDK 集成最好
• 调试体验最好
• CMake 配置简单

---

后续学习 Nana 推荐路线

你这个例子实际上已经涉及 Nana 的核心 20%：

1. form

   • 顶层窗口

2. widget

   • label/button/textbox/listbox

3. layout

   • div
   • field
   • collocate

4. event

   • click
   • mouse
   • keyboard

5. paint

   • 自定义绘图

建议下一步直接写：

窗口
 ├── label
 ├── button
 └── textbox

做一个简单计算器，这是 Nana 入门最好的练习。