前言

今天是開發的Day3，主要任務仍是切版與熟悉Tailwind。

實現內容

• 頁面大致完成，置換字型和顏色

已解決問題

1. 如何在Vue中導入GoogleFont？

• 先在<style>裡加入<lang=scss>，使其可以撰寫SCSS。
• 使用CDN方法在app.vue內import字型。

//app.vue
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

html, body {
  font-family: 'Roboto', sans-serif;
}

#app {
  font-family: 'Roboto', sans-serif;
}

參考文章：How do I add a Google Font to a VueJS Component?

2. 如何在Tailwind內自訂顏色？

由於Tailwind的className自帶的顏色並不一定是設計稿顏色，故需要在配置文件tailwind.config.js中的theme.colors部分直接添加自定義的顏色。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
      'metal': '#565584',
      'tahiti': '#3ab7bf',
      'silver': '#ecebff',
      'bubble-gum': '#ff77e9',
      'bermuda': '#78dcca',
    },
  },
}

參考文章：Customizing Colors

待完成任務

切版

• 設計稿上的兩條細線：是否需要點擊展開更多內容的交互效果？
• icon置換：需要替換設計稿中的通用icon為專案需要的圖標，要注意圖標風格保持一致。
• RWD規劃：可以設定一個break point，在不同螢幕尺寸下調整排版與間距，保證內容可讀性。小螢幕時可以隱藏次要內容。

指令

• v-model雙向綁定可以用在表單元素，跟使用者的輸入進行雙向同步。
• v-on監聽DOM事件，如點擊、輸入等，調用方法執行相應邏輯。

firebase

• firebase驗證和vue的串接：
  在created或mounted階段初始化firebase，並使用onAuthStateChanged監聽驗證狀態的變化。

總結

• 根據專案需求，合理運用Vue的指令與組件開發頁面。
• 留意網頁的響應式設計，保證不同設備下的友好體驗。
• 需要注重代碼的可維護性，如合理的組件拆分。