Vue筆記4 | vue asp
這兩年前端寫得少,Vue筆記[1]呈現「外出取柴」狀態轉眼也一年多。這段期間仍在留意Vue.js發展,專案上也用Vue取代AngularJS實作過幾個網頁的MVVM,但嚴格來說沒什麼長進。前幾週有網友問起老程式-中文編碼解析工具[2],讓我興起念頭,不如把它改成網頁版順便開源吧!想當然爾這種練習新技術的大好機會怎可錯過,就決定用Vue.js+TypeScript+ASP.NETCore上場吧!(在工作應用新技術前先寫個「訂便當系統」練兵,體驗細節裡藏了多少魔鬼,向來是我最愛的策略)依據這段時間的觀察體會,對於如何在專案上應用TypeScript及Vue.js,我身為KISS...
這兩年前端寫得少,Vue 筆記[1]呈現「外出取柴」狀態轉眼也一年多。這段期間仍在留意 Vue.js 發展,專案上也用 Vue 取代 AngularJS 實作過幾個網頁的 MVVM,但嚴格來說沒什麼長進。
前幾週有網友問起老程式 - 中文編碼解析工具[2],讓我興起念頭,不如把它改成網頁版順便開源吧! 想當然爾這種練習新技術的大好機會怎可錯過,就決定用 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://i1.wp.com/cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>,補上 .js 寫一段 var app = new Vue({ el: #app, data: { ... 搞定 MVVM。這次的 Coding4Fun 專案,...