何謂 Mock Data Mock Data 指的是假資料，通常是前端為了輔助切版或開發去模擬 API 所回傳的假資料。 為何要 Mock Data 你可能有一些前端開發經驗，然後將 UI 稿看到的資料直接寫在 Code 內 (ex: Vue 中的 data)，之後等後端 API 開發好再進行串接。 然而，這麼做最大的缺點就是你需要對 Code 頻繁更改，切版時、串接時都會一直進行修改，你也有可能忘記刪除原先 …

最近遇到需要在專案中呈現圖表，經過初步調查後決定使用ECharts，在 Vue 2 時網路上有大量的包裝器將各種圖表套件包裝起來以利使用，但在 Vue 3 後較少，其實有了 Composition API 後有時候不見得需要，本篇文章以圖表類型做封裝，希望能為有相同需求的人提供幫助。 目錄結構說明 主要檔案為兩個，一個是 App.vue 為我們的首頁，一個則是被我們封裝過的EChart 檔案 usePie.js。 . ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src ├── App.vue 首頁，圖表所在位置 ├── composable │ └── usePie.js 封裝後的Echarts └── main.js

前言 這是一篇前端面試紀錄，從退伍2020/12/22到正式上工2021/01/21，面試期間看了很多文章及分享文，因此寫下此篇紀錄希望能對其他人有所幫助。 背景 南部地名科大資管學士、北部地名科大電子碩畢，因寫完大學專題後覺得自身比同學程度較高，因此決定攻讀碩班並在期間累積 Side Project ，不過碩班的辛酸血淚史又是另一回事了。 大學期間主要學Java、C …

前言 看完CSS Flexbox 新手入門教學 — 基礎語法&觀念之後，接著我們要試著透過實戰更熟悉Flexbox，在這個實戰中我們只專注Flexbox排版，故一開始會將顏色、字體等CSS設置好。 設計圖 完整的成果程式碼可以在 我的CODEPEN找到 事前分析 事前我們可以先分析一下大概會有幾個Element，如UI分析圖可以看到我們的登入介面容器為Class=”container”的DIV，接著由外而內分析。

Flexbox是CSS常見的排版方式之一，相較於其他傳統方式簡易許多，此篇文章將對Flexbox進行詳細介紹，文章中以圖片為主文字文輔，主要讓讀者可以快速的了解各個屬性的效果。 架構介紹 本次教學的架構為一個container，裡面有三個等大的box，容器內的元素我們稱之為item。 <div class=”container”> <div class= …