作者背景描述：

本人就職於外資IT企業，擔任電商訂單處理產品開發經理一職，領導過非常多次大小項目的開發工作，對電商平台訂單處理流程非常熟悉。

公司專注鞋服行業相關軟件開發和服務，公司規模100多人以上，在台北，廣州，成都，上海，北京，國外等均有分公司。

為什么寫此系列文章？

 本人在學校至工作到現在十余年時間，使用.net C# 開發語言，結合在公司實際開發，和市場的需求中，NET.開發的商業企業級系統遇到的缺點有如下：

1.程序首次加載慢，因為虛擬機編譯的原因。

2.WINFORM界面開發不夠炫麗，精美。

3.WINFORM界面設計人員難找。

4.程序可以被反編譯。

5.安裝包過大，部署麻煩，framework.

6.跨平台不夠好。

結論：

結合近年來前端設計的走向，最終選擇了qt+vue+element UI+sqlite(數據庫根據需要情況選擇)

qt負責接口和硬件處理

sqlite做數據存儲

vue+element UI 實現前端。

Demo 預覽

 

vs2019開發環境和qt5.14.2集成-連載【4】-企業級系統開發實戰連載系列 -技術棧(vue、element-ui、qt、c++、sqlite)

下載安裝版本

http://download.qt.io/official_releases/qt/5.14/5.14.2/

選擇 qt-opensource-windows-x86-5.14.2.exe

 

輸入賬號密碼,如果沒有的話，可以到官網注冊一個https://login.qt.io/register，如下：

 打鈎，點下一步

 點下一步：

 默認路徑，如下：

 這里因為我的操作系統是32位的，鈎選msvc 2017 32-bit

 鈎上 qt webengine,瀏覽器，主要是顯示html UI 界面用，否則后面的教程會找不到這個組件，編譯報錯。

選第一項，如下：

默認，如下：

點安裝,如下圖：

等待安裝結束，如下：

點完成。

vs2019安裝 qt 插件有2種方法，可以在vs擴展菜單里安裝，也可以去官網下載，下圖是啟用vs 2019 ,

點繼續但無需代碼，如下：

在擴展》管理擴展 打開窗口，如下：

右上角輸入 QT，點擊下載，如下：

點擊下載，因為我在實操中發現下載好慢，這種方式放棄了。

 

訪問 https://www.qt.io/offline-installers

點擊other downloads,選擇 第一項下載，看箭頭，如下圖：

 下載好后，雙擊進入安裝，注意，需要關閉所有應用程序，如下：

 等。。。。。。

看到安裝完了，下圖：

 啟動vs2019，在擴展菜單 就能看到qt vs tools 菜單 了，如下

點擊 qt options 進行環境配置，主要是QT的安裝路徑配置進去就行了，比較簡單。因為vs 編譯需要啟用qt安裝路徑的一些程序和模板，頭文件等 。

點擊add,在path 輸入QT的安裝路徑 ，如下圖：

點OK,如下：

 

然后重啟一下vs 2019 ，開始創建qt 項目，在搜索框輸入qt ，如下圖：

選擇 qt widgets application，如下圖：

 

輸入項目 名稱，如下圖：

點擊next

這里點擊qt modules 里的標簽，把sql,network,webengine,webengine widgets 也加進來，后面文章在開發API，和數據持久化需要使用到。

這里默認，點擊finish

按f5運行。

在解決方案資源管理器，雙擊main.cpp，打開源碼，如下

 添加包含文件頭

#include <QWebEngineView>

 

main 函數中，修改並輸入如下代碼：

    //瀏覽器

    QWebEngineView view;

    //設置訪問地址

    view.setUrl(QUrl("https://www.bing.com"));

   //顯示瀏覽器窗口。

    view.show();

   // BitPos w;

  //  w.show();

如下圖：

 

按 f5 ，如下圖：

 

至此，我們的第一個qt程序實踐完成。

小結：通過這個文章，了解到QT集成到vs 開發環境，和QT應用程序的創建，並且能夠顯示HTML,為后面的混合式應用程序開發打下了基礎。

下一章我們講解后端接口開發，使用QT開發一個API，然后在postman 和vue 前端進行調用。