iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
1

上一篇將 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

截圖:

013-001

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

開始開發 TheTags 元件

template(pug):

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

013-003

script:

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

style(stylus):

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

013-004

storybook 截圖:

013-002

程式碼放在以下 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

上一篇
#12: Pages 簡單介紹與初建所有頁面功能
下一篇
#14 套件安裝及設定: markdown-it
系列文
用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言