使用Visual Studio與Vite開發Vue.js應用程式 | webapi vue js
.NETMagazine國際中文電子雜誌作者:許薰尹審稿:張智凱文章編號:2023/10/4出刊日期:N231025401在本站《使用VisualStudio開發Vue.js應用程式》一文中,介紹了如何使用VisualStudio2022開發工具的「VueandASP.NETCore(Preview)」範本,在一個整合的環境內,同時設計前端Vue.js,以及後端ASP.NETCoreWebAPI應用程式。預設「VueandASP.NETCore(Preview)」範本中整合了VueCLI來開發Vue.js應用程式,不過,VueCLI已經進入維護模式,Vue官方建議我們可以使用官方提供的Vite工具來替代VueCLI。在這篇文章將介紹如何使用VisualStudio202...
.NET Magazine國際中文電子雜誌 作 者:許薰尹 審 稿:張智凱 文章編號:2023/10/4 出刊日期:N231025401
在本站《使用VisualStudio開發Vue.js應用程式》一文中,介紹了如何使用Visual Studio 2022開發工具的「Vue and ASP.NET Core(Preview)」範本,在一個整合的環境內,同時設計前端Vue.js,以及後端ASP.NET Core Web API應用程式。預設「Vue and ASP.NET Core(Preview)」範本中整合了Vue CLI來開發Vue.js應用程式,不過,Vue CLI已經進入維護模式,Vue官方建議我們可以使用官方提供的Vite工具來替代Vue CLI。
在這篇文章將介紹如何使用Visual Studio 2022開發工具整合Vite來開發Vue.js應用程式,以及如何透過範本專案來客製化程式碼。
要使用Visual Studio 2022開發工具進行Vue.js應用程式開發之前,你要先確保開發環境正確安裝了Node.js軟體,Node.js軟體下載網址為:「https://nodejs.org/en/」。 Node.js安裝完成之後,切換到作業系統命令提示字元,輸入以下指令測試安裝的結果,「-v」參數可以查詢軟體的版本: node -v 這的動作的執行結果,請參考下圖所示:
圖 1:Node.js版本。
當使用Visual Studio 2022開發工具要整合Vite來設計Vue.js應用程式時,可以到以下網址:
https://marketplace.visualstudio.com/items?itemName=MakotoAtsu.AspNetCoreViteStarter
下載及安裝適用於開發ASP.NET Core的Vite專案範本:「AspNetCore_Vite_Starter」,以協助程式設計人員,快速地利用範本程式碼來建立前端為Vue.js;以及後端為Web API的專案,請參考下圖所示:
圖 2:「AspNetCore_Vite_Starter」專案範本。
除了手動下載...