#頁面分析

應該9成9以上的人都有做過Google登入的動作吧? (沒有的趕快去試試看~)
在Google登入時，會有輸入帳號、輸入密碼、或是驗證等等頁面，在導向時並不會將整個瀏覽器畫面重新渲染，只會動到部分區域，我們可以利用 Vue Router 的子分頁設定達到這個效果!!

分析我們會用到的子分頁，總共會有這4個部分

輸入帳號 : 從未登入過，會從此頁開始

選擇帳號 : 曾經登入過，會讓使用者選擇要登入哪一個帳號

輸入密碼 : 帳號驗證之後，導向此頁輸入密碼

身分驗證提示 : 這個頁面比較特殊，出現的情境是已登入的狀態下再選擇其他帳號登入，會先導向此頁提示要做身分驗證後才能登入

整個登入頁的流程會是這樣:

註: 移除帳號、忘記密碼等，是頁面中的某個功能，並不是一個頁面

#路由設定

根據頁面分析的結果，可以得知需要四個子頁，先從建立頁面及路由開始吧~

#Step 1

在 /components 中先分別建立檔案:

<template>
  <div>KeyinUser</div>
</template>
ChooseUser.vue: 選擇帳號
<template>
  <div>ChooseUser</div>
</template>
KeyinPswd.vue: 輸入密碼
<template>
  <div>KeyinPswd</div>
</template>
VerifyUser.vue: 驗證身分
<template>
  <div>VerifyUser</div>
</template>
(內建的HelloWorld.vue可以偷偷砍掉...)
#Step 2
接著開啟 /router/index.js

在 Login 的路由設定裡面加上 children 子分頁設定，把剛剛的四個子分頁加進去:
  path: '/login',
  name: 'Login',
  component: Login,
  children: [
      path: 'keyinuser',
      name: 'KeyinUser',
      component: KeyinUser
      path: 'chooseuser',
      name: 'ChooseUser',
      component: ChooseUser
      path: 'keyinpswd',
      name: 'KeyinPswd',
      component: KeyinPswd
      path: 'verifyuser',
      name: 'VerifyUser',
      component: VerifyUser
[1] children放的是陣列，由 路由設定的物件 組成

[2] 子分頁 path 前面不需要加 /

#Step 3
回到 Login.vue，加上 router-view:
<template>
    Login
    <router-view></router-view>
</template>
到這邊就完成路由設定摟~

可以打上網址測試看看頁面變化:

#登入頁開發
在頁面分析時有提到，在切換路由時，只有子分頁的內容會做變化

就像寄居蟹的殼，殼都會是固定的，只有住在裡面的寄居蟹會換
殼的部分就是 Login.vue 本體，而寄居蟹就是其中的 router-view !!
回到正題，我們要先把殼給做出來，有殼寄居蟹才能入住~
#Step 1
最外層會用到Vuetify-Grids網格系統:
Vuetify包含附帶的一個使用合成flex-box的12點佈局系統。

網格包含在應用程序的內容中創建的特定佈局。

其中包含5種媒體斷點，分別用於定位特定屏幕尺寸或方向：xs，sm，md，lg和xl
使用其中的 v-row 和 v-col 組件包住:
<v-row align="center" justify="center">
  <v-col cols="12" sm="8" md="4">
  </v-col>
</v-row>
參考組件API屬性設定:
v-row
align: 設定垂直位置
justify: 設定水平位置
v-col
cols: 設定元件默認列數，值為1~12
sm: sm 斷點觸發時佔有的列數，值為1~12
md: md 斷點觸發時佔有的列數，值為1~12
斷點可以參考這張圖:

網格系統很重要!! 它是學習做出響應式網頁的基礎!!
#Step 2
在 v-col 內放了Vuetify-Cards卡片組件:
<v-card class="elevation-8 pt-12 pb-12 pl-6 pr-6">
  <v-card-title
    v-text="card.cardTitle"
    class="font-weight-black justify-center"
  ></v-card-title>
  <v-card-subtitle
    v-text="card.cardSubTitle"
    class="font-weight-black text-center mt-0"
  ></v-card-subtitle>
</v-card>
v-card
elevation-8: 這個class可以讓元件加上「海拔」xD，設定值0~24
v-card-title: 卡片組件中的卡片標題
v-card-subtitle: 卡片組件中的卡片副標題
這裡用到了內外距的class如 pt-12 pb-12 pl-6 pr-6 等等，參考Vuetify-Spacing

簡單分析一下其中的組合與意義:
第1個字母:
m: margin，外距
p: padding，內距
第2個字母:
t: top，上距
b: bottom，下距
l: left，左距
r: right，右距
a: all，全距
例如: 內右距 = pr ， 外全距 = ma
後方值設定:
0~12: 邊距為 (值 x 4px)

例如: mt-10 = margin-top: 40px
auto: 設定邊距為auto xD
n1~n12: 負外距，只有margin可以設定，邊距為 (值 x -4px)

例如: mt-n10 = margin-top: -40px
#Step 3
v-text 指令設定的 card.cardTitle 和 card.cardSubTitle 要加進 data 中，可以先塞假資料生成畫面(不然什麼都看不到xD):
data() {
  return {
    card: {
      cardTitle: "登入",
      cardSubTitle: "使用您的 Vue SSO 帳戶",
目前畫面長這樣:

有感受到粉圓體的魅力嗎(搞錯重點xD)
#Step 4
要來加上Logo，Logo的部份用到Vuetify-Images圖像組件:
<v-card ...>
  <v-img height="60" contain src="../assets/logo.png"></v-img>
</v-card>
參考組件API屬性說明
v-img
height: 設定圖片高度
contain: 防止圖片不合適時被裁減
加入Logo之後質感提升許多:

#Step 5
殼做好之後寄居蟹 router-view 可以搬進來住囉~
<v-card ...>
  <router-view></router-view>
</v-card>
做到這邊就完成了 Login.vue 的殼了!!

參考完成後的畫面:

今日重點:
登入頁分為 輸入帳號、選擇帳號、輸入密碼、驗證身分 4個子頁，路由設定控制切換
Vuetify 組件的API查詢及使用
Vuetify-Grids: 網格系統
Vuetify-Spacing: 間距
Vuetify-Cards: 卡片組件
Vuetify-Images: 圖像組件
其中網格系統和間距是基本必須要會使用的項目!!!
今天用了很多Vuetify組件，這些組件中很多有趣的屬性沒有使用到，有時間有興趣的人可以去翻一輪，不會使用沒關係，先看看「有哪些組件」、「組件加上什麼屬性會發生什麼效果」也好~
有需要改進或是任何意見建議歡迎下面留言~