上一篇將 blog 所需要的頁面整體結構都建好了，
但其實內容都還沒有做啊。

因為會用到許多套件，接下來的篇幅，會先將頁面所需要的元件寫完，
再完成所有頁面的切版與資料串接。

總共會開發 5 個元件：

• TheTags: 顯示一篇文章包含的 Tags 的元件。
• TheMarkdown: 最重要的將 markdown 轉換為 html 的元件。
• ThePostPreview: 預覽一篇文章的元件。
• codemirror: 使用 vue-codemirror 讓輸入 markdown 的 input 有高亮。
• FormAddPost: 新增和更改文章所需要的元件(包含 simple-vue-validator)。

當然這一篇，先從最容易的元件 TheTags 開始做起：

使用 plop 新建 TheTags 元件

還記得之前擴充的指令 plop 吧？

這邊直接利用指令來建立新的元件

npm run plop
# 並輸入 TheTags

截圖：

這樣就輕鬆建立好一個新的元件了。

開始開發 TheTags 元件

template(pug):

直接使用 vuetify 提供的元件 v-chip，組成 TheTags 元件。

script:

<script>
export default {
  name: 'TheTags',
  props: {
    tags: { type: Array },
    selected: { type: Boolean },
  }
}
</script>

style(stylus):

此處覆寫 v-chip 的樣式，是透過 >>> Deep Selectors 。

storybook 截圖：

程式碼放在以下 branch：

013-TheTags-component

指令：

git clone -b 013-TheTags-component --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install
npm run storybook