Question

我正在尝试学习如何将Storybook用于我使用Vue.js的项目，而我似乎无法制作插件＆＃39; addon-links＆＃39;工作，因为文档主要在React。

我安装了

npm i --save @storybook/vue
npm i --save vue-loader@13.6.1
npm i --save @storybook/addon-actions
npm i --save @storybook/addon-links

插件＆＃39;插件动作＆＃39;的工作原理。

对于＆＃39; addon-links＆＃39;我在网上使用了各种例子，这是其中之一。

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

import { linkTo } from '@storybook/addon-links'

...

storiesOf('Button', module)
  .add('First', () => ({
    template: `<button @click="action">Go to "Second"</button>`,
    methods: {
      action: () => {
        console.log('Go to "Second"')
        linkTo('Button', 'Second')
      }
    }
  }))
  .add('Second', () => ({
    template: `<button @click="action">Go to "First"</button>`,
    methods: {
      action: () => {
        console.log('Go to "First"')
        linkTo('Button', 'First')
      }
    }
  }))

的package.json

{
  "private": true,
  "scripts": {
    ...
    "storybook": "start-storybook -p 9001 -c .storybook"
  },
"dependencies": {
    "@fortawesome/fontawesome": "^1.1.1",
    "@fortawesome/fontawesome-free-brands": "^5.0.3",
    "@fortawesome/fontawesome-free-regular": "^5.0.3",
    "@fortawesome/fontawesome-free-solid": "^5.0.3",
    "@fortawesome/vue-fontawesome": "^0.0.22",
    "@storybook/addon-console": "^1.0.0",
    "@storybook/addon-knobs": "^3.3.11",
    "axios": "^0.17.1",
    "bootstrap": "^4.0.0",
    "jquery": "^3.3.1",
    "js-cookie": "^2.2.0",
    "json-server": "^0.12.1",
    "popper.js": "^1.12.9",
    "sweetalert2": "^7.3.5",
    "vform": "^0.8.1",
    "vue": "^2.5.13",
    "vue-i18n": "^7.3.4",
    "vue-loader": "^13.6.1",
    "vue-meta": "^1.4.2",
    "vue-router": "^3.0.1",
    "vuetable-2": "^1.7.2",
    "vuex": "^3.0.1",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^3.3.11",
    "@storybook/addon-links": "^3.3.11",
    "@storybook/addon-notes": "^3.3.11",
    "@storybook/vue": "^3.3.11",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "cross-env": "^5.1.0",
    "eslint": "^4.15.0",
    "eslint-plugin-vue-libs": "^2.1.0",
    "laravel-mix": "^1.7.2",
    "vue-template-compiler": "^2.5.13",
    "webpack-bundle-analyzer": "^2.9.2"
  }
}

console.log有效。故事书UI工作，按钮生成事件，但不会使用linkto更改为下一个故事。

任何人都可以帮助我吗？

Answer 1

安装不用 getstorybook命令后，链接的按钮可以为我工作

methods: {
  action: linkTo('Button', 'Second') 
}

这是有效的

methods: {
  action: linkTo('Button', (e) => {
    console.log('Go to "Second"')
    return 'Second';
  }) 
}

但不是这个

methods: {
  action: () => {
    console.log('Go to "Second"')
    linkTo('Button', 'Second')
  }
}

<强>安装来自Storybook for Vue，

npm i --save-dev @ storybook / vue
npm i --save vue
npm i --save-dev babel-core

来自这个问题

npm i --save vue-loader@13.6.1
npm i --save-dev @ storybook / addon-actions
npm i --save-dev @ storybook / addon-links

某些编译错误后

npm i --save-dev vue-template-compiler
npm i --save vuex

这是我的 .storybook / addons.js

import '@storybook/addon-actions/register'
import '@storybook/addon-links/register'

这是我的 .storybook / config.js

import { configure } from '@storybook/vue'

import Vue from 'vue';
import Vuex from 'vuex'; // Vue plugins

function loadStories() {
  require('../src/stories')
}

configure(loadStories, module)

这是我的 src / stories / index.js

import { storiesOf } from '@storybook/vue';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

storiesOf('Button', module)
  .add('First', () => ({
    template: `<button @click="action">Go to "Second"</button>`,
    methods: {
      action: linkTo('Button', 'Second') 
    }
  }))
  .add('Second', () => ({
    template: `<button @click="action">Go to "First"</button>`,
    methods: { 
      action: linkTo('Button', 'First') 
    }
  }))

Answer 2

借助新的组件故事格式（CSF），我找到了一种解决您所要问题的方法。

    export const myStory = () => ({
      components: { MyComponent },
      template: `<div style="width: 640px">
        <my-component :my-data="myData" @updated="updated" />
      </div>`,
      data() {
        return {
          myData: null,
        }
      },
      methods: {
        action: action('data-updated'),            // define the raw action
        updated($event) {
          this.myData = $event;                 // alter your data locally
          this.action($event);                      // call the raw action using a method
        }
      }
    });

花了点时间摆弄-但这就是我的方法。

如何制作故事书插件＆＃39;插件链接＆＃39;为Vue.js工作？

2 个答案: