--- GA: G-7BSJTG7RYN --- March 18, 2024 | Created # Vue 與 .NET 的邂逅｜04 建立 Vue & .Net 專案 ### 建立專案 開啟 Visual Studio 2022 建立新專案 ![image](https://hackmd.io/_uploads/ByeY74FbAp.png) 搜尋 `vue` ，並選擇 `Vue and ASP.NET Core` > 請依需求留意選擇的類型是 JavaScript 或是 TypeScript ![image](https://hackmd.io/_uploads/B1qOVF-Cp.png) 設定專案夾名稱 ![image](https://hackmd.io/_uploads/H1NfSYb06.png) 其他資訊可先保留預設 ![image](https://hackmd.io/_uploads/HyDvBtWAa.png) 成功建立後，剛剛設定的專案目錄路徑，會自動建立專案相關檔案 ![image](https://hackmd.io/_uploads/B10RBFZAT.png) 開啟 `VueNetSample.sln`，將右側方案總管展開，可以看到兩個專案 `vuenetsample.client`、`VueNetSample.Server` 其中， `vuenetsample.client` 是 Vue 專案；`VueNetSample.Server` 是 .NET 專案 ![image](https://hackmd.io/_uploads/BJo68FW0T.png) ### 設定專案啟動預設瀏覽器 右側方案總管展開，對 `vuenetsample.client` 按右鍵，選擇「設定為啟動專案」 ![image](https://hackmd.io/_uploads/B1Jfe5-Ap.png) 在 VS 2022 視窗中上，有個綠色啟動按鈕，點選右側倒三角形展開選單，並依習慣選擇預設瀏覽器 ![image](https://hackmd.io/_uploads/HJv2xq-C6.png) 接著，再回到右側方案總管展開，對 `vuenetsample.client` 按右鍵，選擇「設定啟動專案...」 ![image](https://hackmd.io/_uploads/ry6zbqZCa.png) 選擇「多個啟動專案」，並選擇專案的動作及偵錯目標 ![image](https://hackmd.io/_uploads/rJIFb9ZC6.png) 此時，運行按鈕文字會改為「開始」，點選並運行專案 ![image](https://hackmd.io/_uploads/ryRlG9b0p.png) 第一次運行，有可能會出現 SSL 憑證授權的訊息，選擇「是」 ![20141088l6UC6mo67J](https://hackmd.io/_uploads/HJWoeBrAp.png) 接著會自動開啟 4 個視窗，分別是前端 Vue 與後端 .NET 的運行環境及網頁 ![image](https://hackmd.io/_uploads/B1SSm9bCT.png) 以上流程都正常，就代表專案建立成功 --- ### Reference - [2023 iThome 鐵人賽-30天挑戰：從無到有，使用Vue.js和.NET建立一個Web登入系統 系列](https://ithelp.ithome.com.tw/users/20141088/ironman/6887) --- > 系列：[`Vue 與 .NET 的邂逅`](https://hackmd.io/@elzuoc?tags=%5B%22Vue+%E8%88%87+.NET+%E7%9A%84%E9%82%82%E9%80%85%22%5D) > 上一篇：[03 安裝 Vue & Vue CLI](https://hackmd.io/@elzuoc/r1qH_u-Ap) > 下一篇：[05 變更 SQL Server 驗證方式](https://hackmd.io/@elzuoc/ryskKwSR6) ###### tags: [`Vue 與 .NET 的邂逅`](https://hackmd.io/@elzuoc?tags=%5B%22Vue+%E8%88%87+.NET+%E7%9A%84%E9%82%82%E9%80%85%22%5D) ###### 文章若有任何錯誤，還請不吝給予留言指正，謝謝大家！