VueJS - 筆記長也

初探 VueJS - 元件與 Option 生命週期函數

元件的概念 元件的概念其實在其他前端框架,如 ReactJS 都有類似的概念,當我們遇到需要重複處理的東西時,可以只設計一次後續就能重複使用,當需要修改的時候也只需要修改一個東西就好,也更易於管理。至於切分的方式都完全視專案不同而定,這邊先不去討論「什麼情況下應該要切分出元件」這個議題,但大多數會不斷被重複利用的東西(例如 for 迴圈輸出代辦事項 item)就有寫成元件的效益。 元件的建立......

初探 VueJS - Option API 和Composition API 比較

本篇文章我們將來了解關於 Vue 篩寫元件的兩種方法: Option 以及 Composition 兩種API。針對個別詳細的用法與概念,將會在另外的文章呈現。 Option API 和 Composition API  Option API 是原先 Vue 2 提供的方方法,而 Vue 3 開始新增了 Composition API 的寫法。 明顯的差異 比較可見的差異就是在於程式碼的管理方式, Option API 較有明確規範,必須遵循 API 的方法定義元件......

初探 VueJS - VueJS 專案結構介紹

以Vite建立的Vue專案結構 透過Vite建立專案之後,目錄會因為選擇不同的套件而有些許不同,在本次我們選擇了以下套件: Vue Router : VueJS 官方的前端路由套件,建議安裝 Pinia : 狀態管理器,可安裝 Vitest : 單元測試框架 Cypress : E2E測試框架 ESLint : 程式碼格式檢查(通常會裝) Prettier : 格式化程式碼 (原則上都選了)......

初探 VueJS - 建立第一個Vue專案

初探 VueJS 系列前言 許久未更新網站了,最近也已經畢業並進入職場工作了,由於在學校的緣故,應該會有機會開始更新一些主題。 本次將更新的是 Vue 的基本系列,由於前一陣子找工作的時候,很多企業都是使用 Vue 作為前端函式庫(或框架),反而 ReactJS 以及 Angular 都相對較少,所以給自己一個新的目標。 VueCLI 與  Vite Vue 作為一個受歡迎的前端框架,自然也有類似於 React 以......