企业官网建设流程全解析

1. 安装VSCode及拓展插件

1.1.在windows安装VSCode

在windows上安装vscode，详见教程：VSCode安装配置使用教程（最新版超详细保姆级含插件）一文就够了_vscode使用教程-CSDN博客

1.2.在VScode安装插件

安装VSCode后，打开VSCode，安装如下插件：

2. mingw环境搭建

mingw下载地址：https://github.com/niXman/mingw-builds-binaries/releases/tag/13.1.0-rt_v11-rev1

下载完毕将解压

解压完毕后，比如解压到：D:\mingw64，设置环境变量：

检测mingw环境变量是否安装成功：

在windows打开终端，输入gcc -v

配置成功显示如下：

3. cmake环境搭建

cmake下载地址：Download CMake

下载完毕后，按步骤安装即可，安装完毕后，在windows打开终端，输入cmake --version，配置成功显示如下：

4. 下载SDL

下载地址：https://github.com/libsdl-org/SDL/releases/tag/release-2.32.4

5. 下载LVGL

5.1.下载lvgl

lvgl v9.3下载地址：https://github.com/lvgl/lvgl/tree/release/v9.3

5.2.下载lv_port_pc_vscode

lv_port_pc_vscode v9.3下载地址：https://github.com/lvgl/lv_port_pc_vscode/tree/release/v9.3

6. 环境搭建

（1）解压lv_port_pc_vscode-release-v9.3.zip

（2）解压lvgl-9.3.0.zip

（3）解压SDL2-devel-2.32.4-mingw.zip

（4）将lvgl-9.3.0文件夹下所有的文件复制到lv_port_pc_vscode-release-v9.3 的 lvgl文件夹下

(5)将SDL2-2.32.4文件夹复制到lv_port_pc_vscode-release-v9.3文件夹中

（6）打开VSCode，打开lv_port_pc_vscode-release-v9.3文件夹，注意：lv_port_pc_vscode-release-v9.3文件夹的文件路径不能有中文！

打开后，点击“显示并运行命令”

点击“CMake：选择工具包”

选择编译器

（7）修改CMakeLists.txt文件，指定SDL配置路径

添加路径，修改后保存CMakeLists.txt

set(CMAKE_PREFIX_PATH "${PROJECT_SOURCE_DIR}/SDL2-2.32.4/x86_64-w64-mingw32" ${CMAKE_PREFIX_PATH}) file(COPY "${PROJECT_SOURCE_DIR}/SDL2-2.32.4/x86_64-w64-mingw32/bin/SDL2.dll" DESTINATION ${PROJECT_SOURCE_DIR}/bin)

7. 编译、调试、运行工程

（1）编译工程

在VSCode页面左下方点击“生成”的图标，编译（注意：编译无反应的话，原本工程中存在build文件夹，请删除后再编译）

编译完成后，我们可以看到有编译错误：

下面来进行修改：

打开main.c文件，注释掉#include "glob.h"，并添加SDL头文件

修改完成后，再次编译

（2）运行工程

(3)调试工程

8. 总结

本文介绍在Windows用VSCode搭建LVGL9的模拟环境，并在VSCode对LVGL9进行编译、调试、运行。由于本人水平有限，错漏在所难免，欢迎大家指出错漏，同时也欢迎大家进行交流学习。