QT 5.9.9+VSCode 开发环境搭建

QT 5.9.9+VSCode 开发环境搭建

序言

  • vscode的界面美观,并且和QT一样的跨平台,所以选择vscode作为开发环境。
  • QT5.9.X版本成熟,相应教程丰富,并且5.9.9版本具有生成CMake功能,所以选用QT5.9.9版本。
  • 在qtcreator中进行界面UI设计布局,在vscode中设计代码和编译、调试
    接下来将对程序准备,程序安装,环境配置,测试工程进行介绍

前期程序准备

CMake 3.23.0

QT 5.9.9+VSCode 开发环境搭建_第1张图片

QT 5.9.9

QT 5.9.9+VSCode 开发环境搭建_第2张图片

VSCode 1.65.2

QT 5.9.9+VSCode 开发环境搭建_第3张图片

以上软件除QT外,其余可安装最新发布的版本,若有问题,可选择安装上述版本,相关安装包文末有提供

程序安装步骤

CMake安装

  1. 双击安装包运行,一直Next到下图,此处为方便选择了安装程序自动添加环境变量

    QT 5.9.9+VSCode 开发环境搭建_第4张图片

  2. 安装路径可更换,只需要相应地更改环境变量,本文选择默认路径

    QT 5.9.9+VSCode 开发环境搭建_第5张图片

  3. 安装完成后检查环境变量是否配置正确

    QT 5.9.9+VSCode 开发环境搭建_第6张图片

  4. Win+R 输入cmd,输入cmake -version,显示出CMake的版本号后,CMake安装完成

    QT 5.9.9+VSCode 开发环境搭建_第7张图片

QT安装

  1. 双击安装包运行,如有账号直接登录,无账号则输入邮箱和新账号密码注册,之后

    QT 5.9.9+VSCode 开发环境搭建_第8张图片

  2. 安装路径可自定义,但后期要把MinGW的路径添加到系统环境变量中

    QT 5.9.9+VSCode 开发环境搭建_第9张图片

  3. 由于本教程配置的环境用于VSCode情况下X86界面程序开发,所以只选择了以下组件

    QT 5.9.9+VSCode 开发环境搭建_第10张图片

  4. 其余步骤按照安装程序默认进行即可,安装完成后根绝自己MinGW安装路径配置环境变量

    (1.GCC等编译工具路径 2.QT图形界面等库路径)

    QT 5.9.9+VSCode 开发环境搭建_第11张图片

  5. Win+R 输入cmd,输入gcc -v,显示出GCC的版本号后,QT安装完成

    QT 5.9.9+VSCode 开发环境搭建_第12张图片

VSCode安装

  1. 双击安装包运行,安装路径可更改,将以下两项勾选上,其他按安装程序默认情况,一直Next到安装完成

    QT 5.9.9+VSCode 开发环境搭建_第13张图片

  2. 安装以下插件

    QT 5.9.9+VSCode 开发环境搭建_第14张图片

环境配置

C++编译环境配置

  1. 在桌面上新建’C++Test’文件夹,并右键通过Code打开

QT 5.9.9+VSCode 开发环境搭建_第15张图片

  1. Ctrl+Shift+P打开命令窗口,输入cmake:q,选择Quick Start

    QT 5.9.9+VSCode 开发环境搭建_第16张图片

  2. 选择Kit

QT 5.9.9+VSCode 开发环境搭建_第17张图片

  1. 输入项目名‘hello’

    QT 5.9.9+VSCode 开发环境搭建_第18张图片

  2. 选择可执行文件

QT 5.9.9+VSCode 开发环境搭建_第19张图片

  1. 完成以上步骤后,vscode生成一个C++范例

QT 5.9.9+VSCode 开发环境搭建_第20张图片

  1. 点击vscode底部的Build按钮,构建完成后点击运行按钮,之后可看到终端输出‘Hello, world!’,完成配置

    在这里插入图片描述

    QT 5.9.9+VSCode 开发环境搭建_第21张图片

QT编译环境配置

  1. 打开Qt Creator,新建项目

    QT 5.9.9+VSCode 开发环境搭建_第22张图片

  2. 在桌面上新建QTTest文件夹,并设置新的QT项目路径

    QT 5.9.9+VSCode 开发环境搭建_第23张图片

  3. 选择Build System为CMake方式,其他按默认,一直下一步,直到完成

    QT 5.9.9+VSCode 开发环境搭建_第24张图片

  4. 点击Qt Creator的运行按钮,完成构建和运行,看到MainWindow即项目创建成功

    QT 5.9.9+VSCode 开发环境搭建_第25张图片

    QT 5.9.9+VSCode 开发环境搭建_第26张图片

  5. 之后,在VSCode中打开创建的QTTest文件夹,Locate选择CMakeList.txt文件,选择C++编译环境中同样的Kit,运行后生成MainWindows窗口,到此开发环境配置完成

    QT 5.9.9+VSCode 开发环境搭建_第27张图片

总结

  • 本文介绍了QT5.9.9在VSCode中开发环境搭建的步骤和方法
  • 相关文件提供了百度网盘下载链接,以方便下载 (链接:https://pan.baidu.com/s/13x_XjDeHXiJ5c0ifsqSX0A 提取码:wyn6 )
  • 若有相关问题可邮箱联系[email protected]

你可能感兴趣的:(vscode,qt,c++)