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 必須從哪邊開始進行...

以下說明如何使用 webpack5 打包 Vue3 專案，若尚未安裝 webpack 5，可以參考「(webpack5 安裝及基礎教學)[https://chenuin.github.io/webpack/2021/08/08/webpack5-getting-started.html]」。 一、安裝 需要安裝的套件如下，特別需要注意的是，在 Vue3 裡支援副檔名 .vue 的 sing...

一、安裝Ruby 作業系統為Ubuntu 20，指令如下： sudo apt update sudo apt install ruby-full build-essential zlib1g-dev 設定用戶的環境變數，應避免用 root 安裝 Ruby Gems。 echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc echo ...