Vue筆記4-Vue.js + TypeScript + ASP.NET Core

這兩年前端寫得少，Vue 筆記呈現「外出取柴」狀態轉眼也一年多。這段期間仍在留意 Vue.js 發展，專案上也用 Vue 取代 AngularJS 實作過幾個網頁的 MVVM，但嚴格來說沒什麼長進。

前幾週有網友問起老程式 -中文編碼解析工具，讓我興起念頭，不如把它改成網頁版順便開源吧! 想當然爾這種練習新技術的大好機會怎可錯過，就決定用 Vue.js + TypeScript + ASP.NET Core 上場吧! (在工作應用新技術前先寫個「訂便當系統」練兵，體驗細節裡藏了多少魔鬼，向來是我最愛的策略)

依據這段時間的觀察體會，對於如何在專案上應用 TypeScript 及 Vue.js，我身為 KISS 信徒，心證已成：

如果網頁仍以 cshtml、WebForm 為主體，使用 Vue.js 純粹只為享受 MVVM 好處，建議用最簡單的做法，在 HTML 加上 <script src="vue.js" > 引用 Vue.js，直接用 JavaScript 寫 new Vue() 搞定 data、computed、methods 實現 MVVM，頂多公用函式庫用 TypeScript 寫編譯成 js 引用。網頁 DOM 由後端決定，MVVM 只是輔助，Vue.js 不過是香料，為此扯上 webpack 讓專案複雜三倍，不值得。

如果網頁會寫成 SPA 形式，全面採用 Component 概念組裝網頁，此時 Vue.js 一躍為主角，用 TypeScript 開發享受強型別、模組化特性是有必要的。遇到這種情境沒什麼好猶豫，就是用 vue-cli 建立框架建，認命擁抱 webpack、npm 這些前端必學的硬知識。

先前在專案應用 Vue.js，我都是採用第一種做法，在 MVC cshtml 掛上 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script> ，補上 .js 寫一段 var app = new Vue({ el: '#app', data: { ... 搞定 MVVM。這次的 Coding4Fun 專案，是我正式體驗 TypeScript + webpack 的組合(逃避了好久，終究還是面對了)，而這篇筆記的重點會放在 - 如何開始一個 Vue.js + TypeScript + ASP.NET Core 的整合專案 ?

如果你跟我一樣對 webpack 一無所知，從有整合 Vue.js 的 ASP.NET Core SPA 網站專案範本建一個可以跑的網站開始是很不錯的切入點。不過查到一個壞消息：微軟的官方 SPA 專案範本因人力資源有限，已於 2018 2 月起停止支援 Vue.js、Knockout 跟 Aurelia(但仍能下載及使用)，只維持 Angular 與 React.js，此一決定不意外地引起 熱烈討論 ，但既成定局，要等未來 Vue.js 更強大才有機會改變。

由於上述原因，Vue SPA 專案範本未隨 .NET Core SDK 安裝，需使用以下指令下載。(註：另外已有社群維護的 ASP.NET Core + Vue.js SPA 專案範本 ，亦是選項)

dotnet new -i "Microsoft.AspNetCore.SpaTemplates::*"

安裝後我們就可以用 dotnet new vue 建立一個 TypeScript + Vue.js + ASP.NET Core 的專案。指令如下：

dotnet new vue 
npm install

(npm install 要花點時間，約一兩分鐘)

目錄下會出現 .csproj、tsconfig.config、webpack.config.js ，這就已是一個用 TypeScript 寫 Vue.js，結合 ASP.NET Core Web API 提供資料，可以直接編譯執行的完整 ASP.NET Core 專案了。

專案可用 VSCode 開啟。(裝好 VSCode，在該目錄 Cmder 視窗輸入 code . 即可用 VSCode 開啟專案)

執行 Debug 即可瀏覽 ASP.NET Core 網站，最棒的一點是 - 修改 .ts、.css、.html 後，網頁會自動更新反映修改內容，VSCode 的開發體驗沒讓人失望。

同一專案用 VS2017 開啟、編譯也沒問題：

VSCode 對前端程式的支援比較成熟，C# 用 VS2017 寫更得心應手，因此可以同時開啟 VSCode 跟 VS2017 各自修改前端及後端程式 ，就是我先前提過的瀨尿牛丸做法。

在 TypeScript + Vue.js 上總算又前進了一步，其餘心得會再陸續分享。

Tutorial of creating new ASP.NET Core project with Vue.js SPA template.