如何在 Laravel-Vue.js 应用程序中使用 Storybook

Posted 2023-02-19

【中文标题】如何在 Laravel-Vue.js 应用程序中使用 Storybook

【英文标题】：How to use Storybook in Laravel-Vue.js app

【发布时间】：2019-04-08 19:11:35

【问题描述】：

我的问题是如何在 Laravel-Vue 应用程序中使用 Storybook 组件。 我尝试将 Storybook 提取到静态应用程序并将其导入第二个应用程序，但它不起作用。 我用过

https://storybook.js.org/basics/exporting-storybook/

和

https://storybook.js.org/basics/exporting-storybook/

我想自动导入所有故事书，而不是手动导入一些组件。 如果有任何帮助，我将不胜感激。 :)

问题解决了！

首先：在故事书文件的 index.js 文件中，您必须导出组件

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

export default 
    MyComponent

其次：将所有项目推送到例如git 或 npm 包。

第三：将storybook导入到package.json中的另一个项目中

dependencies
"dependencies": 
    "storybook": "git+http://path-to-project-with-storybook"

下一次运行npm update

第四：在你的项目的js文件中从storybook中导入组件

import storybook from 'storybook'
export default 
    name: 'app',
    components: 
        MyComponent : storybook.MyComponent,
    

【参考方案1】：

npx -p @storybook/cli sb init --type vue

你可以简单地输入这个命令，它会为你生成一个简单的 vue js 样板版本