:::info 這個教學是以TailwindCSS 3.4版本為主 因為4.0開始已經不再支援SCSS或LESS，所以如果你有為了Design Token混用需要的話，只能多開一隻CSS檔案處理喔！ 原因如下: https://github.com/tailwindlabs/tailwindcss/issues/15716#issuecomment-2619593290 請查看最新的官方文件: https://tailwindcss.com/docs/installation/using-vite :::

一個方便大家快速上手使用的Scss庫。 如果你偏好Scss開發，且需要和UI/UX設計師按照Guideline協作，這份Library很適合你使用! 當然，你也能很輕鬆的擴充和維護這個架構! :::warning 特別注意！從 Sass 2.0 版本開始會有一些Breaking Change map-get 日後請改用 map.get() 除法不再使用 slash 符號 '/'，請改用math.div() :::

【教學】使用 Capacitor 將 Vue3 輕鬆打包成 APP！ 截圖 2024-09-23 下午3.25.20 🚀 Vue 3 秒變行動裝置 APP，你相信嗎？ 是不是覺得製作 APP 很複雜、還要學 Flutter/Java/Kotlin...😵‍💫 門檻好高？ 別擔心！Vue 3 網頁應用程式一樣可以用 Capacitor 簡單地將它打包成原生 Android 或 iOS 的行動 APP！🎉🎉🎉 本篇以我自己工作上需求，將 Vue3 打包成 Android APK 為主做教學。 關於 Capacitor

綱要： 安裝Git Mac OSX Mac有內建Git的關係，可以不需要額外安裝Git主程式、也不需做任何設定 Windows 安裝檔下載網址：https://git-scm.com/download/win Win10/11還需要設定系統環境變數的關係，安裝好Git之後我們必須進入到電腦的系統環境變數去新增 bin 位置，首先進入到「設定」，然後搜尋「系統環境變數」，點進會看到這個視窗：

綱要： 本課程完整範例 原始碼請參閱：https://github.com/fortes1219/vite_vanilla 安裝nvm 安裝NodeJS以前先安裝nvm的nodeJS版本管理包，以後如果我們要切換成其他的NodeJS版本會方便得多。 Windows 選擇nvm-setup.zip下來安裝

Vue 3 - TS-REST & ZOD (EN) Understanding the Benefits of API Field Validation Contracts. When developing frontend applications in collaboration with backend teams, we often encounter a common issue: :::info API field types or field names are incorrectly specified, and the backend insists that it's a frontend issue. Alternatively, the frontend payload might be incorrect, but the frontend believes the backend secretly changed the API. ::: image

A convenient Scss library for quick use. If you prefer Scss development and need to collaborate with UI/UX designers following the guidelines, this Library is perfect for you! Of course, you can also easily extend and maintain this framework! Source Code Location You can use it directly in your project. It supports Vue, React, Nuxt, and Next. If there are any improvements that can be made, feel free to send a PR after messaging me. https://github.com/fortes1219/scss-base-library npm install

Python Selenium with VSCODE 教學筆記 綱要 :::info 不知道為什麼這篇莫名其妙在Google搜尋「Selenium 教學」的排名特別前面... 來信問開課的人突然暴增，但目前沒有收費開課的打算，所以之後會找個時間把進階教學寫一寫，有更多對E2E自動化測試有興趣的人一起學習是好事。 ::: 關於Chrome的Webdriver :::info

如何在 Vue3.0 使用 Scss 建立容易更換 Skin 的架構 在開發需求上，也許你聽過「換皮」這兩個字。但你知道怎麼設計一個容易維護的多主題架構嗎？這裡分享一個我自己團隊常用的方式給大家參考看看。 綱要 源碼位置 :::info 本篇係基於這篇的Scss Library的內容做架構設計： https://hackmd.io/@FortesHuang/SJ9DhgTGn 實際上Style配置和打包設定請以當下的需要為主

VueJS 2.0 教學筆記: 生命週期與AXIOS API 綱要 [TOC] 一. Vue Life Circle 生命週期 當瀏覽器開始new Vue()階段時，會依序經過以下步驟，且每個步驟都可以根據需要的階段來掛載methods: ==beforeCreate()==

