本文將介紹 WebView2 開發環境的通用設定。 有些使用者入門教學會先說明初步設定步驟，然後再加入平台特定或專案設定步驟。
安裝 Visual Studio
安裝 Visual Studio 2015 或更新版本，例如 Visual Studio Professional 2019 或 Visual Studio 2022 Community edition。 大部分 WebView2 範例皆使用 Visual Studio 2019 製作與測試。 如果範例是用 Visual Studio 2019 建立的，你應該先在 Visual Studio 2019 中建立並執行該範例，再用 Visual Studio 2022 使用範例。
WebView2 範例是為 Microsoft Visual Studio 設計，而非 Microsoft Visual Studio Code。
如果你正在安裝 Visual Studio，暫時可以接受預設值;你可以點 選安裝，然後此時拒絕安裝工作負載。 Visual Studio 會在你打開特定
.sln檔案時，提示你安裝適合平台的工作負載。
安裝 Microsoft Edge 的預覽頻道
在支援的作業系統上安裝任何Microsoft Edge 預覽頻道 (Beta、Dev 或 Canary) ：
- Windows 10
- Windows 11
若要下載 Microsoft Edge (Beta、開發版或 Canary) 的預覽頻道，請前往 「成為 Microsoft Edge Insider」。
我們建議使用 Canary 頻道。 最低要求版本為 82.0.488.0。
使用 WebView2 SDK 的預發布版本是必須具備 Microsoft Edge 預覽通道的條件。 預發布的 SDK 讓你的應用程式能在最新的 API 上測試，並嘗試最新的 API。
下載 WebView2Samples 資料庫
有兩個儲存庫包含 WebView2 範例：
你可以下載一個檔案， .zip 或是複製該倉庫。
如果你下載 (檔案
.zip) ，你會得到一個倉庫的快照副本。 之後你可以再下載另一個更新版的倉庫。如果你複製了倉庫，可以用 git 指令或各種開發應用程式的功能更新本地副本。
要下載該倉庫 (檔案 .zip) ：
在新視窗或分頁中 (開啟 WebView2Samples 儲存庫或 WebView2Browser 儲存庫) 。
點擊 GitHub 倉庫右上角的綠色代碼按鈕，然後點擊下載 ZIP。
下載彈出視窗會出現在 Microsoft Edge 中：
在 Microsoft Edge 裡，如果 下載視窗看 不到，點選 設定和更多 (......) ，然後點選 下載。
在 下載 彈出視窗中，將滑鼠移到右側
WebView2Samples-main.zip，然後點擊 資料夾 (資料夾) 圖示。建議不要點擊 「開啟檔案 」連結，因為那會立即在下載區解壓檔案，這會讓你更難 (，移動到想要的位置) 也會變慢。
將檔案從你的 Downloads 目錄複製或剪切
WebView2Samples-main.zip到一般目錄，例如Documents。解壓縮檔案
WebView2Samples-main.zip，並註明解壓縮檔案的位置。
研究主要目錄的細分。
-main是這個下載目錄快照所代表的 repo 分支名稱。 你可以切換到 GitHub 的其他分支，然後下載 ，例如。WebView2Samples-smoketest-1.0.1054.27-prerelease-testing.zip在這種情況下，下載的.zip檔案就是倉庫分支smoketest-1.0.1054.27-prerelease-testing的快照。 這份文件假設你下載main了倉庫的分支。建議：將根目錄
WebView2Samples-main從 重命名為WebView2Samples，以匹配倉庫名稱和路徑。
複製 WebView2Samples 倉庫
你可以下載倉庫的 .zip 檔案，或是複製倉庫。
如果你下載 (檔案
.zip) ，你會得到一個倉庫的快照副本。 之後你可以再下載另一個更新版的倉庫。如果你複製了倉庫，可以用 git 指令或各種開發應用程式的功能更新本地副本。
要複製 WebView2Samples 倉庫 (或 WebView2Browser 倉庫) ，你必須先安裝 git。 你可以像上面描述的那樣下載該倉庫，或是複製它。
安裝 git
- 如果你想複製
WebView2Samples倉庫， (而不是下載，) ;如果 git 還沒安裝，就 下載 git 並安裝。
取得用於複製 WebView2Samples 倉庫的網址
在新視窗或分頁中開啟 WebView2Samples 儲存庫 。
點擊 GitHub 倉庫右上角的綠色 程式碼 按鈕，選擇 複製，然後點擊 複製 圖示 (，或者在文字框中選取 HTTPS URL 字串並複製) 。
決定你想用哪種工具來本地複製倉庫：
- Visual Studio
- GitHub 桌面
- Git Bash 殼或指令提示字元
接著，將 GitHub 倉庫複製到你的本地硬碟。 為此，請依照下方你想使用的工具執行相應步驟。
使用 Visual Studio 克隆該倉庫
如果你想用 Visual Studio 把 GitHub 倉庫複製到你的本地硬碟：
在 Visual Studio 中，選擇 檔案>複製庫。
輸入你從 GitHub 倉庫複製的網址。
在同一對話框內，或在檔案總管工具中，你可以建立一個通用的根目錄
git或GitHub資料夾，位於可寫入的位置，然後選擇該目錄，讓該倉庫被複製為新目錄。例如，你可以在父資料夾 ：
C:\Users\myUserName\Documents\GitHub\，建立儲存庫，讓複製操作建立新的目錄C:\Users\myUserName\Documents\GitHub\WebView2Samples。
你已經把倉庫複製到本地硬碟。 請跳到下方下一個主要章節。
使用 GitHub Desktop 克隆該倉庫
如果你想用 GitHub Desktop 將 GitHub 倉庫複製到你的本機硬碟：
安裝 GitHub 桌面版。
在 GitHub Desktop 中，選擇 檔案>複製儲存庫。
在 Visual Studio 或 GitHub Desktop 中，輸入你從 GitHub 倉庫複製的網址。
在同一對話框內，或在檔案總管工具中，你可以建立一個通用的根目錄
git或GitHub資料夾，位於可寫入的位置，然後選擇該目錄，讓該倉庫被複製為新目錄。例如，你可以在父資料夾 ：
C:\Users\myUserName\Documents\GitHub\，建立儲存庫，讓複製操作建立新的目錄C:\Users\myUserName\Documents\GitHub\WebView2Samples。
你已經把倉庫複製到本地硬碟。 請跳到下方下一個主要章節。
使用 Git Bash shell 或命令提示字元來克隆該倉庫
如果你想用 Git Bash 殼或命令提示字元來克隆倉庫：
將倉庫複製到你的本地硬碟，輸入你從 GitHub 倉庫複製的 URL 字串：
# example location where the repo directory will be added: cd c:/users/myusername/documents/github/ git clone https://github.com/MicrosoftEdge/WebView2Samples.git
目錄會在你本地硬碟上建立，依照你指定的路徑建立，如下圖所示：
你已經把倉庫複製到本地硬碟。
另請參閱:
複製倉庫 - GitHub 文件。
在 DevTools 範例程式碼中複製 Edge Demos 倉庫到你的硬碟。
步驟 6：在安裝 Visual Studio Code 的 DevTools 擴充套件中設置 localhost 伺服器。
在 Visual Studio 開啟 WebView2Samples .sln 檔案
複製或下載 WebView2Samples 倉庫後，在 Visual Studio 開啟一個 .sln 檔案。
在你本地的 repo 目錄結構中，找到一個
.sln檔案。 WebView2Samples 倉庫中的頂層 README 檔案也有類似的概述。在 Visual Studio 開啟一個
.sln檔案。 例如，打開你本地的 WebView2Samples.sln。 這個倉庫的解決方案檔案需要 Visual Studio，而非 Visual Studio Code。打開其中一個
.sln檔案。 例如，在 Visual Studio 中以路徑WebView2Samples-main/SampleApps/WebView2Samples.sln) 方式下載 (Windows 32 解決方案的 WebView2Samples/SampleApps/WebView2Samples.sln 的本地副本Microsoft。 當您在 Visual Studio 開啟該解決方案檔案時，方案總管包含以下專案：
一般初期開發環境設定時，你可以從倉庫中開啟任何類型的 .sln 檔案 WebView2Samples ：
目錄子目錄
GettingStartedGuides中的平台專用.sln檔案。 這些內容與《使用者入門》教學相符，且是展示幾個 API 功能的完成範例。包含多個平台專案的 Win32
.sln檔案，位於目錄中SampleApps。 這是一個完整的 API 示範。目錄子目錄
SampleApps中的平台專用.sln檔案。 這些都是完整的 API 示範。
安裝 Visual Studio 工作負載
如果有提示，請安裝 Visual Studio 工作負載。 當你在 Microsoft Visual Studio 2019 或 2022 中從複製或下載WebView2Samples的倉庫開啟.sln檔案時，可能會看到「無法開啟」的對話框。
點擊 確定 按鈕。 接著你可能會看到像這樣的工作負載安裝商：
。勾選勾選方塊，然後點擊 安裝 按鈕。
Visual Studio 安裝程式執行平台的工作負載：
Visual
。可能會開啟一個遷移報告日誌頁面，例如：
file:///C:/Users/username/Documents/WebView2Samples-main/WebView2Samples-main/SampleApps/UpgradeLog.htm
要放大，請右鍵點擊>「在新分頁開啟圖片」。
上面，
-main目錄後綴是針對下載的.zip倉庫檔案，但如果你是複製倉庫，則不會。Visual Studio 會以 方案總管 方式開啟所選
.sln檔案：
安裝或更新 WebView2 SDK
WebView2 SDK 包含由 Microsoft Edge 驅動的 WebView2 控制項，讓您能將 HTML、CSS 和 JavaScript) (網頁技術嵌入原生應用程式中。
每個檔案的 .sln 專案節點都安裝一次 WebView2 SDK。 WebView2 SDK 安裝只適用於安裝在專案上的專案。
你不是從 Microsoft.Web.WebView2 nuget.org 下載 SDK NuGet 套件，而是透過 Visual Studio 的 NuGet 套件 管理器面板安裝 WebView2 SDK 的 NuGet 套件。 在你複製或下載 WebView2Samples 倉庫後，接著在 .sln Visual Studio 打開該倉庫的檔案，然後在解決方案中右鍵點擊專案節點。 你可以使用 NuGet 套件管理器 面板來安裝 Microsoft.Web.WebView2 SDK 作為 NuGet 套件。
SDK Microsoft.Web.WebView2 提供發行版與預發布版本。 開始時，建議使用發行版本。
安裝或更新 Release 或預發布版 WebView2 SDK，具體如下：
在 Visual Studio 開啟一個
.sln檔案。 例如，打開你本地的 WebView2Samples.sln。 這個倉庫的解決方案檔案需要 Visual Studio，而非 Visual Studio Code。在方案總管中，右鍵點擊解決方案的專案節點，例如 WebView2GettingStarted 專案節點， (非解決方案節點) ，然後選擇管理 NuGet 套件。
以下圖片顯示特定.sln檔案與專案;使用你想安裝 SDK 的專案：
NuGet 套件管理器分頁會在 Visual Studio 開啟。
在 NuGet 視窗中，點 選瀏覽標籤 。
在搜尋列右側，勾選 「包含預發布 」勾選框，若你想要包含實驗性 API 的 SDK 預發布版本，則可設定。
在左上角的搜尋欄輸入 Microsoft.Web.WebView2。
在搜尋欄下方，點擊 Microsoft.Web.WebView2 卡片。
在右側選區，點擊 安裝 (或 更新) 按鈕。 NuGet 會將 WebView2 SDK 下載到你的電腦，供本專案使用。
要放大，請右鍵點擊>「在新分頁開啟圖片」。
關閉 NuGet 套件管理器 分頁。
WebView2 SDK 已經安裝完成，因此你的開發環境已經準備好，可以為 WebView2 應用程式加入 WebView2 的功能。
另請參閱:
更新 WebView2 執行環境
要在你的開發機器和使用者機器上更新 WebView2 執行環境，請參見 「分發你的應用程式」和 WebView2 執行環境。
另請參閱
- 複製倉庫 - GitHub 文件。
- 在 DevTools 範例程式碼中複製 Edge Demos 倉庫到你的硬碟。
- 步驟 6：在安裝 Visual Studio Code 的 DevTools 擴充套件中設置 localhost 伺服器。