iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 1971 瀏覽

鐵人賽 Modern Web DAY 23

前端暴龍機，Vue2.x 進化 Vue3 系列第 23 篇

技術 [前端暴龍機，Vue2.x 進化 Vue3 ] Day23.正式進化-Vue3 起手式

ゴキゲンな蝶になってきらめく風に乗って今すぐキミに会いに行こう余計な事なんて忘れた方がマシさ .... Vue2.x 進化回憶起當時的數碼寶貝經典...

gior__ann ‧ 2021-10-02 ‧團隊請付費解鎖團隊名稱

1 Like 0 留言 8935 瀏覽

鐵人賽 Modern Web DAY 17

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 17 篇

技術 [Day17] Vue 3 單元測試 (Unit Testing) - Vue Test Utils + Jest 基本範例 & 核心語法

在開始進入複雜的內容之前，我想先帶大家認識幾個會大量出現在每一個測試程式碼裡的核心語法，這些語法如果不了解的話可能就沒辦法看懂之後的測試程式碼，所以我們趕快開始...

Mia Yang ‧ 2021-10-02 ‧團隊Outcome First 2.0

2 Like 0 留言 9520 瀏覽

鐵人賽 Modern Web DAY 16

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 16 篇

技術 [Day16] Vue 3 單元測試 (Unit Testing) - Vue Test Utils + Jest 基本介紹 & 安裝

什麼是單元測試？單元測試 (Unit Testing) 是針對程式碼的最小單位來進行正確性檢驗的測試工作，並確保程式碼不會在迭代維護的過程中出現 Bug，通過...

Mia Yang ‧ 2021-10-01 ‧團隊Outcome First 2.0

1 Like 1 留言 2515 瀏覽

鐵人賽 Modern Web DAY 15

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 15 篇

技術 [Day15] Storybook - Publish Storybook (Static web application & Chromatic)

我們透過前幾天介紹的所有內容 Storybook - 基本介紹 & 安裝 Storybook - What's a story and how...

Mia Yang ‧ 2021-09-30 ‧團隊Outcome First 2.0

0 Like 0 留言 12834 瀏覽

鐵人賽 Modern Web DAY 17

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue 系列第 17 篇

技術 Day_17 : 讓 Vite 來開啟你的Vue 之取得模板元素 ref

Hi Dai Gei Ho~ 我是Winnie～突然想來說說：其實這篇應該要與上篇的資料定義 ref 一起的，會拉出成為一篇的主要原因是因為當時自己對Vu...

Winnie Wu ‧ 2021-09-29

1 Like 2 留言 2458 瀏覽

鐵人賽 Modern Web DAY 14

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 14 篇

技術 [Day14] Storybook - Colors & Typography

Storybook 除了可以為元件攥寫 Story 以外，也可以攥寫純內容的說明文件，不過純內容的說明文件只能使用上一篇所介紹的 MDX 格式，所以如果還太不熟...

Mia Yang ‧ 2021-09-29 ‧團隊Outcome First 2.0

1 Like 1 留言 3143 瀏覽

鐵人賽 Modern Web DAY 13

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 13 篇

技術 [Day13] Storybook - MDX

MDX 是 Storybook 提供的另一種攥寫文件的格式，MDX 結合了 Markdown 和 JSX 的標准文件格式，使我們可以用一些 Markdown 語...

Mia Yang ‧ 2021-09-28 ‧團隊Outcome First 2.0

1 Like 2 留言 3002 瀏覽

鐵人賽 Modern Web DAY 12

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 12 篇

技術 [Day12] Storybook - Writing Docs

DocsPage DocsPage 是由 Storybook Docs 所提供的頁面，無需任何的設定自動就會從 Stories 和元件中的 props, emi...

Mia Yang ‧ 2021-09-27 ‧團隊Outcome First 2.0

1 Like 0 留言 2552 瀏覽

鐵人賽 Modern Web DAY 11

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 11 篇

技術 [Day11] Storybook - Controls

Storybook 有一個很強大的輔具工具 Controls ，它提供一個 GUI 介面讓我們可以即時的調整元件的參數，必且會立即在 Canvas 中改變元件的...

Mia Yang ‧ 2021-09-26 ‧團隊Outcome First 2.0

0 Like 1 留言 2602 瀏覽

鐵人賽 Modern Web DAY 10

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 10 篇

技術 [Day10] Storybook - Configure story rendering

在 Storybook - 基本介紹 & 安裝有提到 .storybook/preview.js 這支 js 檔是用來控制 Story 呈現的方式，它...

Mia Yang ‧ 2021-09-25 ‧團隊Outcome First 2.0

1 Like 0 留言 4127 瀏覽

鐵人賽 Modern Web DAY 12

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue 系列第 12 篇

