如何使 Storybook 插件“插件链接”适用于 Vue.js？

Posted 2023-02-19

【中文标题】如何使 Storybook 插件“插件链接”适用于 Vue.js？

【英文标题】：How to make Storybook addon 'addon-links' work for Vue.js?

【发布时间】：2018-07-09 00:18:18

【问题描述】：

我正在尝试学习如何在使用 Vue.js 的项目中使用 Storybook，但我似乎无法使插件“addon-links”正常工作，因为文档主要在 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

插件“addon-actions”有效。

对于“插件链接”，我使用了网上的各种示例，这里是其中之一。

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 有效。 Storybook UI 有效，按钮生成事件，但不会更改为使用 linkto 的下一个故事。

谁能帮我解决这个问题？

【参考方案1】：

使用新的组件故事格式 (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
        
      
    );

花了不少功夫——但我就是这样做的。

【参考方案2】：

安装没有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') 
    
  ))

【讨论】：

感谢您的回复。在我使用的示例中，没有其他组件，只有一个简单的 html 按钮，因此不需要 components: MyButton 。我无论如何都试过了，只是为了绝对确定，但它没有用。在我看到的示例中，插件似乎适用于纯 Vue.js，因此不需要 React.js。我尝试了其他函数/方法语法，但也没有用。对其他可能的问题有什么想法吗？

实际上，我的第一个和第二个按钮在没有components 属性的情况下可以正常工作。我认为它是必需的，因为示例（上面的前 3 个按钮）显示了它。我完全错过了<button> 不是MyButton 组件的选择器这一事实。

其他似乎相关的唯一因素是安装 Storybook 的方法。

我设法使以下插件工作：Actions，Knobs，Notes，Console 都具有类似的安装。唯一不起作用的是Links 插件。

如果我按照您的安装，我无法编译情节提要。您是否遗漏了一些步骤？