iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
2

上一篇,整合了 Storybook 和 Nuxt,也建立了一個元件為 MyButton。

但如果每次要新增一個元件,就要建立四個檔案如下:

MyButton

  • index.js
  • MyButton.stories.js
  • MyButton.vue
  • README.md

這樣其實非常麻煩,也浪費時間。

因此今天分享一下使用 plop

幫助我們快速建立檔案,並寫好預設的內容。

安裝

npm i -D plop

建立腳本

建立一個新的資料夾 plop,內容結構如下:

  • plop
    • component
      • index.js
        • index.hbs
        • readme.hbs
        • stories.hbs
        • vue.hbs
    • util/index.js
      • index.js

新增指令

  • package.json
"scripts": {
  "plop": "plop --plopfile ./plop/index.js"
}

使用

npm run plop
# 輸入 TheTextField

TheTextField

成功建立一個新的元件。

輸入 TheTextField 會幫我們建立四個檔案且包含預設內容:

components/TheTextField/index.js

export { default } from './TheTextField.vue'

方便其他地方在引入元件時可以寫成下面這樣:

import TheTextField from '@/components/TheTextField'

components/TheTextField/README.md

自動產生的預設內容為:

# TheTextField Markdown

components/TheTextField/TheTextField.vue

自動產生的預設內容為:

008-002

components/TheTextField/TheTextField.stories.js

自動產生的預設內容為:

import Vue from 'vue'

import { storiesOf } from '@storybook/vue'
import { action } from '@storybook/addon-actions'
import centered from '@storybook/addon-centered'
import { withReadme }  from 'storybook-readme'
import '@storybook/addon-console'
import README from './README.md'

import TheTextField from './'

Vue.component('TheTextField', TheTextField)

storiesOf('TheTextField', module)
  .addDecorator(centered)
  .add('TheTextField', withReadme(README, () => ({
    methods: {
      log() {
        action('TheTextField')()
      },
    },
    template: (
      pug
      `v-app(dark)
        v-container(fluid)
          TheTextField `
    )
  })))

storybook 截圖

storybook

最後附上今天的 branch

以下為 branch 連結:

008-plop

指令:

git clone -b 008-plop --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install
npm run plop
# 輸入元件名稱 (ex. BaseButton)
npm run storybook

上一篇
#7: Storybook 和 Nuxt.js
下一篇
#9: Vuetify 簡介 + (vuetify.config.js)
系列文
用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog30

尚未有邦友留言

立即登入留言