Vue CLI 和ASP.NET Core Web API 專案整合步驟1 2 3 | NET Core Vue
VueCLI開發工具幫助Vue開發人員快速建立前端專案,但網站除了前端之外,後端的API支援也是專案中相當重要的一部分,然而前後端都有自己的專案架構,要如何將兩者整合在一個專案,其實很簡單的。這裡使用ASP.NETCoreWebAPI作為後端專案的框架,然後搭配VueCLI來產生前端專案架構,再做一點點調整,讓前後端除了保有自己的專案架構,還讓兩者能融洽的存在同一個專案中。在整合Vue專案與ASP.NETCore專案前,請確認你的環境有安裝下列工具:.NETCoreNode.jsVueCLI步驟一:ASP.NETCoreWebAPI專案首先就開啟地表最強的VisualStudio2019來建...
Vue CLI 開發工具幫助 Vue 開發人員快速建立前端專案,但網站除了前端之外,後端的 API 支援也是專案中相當重要的一部分,然而前後端都有自己的專案架構,要如何將兩者整合在一個專案,其實很簡單的。這裡使用 ASP.NET Core Web API 作為後端專案的框架,然後搭配 Vue CLI 來產生前端專案架構,再做一點點調整,讓前後端除了保有自己的專案架構,還讓兩者能融洽的存在同一個專案中。
在整合 Vue 專案與 ASP.NET Core 專案前,請確認你的環境有安裝下列工具:
.NET Core Node.js Vue CLI 步驟一:ASP.NET Core WebAPI 專案首先就開啟地表最強的 Visual Studio 2019 來建立 ASP.NET Core Web 應用程式,並將專案命名為 DemoVueDotnet。
我們打算前端的程式都交給 Vue 去實作,因此新增時選擇 Web API 專案範本,執行這個範本時,不會產生任何前端頁面的程式碼,這樣讓我們更輕鬆和 Vue 做整合。
如果之後你的 Vue 專案有選用 TypeScript 作為開發語言,那地表上最強的 IDE,Visual Studio,內建了自動幫你編譯 TypeScript 成 JavaScript 的功能,但我們希望這件事交由 Vue CLI 來幫我們處理,因此需要修改專案檔的設定。
在專案檔上按右鍵選擇編輯 DemoVueDotnet.csproj 修改專案檔設定,在 Visual Studio 2019 也可以直接用滑鼠點擊專案黨兩下來開啟。
在 PropertyGroup 區段中加入 <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> 設定不要自動編譯 TypeScript 檔。
如果你之後所建立的 Vue CLI 專案沒有用 TypeScript 了話,這個步驟可以跳過。
Vue CLI 會幫我們編譯出靜態...