❌錯誤示範 如何在vue專案裡使用 svg 檔案，最直覺的做法： <template> <svg> <use href="./assets/penguin-svgrepo-com.svg" width="50%" height="50%" /> </svg> </template> 開發階段只要...

1. JSX 中 HTML 標籤必須自閉合 HTML 中 input 是 void element，本來不需要閉合標籤。 // ✅ 正確 <input type="text" /> // ❌ 錯誤 <input type="text"> // JSX 會報錯 2. class 要改寫成 className JSX 是 JavaScript，不允許使用 JS 關...

Vue3.2開始將 <script setup> 移除experimental status，和setup()區別在有許多 option API 有了替代方案，props, emit 也可以寫在 setup，variable 或 function 也不需要透過 return 才能讓 <template> 使用，哇！寫法怎麼好像有點既是感呢 下面會利用 TodoMVC...

先說結論，我認為不適合用 mocha 進行 vue3 單元測試(@vue/test-utils)，反覆查了很久的資料，相關的套件支援度不足等有重重的障礙，根據 @vue/test-utils 目前提供的測試範例，選擇 Vitest 會更適合。 完整程式碼上傳至 Github (連結)。 一、安裝 首先，第一個問題就是 vue 的版本不能太新，目前只支援 3.0.7，因此對應安裝了...

Github pages 適合展示靜態頁面，只要在 github 建立 gh-pages 分支，可依據用戶名稱和repo名稱來開啟頁面。 https://[USER_NAME].github.io/[REPO_NAME]/ 以這個專案為例 https://github.com/chenuin/JavaScript30 路徑會是 https://chenuin.githu...

Vue2 與 Vue3 比較 vue2 v-model 的使用方式在這篇「[Vue.js] 如何在component自訂v-model」介紹，簡單說就是結合v-model其實綁定了名為 value 的 props 和 input 的 emit事件，因此所謂的 v-model 就是一個父子元件的雙向溝通，在 vue2 兩者是相同的： <input v-model="username"&g...

Composable 與 Mixin 比較 Vue3 的 composable 乍看下和 mixin 用途很類似，可以提供各個元件共用程式碼。但與 mixin 相比，composable 主要有三個優勢： 第一，元件可以很明確的區分使用的 composable 來源，當使用的 mixin 一多時，追朔來源相對困難，無法一眼看出由哪個 mixin 實作。 第二，多個 mixin 無法確保使...

根據「[Vue.js] 如何建立 Vue3 + webpack5 專案範例」的內容，封裝時已經先建立目錄 dist/ ，新增 index.html，預先將 main.js 加到 script 中。 接著，以下要介紹 HtmlWebpackPlugin ，這個 webpack plugin 可以自動產生 Html，並自動將所有的 js 檔加入 script 中。下面的操作會用 vue3-we...

Figma 如何匯入現有網站，可以使用 Figma to HTML, CSS, React & more! 快速解決！ 可以先安裝 google chrome 的擴充功能、Figma的擴充功能，再到網站使用 google chrome 的擴充功能匯出 Json，並到 Figma 將檔案匯入。 成果雖然會和實際網站有些差別，但很方便。 Figma的擴充功能 Google...

根據維基百科：「Webpack 是一個開源的前端打包工具。Webpack 提供了前端開發缺乏的模組化開發方式，將各種靜態資源視為模組，並從它生成優化過的程式碼。」，使用前必須安裝 Node.js。 webpack 從版本4.0.0開始，可以不需要設定設定檔(webpack.config.js)，設定檔最基本的設定分別是：Entry、Output，前者代表 webpack 必須從哪邊開始進行...