VueJS 3.0 教學筆記: 從2.0銜接到3.0 綱要 [TOC] 前言 Vue3.0在去年2020年9月的時候正式發布，但這次的大改版是向下兼容的，Vue.js 開發團隊在盡量不變動 API 的前提下，對 Vue.js 進行了底層核心的重構，針對過去2.0中幾個明顯缺點進行了重大的改進，並在此基礎上添加了一些更好用的新功能。 所以你同樣可以在Vue3.0中寫2.0的語法，初次接觸的人也不必煩惱「現在應該學習 Vue 2 或者 Vue 3」，直接從3.0起手是沒有問題的！

2020/01/04 Sass/Scss 教學筆記: 用Gulp建置Sass編譯環境並瞭解基礎Git flow 綱要 [TOC] 安裝Git Mac OSX Mac有內建Git的關係，可以不需要額外安裝Git主程式、也不需做任何設定

VueJS 2.0 教學筆記: 父子組件之間的溝通 Prop & Emit 綱要： [TOC] 完整範例： 父組件 子組件 用一個外部載入的組件，可以讓組件上的白色圈圈控制移動到不同座標，來學習 Prop 和 Emit 讓父子組件之間資料能溝通的方法。

10/26 VueJS 教學筆記: Login 登入機制實作 綱要 [TOC] Login 登入機制實作 一般來說，登入後變更路由的驗證會看 Session Storange 或 Cookies 中的 token 是否有效，由此判斷該進入哪個路由。 先在router.js底下新增 login 的頁面與指定 component 名稱、路徑。

VueJS 2.0 教學筆記: i18n 多語套件進階篇 綱要 [TOC] 適用情況 也許你已經熟悉了前面一篇的作法。 但是當我們需要將多語環境的維護擴充為 「由管理員從後台上傳多語CSV檔案」 ，又要抽出一個JSON格式的設定檔來管理API路徑、預設語系等項目時該怎麼做呢？ 安裝 i18n 套件和 js-cookie

11/09 VueJS 教學筆記: i18n 多語系套件 綱要 [TOC] 安裝 i18n 套件和 js-cookie npm install vue-i18n --save npm install js-cookie --save 在專案的src下新建一個lang的目錄，並在其中建立：

VueJS 2.0 教學筆記: 建置開發環境並瞭解基礎Git flow 綱要 [TOC] 安裝Git Mac OSX Mac有內建Git的關係，可以不需要額外安裝Git主程式、也不需做任何設定

2020/02/29 Sass/Scss 教學筆記: 建立flexbox排版為主的共用模組 綱要 [TOC] 為什麼每次更新Git時最好 npm install 一次？會出現什麼問題嗎？ 同學們應該發現了最近課堂上出現了gulp watch時，node-sass要你更新depth 2的套件訊息，我們雖然可以照著錯誤訊息上的指示更新 node 相依套件或者跑一次npm audit fix。 接著你會看見 Git 突然顯示了packge-lock.json和packge.json兩隻檔案的變更(有時只會更新lock那隻)，而你在修正了相依套件更新的問題後必須要將這個變更Push到Git上。

2020/02/22 Sass/Scss 教學筆記: 有效率的切版(下) for迴圈、each、if...else 與 function 綱要 [TOC] 本週開始我們正式進入了用程式邏輯來撰寫樣式的篇章，要做到高效率切版就必須建立起複用性高、且容易擴充的共用組件，而在這之後的課程中也會陸續帶領同學們建立自己的 Sass Library。 這周我們就先來看看如何利用程式邏輯幫助建構樣式吧！ @for迴圈的應用

2020/02/08 Sass/Scss 教學筆記: 有效率的切版(上) 變數、Mixin與Extend來管理flexbox 綱要 [TOC] 多利用線上工具幫助你檢查語法：Sass Meister https://www.sassmeister.com/ Sass Meister 是個Sass/Scss的線上Playground，你可以將Sass語法寫在左邊，網頁會在你輸入完畢後自動在右邊產生編譯結果，Option中可以選擇編譯器要使用哪個版本，這邊我們演示的是dart-sass來幫助Debug。