文章列表

2021-07-15

GitHub Pages 使用教學 ⭐ 發布網頁設計成果

教學如何以 GitHub Pages 將網頁設計、前端服務成果進行發布,內容包含 Gtihub Pages 資料夾該如何進行設定,如果沒有正確的設定可能會出現 404,使用上不需要使用到 Gtihub Pages 提供的 Jekyll,正常的使用也不會違反 GitHub Pages 的限制。 本次將示範分別將專案 Source Code 發布於 Master Branch 而 Dist 資料夾發布於 gh-pages Branch,如果有使用動態網頁的需求,GitHub Pages 並不支援 PHP, ASP 等語言,必須使用 Js 與 Restful API 互動才能夠達到動態網頁的效果。

2021-07-15

初心者教學:使用 Vue CLI 打造 Vue App 前端應用服務

以往要寫玩具都是用 Python 來寫,週末在玩雙點醫院的過程中,突然想要寫一個訓練色彩辨別的互動玩具(可能是雙點醫院褪色症的啟發)。同時不想再用 jQuery DOM 操作的方式來寫,但想到對於前端各種工具的熟悉度非常有限,如果要從環境開始準備,並且規劃整個開發流程可能會讓整個專案裹足不前 😑 此時想到 Visual Studio IDE 所帶來的良好開發體驗,何不嘗試以 Vue CLI 的方式建構整個專案,而不要從開發環境開始琢磨,讓時間集中在功能的實踐,忽略環境的細節並且在需要的時候才去搜尋,於是就開始了打造第一個 Vue App 的過程 ✈️

2021-07-13

ASP.NET MVC 使用 Bootstrap-Vue 輕前端解決方案

詳細步驟說明 ASP.NET MVC Framework 如何在設計 View 的時候,加入 Vue.js 前端框架,同時結合 Razor 頁面設計的威力以及享用 Vue.js 所帶來的雙向綁定以及宣告式渲染,讓表單 (form) 的設計方式更為活潑多元。 同時使用了 Bootstrap-Vue 框架,讓輕前端解決方案中,不容易設計 Vue 元件的問題有了替代的解決方式。同時本次的說明是以 Visual Studio 進行說明,有別於使用 Visual Studio Code 的說明方式,要讓原本熟悉 ASP.NET MVC、Visual Studio 的開發人員在熟悉的開發環境中加入 Vue.js 前端框架。