March 18, 2024 | Created

Vue 與 .NET 的邂逅｜04 建立 Vue & .Net 專案

建立專案

開啟 Visual Studio 2022 建立新專案

搜尋 vue ，並選擇 Vue and ASP.NET Core

請依需求留意選擇的類型是 JavaScript 或是 TypeScript

設定專案夾名稱

其他資訊可先保留預設

成功建立後，剛剛設定的專案目錄路徑，會自動建立專案相關檔案

開啟 VueNetSample.sln，將右側方案總管展開，可以看到兩個專案 vuenetsample.client、VueNetSample.Server

其中，
vuenetsample.client 是 Vue 專案；VueNetSample.Server 是 .NET 專案

設定專案啟動預設瀏覽器

右側方案總管展開，對 vuenetsample.client 按右鍵，選擇「設定為啟動專案」

在 VS 2022 視窗中上，有個綠色啟動按鈕，點選右側倒三角形展開選單，並依習慣選擇預設瀏覽器

接著，再回到右側方案總管展開，對 vuenetsample.client 按右鍵，選擇「設定啟動專案…」

選擇「多個啟動專案」，並選擇專案的動作及偵錯目標

此時，運行按鈕文字會改為「開始」，點選並運行專案

第一次運行，有可能會出現 SSL 憑證授權的訊息，選擇「是」

接著會自動開啟 4 個視窗，分別是前端 Vue 與後端 .NET 的運行環境及網頁

以上流程都正常，就代表專案建立成功

---

Reference

• 2023 iThome 鐵人賽-30天挑戰：從無到有，使用Vue.js和.NET建立一個Web登入系統 系列

---

系列：Vue 與 .NET 的邂逅
上一篇：03 安裝 Vue & Vue CLI
下一篇：05 變更 SQL Server 驗證方式

tags: Vue 與 .NET 的邂逅

文章若有任何錯誤，還請不吝給予留言指正，謝謝大家！