Vue Avatar 解決了我覺得大頭照那個位置一直很空洞的問題

Avatar 是大頭照的意思。其實之前在用 PHP 就發現有類似的 package (以 Laravel 來說，就有像是 laravolt/avatar)，可以爬出一段使用者的名稱，回傳文字的簡寫。然後隨意找找還真的讓我找到 vue 也有好心的開發者作出產出 avatar 的 component。

Git Repo Demo 連結: https://eliep.github.io/vue-avatar/
Git Repo: https://github.com/eliep/vue-avatar

不過我還是用 ES5 的方式在使用，步驟如同官方說明。

載入 vue 以及 vue avater 的 js 檔案

<script src="/assets/js/vue.min.js"></script>
<script src="/assets/js/vue-avatar.min.js"></script>

除了基本的載入 vue-avatar.min.js 之外，還要在 vue 初始化一個 instance 的地方加上 components 的設定，例如:

new Vue({
  el: '#app',
  components: {
    'avatar': Avatar.Avatar
  },
  // 來一點示範的資料
  data: {
    username1: 'Win.Wu 吳穎穎',
    username2: 'YIYING WU',
    username: "hello world",
  },
  ....

在 HTML 的地方:

<avatar :username="username1" :size="40"></avatar>
<avatar :username="username2" :size="40"></avatar>
<avatar :username="username" :size="40"></avatar>

結果:

<avatar> 這個 component 還有很多 attr/props 可以用，設定方式都在 git pages 上，如果你有想要客製化什麼部分，請從文件上找找吧。

只是做一般需要 member 登入的 website，就算是透過臉書也有可能是使用者沒有大頭照的情況，為了不讓那個位置空著，或是放個什麼奇怪的 icon，也許這是一種方式 :P

(我純粹是自己很喜歡而已 :))