技術 Day_12 : 讓 Vite 來開啟你的Vue 之來!開始你的 Vue 3

Hi Dai Gei Ho~ 我是Winnie～進入Vue章節前的溫腥提醒：在之後的文章中，預計不會針對 Vue 的基本使用做深入的講解(如:v-mode...

Winnie Wu ‧ 2021-09-24

0 Like 1 留言 2759 瀏覽

鐵人賽 Modern Web DAY 9

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 9 篇

技術 [Day09] Storybook - What's a story and how to write

Story 是元件呈現狀態的描述，開發者可以為每個元件攥寫多個 Story，也就是說元件可能會因為不同的參數組合而有不同的樣貌，而我們可以透過定義 Story...

Mia Yang ‧ 2021-09-24 ‧團隊Outcome First 2.0

1 Like 2 留言 5058 瀏覽

鐵人賽 Modern Web DAY 8

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 8 篇

技術 [Day08] Storybook - 基本介紹 & 安裝

Credit: https://www.behance.net/gallery/35988339/Style-guide-e-commerce-web-app...

Mia Yang ‧ 2021-09-23 ‧團隊Outcome First 2.0

0 Like 1 留言 4165 瀏覽

鐵人賽 Modern Web DAY 7

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 7 篇

技術 [Day07] Vue i18n - Datetime Formatting

在本地化 (localize) 專案時，我們可能會遇到需要處理日期時間顯示的問題，因為日期時間的顯示方式可能會因為每個國家而有所不同，例如： <p>...

Mia Yang ‧ 2021-09-22 ‧團隊Outcome First 2.0

0 Like 2 留言 4151 瀏覽

鐵人賽 Modern Web DAY 6

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 6 篇

技術 [Day06] Vue i18n - Number Formatting (Currency 貨幣)

在本地化 (localize) 專案時，我們可能會遇到需要處理金錢、價錢等貨幣的問題，在顯示價錢時我們會需要依據當前的語系顯示相對應的貨幣符號，例如： &lt...

Mia Yang ‧ 2021-09-21 ‧團隊Outcome First 2.0

0 Like 0 留言 3418 瀏覽

鐵人賽 Modern Web DAY 5

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 5 篇

技術 [Day05] Vue i18n - Component Interpolation

在本地化 (localize) 文字訊息時，我們可能會遇到需要特別處理 HTML tag的情況，什麼意思呢？我們來看一下上圖紅框中的句子的 HTML 結構。...

Mia Yang ‧ 2021-09-20 ‧團隊Outcome First 2.0

0 Like 1 留言 2362 瀏覽

鐵人賽 Modern Web DAY 4

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 4 篇

技術 [Day04] Vue i18n - Pluralization

在本地化 (localize) 文字訊息時，我們可能會遇到某些語言會有複數型態的狀況 (最常見的就是英文)，雖然我們可以透過個別定義 key value 的方式...

Mia Yang ‧ 2021-09-19 ‧團隊Outcome First 2.0

0 Like 1 留言 3408 瀏覽

鐵人賽 Modern Web DAY 3

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 3 篇

技術 [Day03] Vue i18n - Message Format Syntax

紅框中的句子 Welcome to Your Vue.js App 如果我們想要將其中的 Vue.js 變成隨時可以替換時該怎麼辦？上一篇我們介紹的基礎用法...

Mia Yang ‧ 2021-09-18 ‧團隊Outcome First 2.0

2 Like 3 留言 19868 瀏覽

鐵人賽 Modern Web DAY 2

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 2 篇

技術 [Day02] Vue i18n - 導入 & 基礎用法

i18n 全寫為 internationalization，俗稱的多國語系也常被稱之為本地化 (Localization)。隨著現在網路的發達和資訊的流通...

Mia Yang ‧ 2021-09-17 ‧團隊Outcome First 2.0

2 Like 2 留言 2862 瀏覽

鐵人賽 Modern Web DAY 1

前端工程師在工作中的各種實戰技能 (Vue 3) 系列第 1 篇

技術 [Day01] 前言：常見的前端實戰技能有哪些？

Credit: https://lilly021.com/angular-vs-react-vs-vue-js/ 身為一個前端工程師，除了框架 (Vue, R...

Mia Yang ‧ 2021-09-16 ‧團隊Outcome First 2.0

3 Like 3 留言 5560 瀏覽

鐵人賽 Modern Web DAY 1

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue 系列第 1 篇

技術 Day_01: 讓 Vite 來開啟你的Vue 前言

Hi Da Gei Ho～初次見面，我是Winnie～我是一位剛轉職六個月的菜鳥前端(前身是網頁設計師)，如果對於我的轉職的過程有一絲好奇的朋友的可以看看...

Winnie Wu ‧ 2021-09-13

0 Like 2 留言 3514 瀏覽

鐵人賽自我挑戰組 DAY 30

網頁前端框架 Vue 3 從頭開始（重新挑戰）系列第 30 篇

技術 vue3 Composition API 學習手冊-30 實戰API練習

前面文章提到許多前、後端分離的開發方式，也模擬過很多次資料來自於外部（json）的開發，今天跟大家介紹一個網站，能讓我們真正模擬網頁資料來自於後端工程師所提供A...

史坦利 ‧ 2020-10-12

0 Like 0 留言 2190 瀏覽

鐵人賽自我挑戰組 DAY 28

網頁前端框架 Vue 3 從頭開始（重新挑戰）系列第 28 篇

技術 vue3 Composition API 學習手冊-28 打包與回顧

vue3 Composition API的文章寫到這邊，歷經了：基礎介紹篇（v-for、v-on、v-bind...等等）安裝vue-cli與基礎介紹認...

史坦利 ‧ 2020-10-10

0 Like 0 留言 4252 瀏覽

鐵人賽自我挑戰組 DAY 27

網頁前端框架 Vue 3 從頭開始（重新挑戰）系列第 27 篇

技術 vue3 Composition API 學習手冊-27 以前叫mixin的東西

前幾篇文章已經介紹過vue的元件化設計的特色，不僅僅是頁面中的小元件，我們甚至可以將整個頁面都做成一個元件，今天來分享的是除了元件能共用之外，連函數也可以共用，...

史坦利 ‧ 2020-10-09

0 Like 0 留言 3036 瀏覽

鐵人賽自我挑戰組 DAY 26

網頁前端框架 Vue 3 從頭開始（重新挑戰）系列第 26 篇

技術 vue3 Composition API 學習手冊-26 Dynamic Route

延續上一篇文章，今天來介紹動態路由，在瀏覽網頁的時候如果大家有注意，許多網頁在瀏覽上都會經由網址上傳遞參數後來決定頁面內顯示的內容，例如：雖然頁面中顯示的...

史坦利 ‧ 2020-10-08

0 Like 0 留言 2372 瀏覽

鐵人賽自我挑戰組 DAY 25

網頁前端框架 Vue 3 從頭開始（重新挑戰）系列第 25 篇

技術 vue3 Composition API 學習手冊-25 vue-router 4.x 基礎介紹

在傳統網頁開發中，我們常常會繪製一個類似下方的網頁架構圖，有些接案的朋友還會依照頁面數量跟業主來收取費用，因為過去的網頁開發，通常是一頁一頁製作的，許多重複性的...

史坦利 ‧ 2020-10-07

0 Like 0 留言 3819 瀏覽

鐵人賽自我挑戰組 DAY 24

網頁前端框架 Vue 3 從頭開始（重新挑戰）系列第 24 篇

技術 vue3 Composition API 學習手冊-24 單文件元件設計

之前在「vue.js 3.x 學習手冊 (19) 組件的綜合練習」文章中有提到，如果需要跨文件取用元件的話，需先了解webpack和vue-cli的使用，而前幾...

史坦利 ‧ 2020-10-06

0 Like 0 留言 5179 瀏覽

鐵人賽自我挑戰組 DAY 23

網頁前端框架 Vue 3 從頭開始（重新挑戰）系列第 23 篇

技術 vue3 Composition API 學習手冊-23 安裝scss編譯器

當我們透過vue-cli來建置專案後，因為預設也會幫我們安裝好webpack打包工具，所以我們可以開始使用scss來撰寫我們的樣式檔，這會讓管理上變得比較方便，...

史坦利 ‧ 2020-10-05

0 Like 0 留言 2412 瀏覽

鐵人賽自我挑戰組 DAY 22

網頁前端框架 Vue 3 從頭開始（重新挑戰）系列第 22 篇

技術 vue3 Composition API 學習手冊-22 vue cli 起手式

我們已經在上一篇文章透過vue建立好了專案，也利用VS Code將專案資料夾準備妥當，接下來一樣由淺入深的來介紹一下網頁的開發，回憶一下上次有介紹的專案資料夾結...

史坦利 ‧ 2020-10-04

0 Like 0 留言 2534 瀏覽

鐵人賽自我挑戰組 DAY 21

網頁前端框架 Vue 3 從頭開始（重新挑戰）系列第 21 篇

技術 vue3 Composition API 學習手冊-21 透過 vue cli 來建立專案

建立專案方法一. 透過終端機建立專案上一篇文章我們已經介紹完如何安裝vue cli，接下來就要透過他來建立專案，進而體驗使用vue cli的優點，接下來我...

史坦利 ‧ 2020-10-03