Day 30：星際總結篇 — 美術與體驗優化 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 28

Vue.js

邊學邊做：Vue.js 實戰養成計畫系列第 30 篇

Day 30：星際總結篇 — 美術與體驗優化

17th鐵人賽

jaina1912

團隊Orbit Coders

2025-10-12 00:28:12

70 瀏覽

分享至

太好了～我們最後一天要把Galactic Explorer簡單美編！
學習重點

美術整合（CSS + Vue 結構）
專案打包與部署（Vercel）

0) 準備素材

-放一張星點圖到 public/img/stars.png（任意 2D 小星點圖，尺寸 512～1024px 都可）

1) 全站星空背景動畫（CSS + 結構）

**a) src/styles/theme.css **

:root{
  --bg-deep:#0b1020;
  --text-main:#e0e7ff;
  --text-dim:#94a3b8;
  --accent:#a78bfa;
  --card:#0f172a;
  color-scheme: dark;
}

/* 背景與星空動畫 */
html,body,#app{ height:100%; }
body{
  margin:0; 
  background: radial-gradient(#0b1020, #000);
  color: var(--text-main);
  font: 16px/1.6 ui-sans-serif, system-ui;
  overflow-x: hidden;
}
.sky { position: relative; min-height: 100vh; }
.stars{
  position: fixed; inset: 0;
  pointer-events: none;
  background: url('/img/stars.png') repeat;
  animation: moveStars 60s linear infinite;
  opacity: .55;
  filter: drop-shadow(0 0 1px #fff3);
}
@keyframes moveStars {
  from { background-position: 0 0; }
  to   { background-position: -10000px 5000px; }
}

/* 共用卡片 */
.card {
  background: var(--card);
  border: 1px solid rgba(167,139,250,.25);
  border-radius: 16px;
  padding: 16px;
}

/* 小動畫工具 */
.fade-enter-active, .fade-leave-active { transition: opacity .35s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

b) src/App.vue 調整美編，加上footer

<template>
  <header class="nav">
    <RouterLink to="/" class="brand">🚀 Orbit Coders</RouterLink>
  </header>
  <RouterView />

  <footer class="ft">© Orbit Coders · Galactic Explorer</footer>
</template>

<style scoped>
.nav { display:flex; gap:16px; align-items:center; padding:12px 16px; border-bottom:1px solid #e2e8f0; background:#ffffff; position:sticky; top:0; z-index:10; }
.brand { text-decoration:none; font-weight:700; color:#0f172a; }
.page { max-width: 1080px; margin: 24px auto; padding: 0 16px; }
.ft { text-align:center; color:var(--text-dim); padding: 24px 0 40px; }
</style>

2) 星際字體（Orbitron）

在 index.html 加過字體連結，放在 <head>：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&display=swap" rel="stylesheet">

在 src/styles/theme.css（或全域 CSS）中加：

body, h1, h2, h3, .brand {
  font-family: 'Orbitron', system-ui, sans-serif;
}

3) 專案打包與部署（Vercel）

a) 本機測試打包

npm run build
npm run preview

預設輸出到 dist/。

b) Vercel 設定

Install Command：npm install
Build Command：npm run build
Output Directory：dist
若子專案在 vite-project/，把 Root Directory 指到那個資料夾，或在根package.json 用：

{ "scripts": {
  "build": "npm --prefix vite-project run build",
  "preview": "npm --prefix vite-project run preview",
  "dev": "npm --prefix vite-project run dev"
}}

c) 環境變數（若有 Firebase / API 等）