Storybook 附加元件：元件原始碼

Storybook 附加元件「元件原始碼」允許您在 storybook 附加元件面板中檢視您的元件範本。

框架支援：Vue、React（即將推出...）

開始使用

yarn add -D component-source

然後在您的 Storybook 設定中建立一個名為 addons.js 的檔案。

將以下內容加入其中

// register the notes addon as a tab
import 'component-source/register';

現在，您可以使用 source 參數為每個故事新增註解。

Vue

import { storiesOf } from '@storybook/vue';

import MyButton from '../src/components/MyButton.vue';

storiesOf('MyButton', module).add(
  'with some emoji',
  () => ({
    components: { MyButton },
    template: '<my-button>😀 😎 👍 💯</my-button>',
  }),
  { 
      source: {
        // Note: Path should be start from /src/ and must be end with file extension
           publicPath:'/src/components/MyButton.vue'
      },
  }
);