今天要來實作首頁的部分
應該會有人覺得很奇怪，為什麼SSO會需要首頁? 做登入頁就好了吧?

需要首頁的原因是這樣的

你就做的跟Google一樣就好了！！

而Google的確是有個長這樣的首頁:

醬懂了嗎? 歹命的工程師

#規劃

在首頁的規劃上非常簡單
我們只需要四個元件

1. 最上方的 App Bar
2. 一個只有裝飾功能的 [九宮格] 按鈕xD
3. 一個 [登入] 按鈕，點下去導頁到 [登入口]

就是這麼簡單~

#建立頁面及路由

規畫好之後我們就從頁面及路由開始吧~

#Step 1

開啟 App.vue 把 template 內全砍了只留下 v-app:

<template>
  <v-app>
  </v-app>
</template>

v-app 中加上 router-view:

<template>
  <v-app>
    <router-view></router-view>
  </v-app>
</template>

#Step 2

views 資料夾中的 About.vue 及 Home.vue 可以砍了~
他們沒有利用價值了~要留著懷念也是可以
然後新增兩個頁面:

• Index.vue: 首頁

<template>
  <div>Index</div>
</template>

• Login.vue: 登入頁

<template>
  <div>Login</div>
</template>

#Step 3

這時候，如果程式有在執行中的話就會跳錯，原因是原本的路由已經被砍了，而新的路由還沒設定
於是我們開啟 /router/index.js
把剛剛新增的 首頁 和 登入頁 引用進去:

import Index from '../views/Index.vue'
import Login from '../views/Login.vue'

接著設定路由:

const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
]

這時錯誤就會消失了~

#結果

到這可以測試一下
可以看到兩個路由交替切換時頁面也會跟著變化~

#首頁開發

終於開始今天的目標-首頁開發!!
開啟剛才新增的首頁 /views/Index.vue

#Step 1

最上方App Bar會用到Vuetify-AppBar應用欄組件，可以參考組件API
我會用到這些屬性:

• color: 設定元件底色
• elevation: 設定元件陰影，值從0-24，參考Vuetify-Elevation
  蠻有趣的一點是他被翻譯成「海拔」xD

加入屬性後長這樣:

<template>
  <div>
    <v-app-bar color="white" elevation="0">
    </v-app-bar>
  </div>
</template>

#Step 2

再來要把 [九宮格] 按鈕 和 [登入] 按鈕 放進去:

<v-app-bar color="white" elevation="0">
  <v-spacer></v-spacer>
  <v-btn icon class="ma-3">
    <v-icon>mdi-apps</v-icon>
  </v-btn>
  <v-btn color="primary" small>登入</v-btn>
</v-app-bar>

這邊我用到3個元件:

• Vuetify-Spacers: 空格組件
  作用是在元件之間填充空格，放在這可以讓按紐維持在右邊(因為左邊被填充了)
• Vuetify-Buttons: 按紐組件，參考組件API屬性設定，這裡我用了icon的部分
  • icon: 設定按鈕為圖示
    需要搭配Vuetify-Icons來決定要顯示哪個圖標
  • color: 設定按鈕顏色
  • small: 設定按鈕尺寸為"小按紐"
• Vuetify-Icons: 圖標組件，圖標可以從官方icon搜索，引用時前綴須加上 mdi-

加入後畫面長這樣(美美der):

#Step 3

再來設定一下全局的中文字體樣式，因為預設的實在有夠醜...
個人偏好圓角字體，例如: 微軟正黑體 之類的

剛好最近有學到引用字體的方法，在這邊分享一下

1. 先下載你喜歡的字體，我是下載前陣子蠻夯的粉圓體，點進去按 [免費下載] 就可以囉~
2. 下載下來的字體檔放到 /assets/font 資料夾裡面(資料夾要自己建立唷~)
3. /assets/font 內新增一個 font.css，內容放:

@font-face {
  /* 自己定義引用時的名稱 */
  font-family: "Open Huninn";
  /* 把字體引用進來，3個都要 */
  src: url("../font/jf-openhuninn-1.1.ttf") format("woff"),
    url("../font/jf-openhuninn-1.1.ttf") format("truetype"),
    url("../font/jf-openhuninn-1.1.ttf") format("embedded-opentype");
}

4. 開啟 App.vue 引用 font.css，然後在 div 設定 font-family: Open Huninn:

<style>
@import "./assets/font/font.css";
div {
  font-family: Open Huninn;
}
</style>

步驟做完就完成引用字體摟~
比對一下前後差異:

#Step 4

最後將 [登入] 按鈕加上事件，觸發路由導向登入頁!!

加上 v-on:click事件:

<v-btn color="primary" small @click="goToLogin">登入</v-btn>

補充: v-on可以縮寫為@

對應的事件內容加上Vue Router-push方法:

export default {
  name: "Index",
  methods: {
    goToLogin() {
      this.$router.push({ name: "Login" });
    },
  },
};

事件觸發時，就會導向登入頁囉!!

今日重點:

• 你就做的跟Google一樣就好了QQ
• Vuetify 組件的API查詢及使用
  • Vuetify-AppBar: 應用欄組件
  • Vuetify-Buttons: 按鈕組件
  • Vuetify-Icons: 圖標組件
• 引用字體的方法
• vue router 的 push() 方法觸發路由導向

一個簡單的頁面被我搞的好複雜阿
標題應該改成「如何把開發時間放大10倍」xD

有需要改進或是任何意見建議歡迎下面留言~