前言：從後端到前端，一起體驗互動設計的樂趣

嗨，大家好！歡迎來到這次的 IT 鐵人賽專題。我是一名專注於 PHP 和 Python 的後端工程師，這次會和大家分享使用 Vue.js 打造 30 個創意且實用的前端互動功能。對於像我這樣的後端開發者來說，前端設計有時候可能看似遙不可及，但我認為，人生或學習也好，很多時候都必須先勇敢嘗試、動手做！只要踏出第一步，前端的世界也會同樣充滿樂趣。

在這系列文章中，我會從後端工程師的視角出發，一起探討前端設計，希望能夠通過這些實踐過程與心得，和大家分享我的學習收穫。同時，也希望這些內容能夠為其他參賽者和讀者帶來啟發和靈感。

除了介紹常見的前端功能外，還有計劃融入一些獨特的創意，這次並不打算當個「乖乖牌」。作為一個熱衷於新奇想法的開發者，希望在一些常見的功能中加入「不一樣的變化」，嘗試一些不那麼直覺的設計，藉此機會能夠自由發揮，實現一點與眾不同的效果。

你將會學到什麼？

• 動效發想與應用：我將帶你走過從創意發想到功能設計的完整過程，無論是簡單的使用介面元件還是更複雜的商業應用模組，都能滿足你在各種前端場景中的需求。

• 系統化的開發流程：我們將學習如何將動效融入實際的開發流程中，從設計到實現，涵蓋多種實用功能的開發，幫助所學應用到實際日常工作中。

• 創意實現與整合：我們將深入探討如何運用 Vue.js、UnoCSS、TypeScript，以及 CSS Animate 等工具，優化互動設計，提升使用者體驗，讓開發過程更高效、更有成就感。
  

為什麼選擇這個系列？

作為一名後端工程師，我們總是習慣於處理複雜的業務邏輯，但對於前端設計的世界，我們會很好奇前端的世界是怎麼樣呢？所以這次決定跨越這道鴻溝，走進另外一端的領域，看看那些靈活多變的互動效果如何實現。

此外，這個系列會著重於 CSS animations 的應用，展示如何通過 CSS 來實現流暢且吸引人的動畫效果。學習使用 Vue.js 來構建互動性強的前端界面，運用 UnoCSS 來快速設計和調整樣式，並結合 TypeScript 來提高程式碼的嚴謹性，之後的內容也會介紹一些TypeScript支援的相關動畫庫，讓我們的網頁更加豐富多樣。

• Vue.js：一個漸進式的 JavaScript 框架，SPA。使用起來很靈活、有簡單易學的好處，讓開發者能夠輕鬆地架起一個服務。Vue.js

• UnoCSS：一個快速、功能豐富的 CSS 原子化引擎（非框架），它可以幫助你用來定義樣式及客製化，同時保持程式碼的整潔和可讀性。UnoCSS 將為你的開發過程帶來極大的便利，特別是在實作響應式設計時。UnoCSS

• TypeScript：JavaScript 的超集，提供了靜態類型檢查功能，能夠讓你的程式碼在開發過程中更易於維護和擴展。TypeScript
  （如果不熟也沒關係，本次會使用到部分的語法，只要有JavaScript的基礎就可以喔！）

本文適合的人群？

• 前端新手與老手：無論你是剛開始學習前端開發，還是已經有一定經驗的前端開發者，都能從這些創意設計與實用功能中找到靈感和技術提升的機會。

• 後端開發者：如果你主要專注於後端開發，但對前端互動設計感興趣，這個系列將幫助你輕鬆跨越這個領域，並將後端的邏輯與前端的創意結合起來。

• 設計師與產品經理：想要了解如何將創意轉化為實際的技術實現，並與開發團隊更好地溝通，這個系列將提供具體的實現細節與範例，幫助你更好地理解技術可行性。

基礎架設環境

在開始這個系列之前，讓我們先準備好必要的工具吧！別擔心，這些工具都很容易上手。我們會需要 Node.js、UnoCSS、TypeScript，以及一個喜愛的編輯器IDE，如 VSCode。這些生產工具讓我們順利完成接下來的所有實驗。

詳細版本與推薦套件如下：

• Node.js 和 npm、nvm：Node.js(v21.7.3)和 npm、nvm。
• TypeScript extension :TypeScript Vue Plugin (Volar)
• UnoCSS extension :UnoCSS

開發起手式

接下來，我們將輕鬆地一步步配置開發環境。首先，建立一個新的 Vue.js 專案資料夾，然後安裝必要的套件，配置 UnoCSS，最後啟動開發伺服器網頁。
(你可以選擇你喜愛的配置 比如 pnpm 或者是 bun，下面內容使用 npm 示範 )

1. 建立我們的專案

npm create vite my-vue-app --template vue-ts

✔ Select a framework: › Vue
✔ Select a variant: › TypeScript
確定好按下Enter

2. 進入到我們剛建立的專案資料夾並且安裝一些必用套件

cd my-vue-app
npm install vite unocss vue-router pinia

3. 設定UnoCSS配置。
   專案根目錄下手動建立檔名uno.config.ts並且貼上以下程式碼

import {
    defineConfig,
    presetIcons,
    presetUno,
    presetAttributify,
  } from 'unocss'
  
  export default defineConfig({
    presets: [
      presetUno(),
      presetIcons({ scale: 1.2 }),
      presetAttributify(),
    ]
  })

4. 在專案檔案src/main.ts引入 UnoCSS，以及 UnoCSS Reset
   並且刪掉style.css

// import './style.css' -> 刪掉這行與這隻檔案
import 'uno.css'
import '@unocss/reset/tailwind-compat.css'

5. 在專案檔案 vite.config.ts 中配置 UnoCSS

import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [
    vue(),
    UnoCSS() //還有加上這裡
  ],
})

6. 最後一步啟動你的服務，有看到畫面就大功告成囉！

npm run dev

成功畫面示意圖

這只是開始！

成功啟好網頁了嗎？好啦，這只是我們的小小小小小起步，接下來會更好玩喔！小夥伴們，跟上我的腳步一起前進吧！٩(๑❛ᴗ❛๑)۶٩(๑❛ᴗ❛๑)۶