以下說明如何使用 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 ...

v-for迭代陣列或物件時需要設定key，是為了避免重複產生DOM元素而浪費資源，因此將key視為一個辨識的依據，所有的key必須保持唯一。因此如果key值不小心重複，console甚至會出現 Duplicate keys detected: ... This may cause an update error. 這樣的警示訊息。 為了顯示key的作用和影響，用下面的例子來看，程式內容大意...

第一部分、父元件→子元件 利用props將資料傳給components使用 1. 子元件的設定 首先有一個子元件(child component)，我們設定一個 props 為 userName，型態為String，如果data內的參數，你可以直接在模板裡用 `` 印出，或在function內以 this.userName 來進行操作。 template的內容是以顯示 userNa...