问题标签 [storybook]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
vuejs2 - Vuetify 主题设置在 Storybook 中不起作用
(Vue 版本 - 2,Vuetify 和 Storybook - 最新)
考虑以下简单的按钮组件:
在 App 组件文件中,它是这样调用的:
Vuetify 设置在 main.js 中如下所示:
到目前为止,一切都很好 - 我在框架中间有一个漂亮的靛蓝按钮,这是我所期望的。
现在,在 Storybook 配置中,我使用与 main.js 中相同的行来设置 Vuetify,我的 Storybook 文件如下所示:
这会在 Storybook 中呈现按钮,但不会发生主题设置,也就是说:按钮不是靛蓝,而是白色。Vuetify 的其余属性似乎还不错——它看起来像一个带有白色文本的 Vuetify 圆形按钮。
我不确定这是 Vuetify 问题、Vue 问题还是 Storybook 问题(或者我的用户错误问题)。如果有人这样做,我将不胜感激。
这是我的 webpack.config.js(在 .storybook 中):
vue.js - Vue Storybook Jest Addon 配置问题
我想知道是否有人使用 jest 插件可以分享它的 Vue Storybook 配置,因为我似乎无法让它工作。我试过全局模式:
在 Storybook 的 config.js 中:
在我的故事里面:
我收到此错误:
我也尝试过当地的方式:在我的故事中:
在这里我得到这个错误:
测试选项卡显示以下消息:
有人可以指出我有什么问题吗?
npm - NPM 安装/Babel 或 Gatsby 问题后 Storybook 失败?
我一直在成功运行 storybook,但最近 npm 安装了 jest,这导致我的整个 package.json 更新并且 storybook 坏了。不知道从哪里开始(babel 或 gatsby 的问题?),但是当我尝试运行故事书时,这是我的终端的错误:
任何帮助都会很大!
javascript - 在 Stroybook 中使用自定义 webpack 配置文件时,`exports is not defined`
我在我的 Storybook 配置目录中使用自定义 webpack 配置文件.storybook
,运行命令后start-stroybook
,我的exports is not defined
页面上出现错误。
这是自定义 webpack 配置文件的内容:
我正在运行的 Storybook 版本以及可选的任何受影响的插件:
- @storybook/addon-actions": "^3.4.11
- @storybook/addon-centered": "^3.4.11
- @storybook/addon-info": "^3.4.11
- @storybook/插件旋钮": "^3.4.11
- @storybook/react": "^3.4.11
- @babel/core": "^7.0.0-beta.42
- babel-loader": "^8.0.0-beta.2
- @babel/preset-env": "^7.0.0-beta.42
reactjs - 我可以将故事书目录移动到 prjroot/build/storybook 吗?(在 React Native 中)
我正在为我的 React Native 项目引入故事书。
默认的故事书目录位于项目的根目录,即prjroot/storybook/
.
但我想把它放在 . prjroot/build/storybook/
,因为我想用 TypeScript 编写故事书配置文件,并将其构建到prjroot/build/storybook/
.
有没有办法让故事书识别移动的路径?
vue.js - VueJS 带有 storyhot 配置的故事书和无法从 'config-loader.js' 找到模块 '@storybook/vue/dist/server/babel_config' 的开玩笑错误
复制克隆https://github.com/adamchenwei/vuejs-playground/tree/step/3-3-2-B-storybook-storyshot-broken
checkout step/3-3-2-B-storybook-storyshot-broken
npm run test
查看错误Cannot find module '@storybook/vue/dist/server/babel_config' from 'config-loader.js'
我哪里做错了?我怀疑 babel 中有什么东西,但我不确定是什么。
javascript - 如何使用 Storybook 配置 VueJS + PostCss + Tailwind
任何人都成功地使用 VueJS、PostCss 和 Tailwind 在 Storybook 中进行组件开发设置项目?
我已经做到了这一点:
- 新
vue
项目 (vue-cli 3.0.5
) - @storybook/vue (4.0.0-alpha.25)
- 尾风css (0.6.5)
- 使用创建组件
<style lang="postcss"> ... </style>
- 在样式块中使用 Tailwind
@apply
将实用程序类应用于组件
我遇到的问题是,lang="postcss"
在运行故事书时,我创建用于使用的故事的任何组件在编译期间都会失败。
我尝试添加一个自定义webpack
配置来停止错误,但我的所有组件都没有设置样式。
我也尝试app.postcss
在文件本身中导入我的(导入尾风)stories.js
无济于事。任何帮助,将不胜感激。
reactjs - 来自反应组件的开发环境
我正在 React 中创建库组件。
该组件将使用import ... from ...
.
所以,这个问题很简单。
本地开发使用哪种测试环境最好?我不想使用 webpack,因为它不是“应用程序”它唯一的单个组件。
我读过故事书,但我感谢它对一个组件的“大”。
组件本地开发还有其他环境吗?
现在,在进行任何更改之后,我需要构建我的组件并在另一个项目中运行以进行测试。
laravel - 如何在 Laravel-Vue.js 应用中使用 Storybook
我的问题是如何在 Laravel-Vue 应用程序中使用 Storybook 组件。我尝试将 Storybook 提取到静态应用程序并将其导入第二个应用程序,但它不起作用。我用了
和
我想自动导入所有故事书,而不是手动导入一些组件。如果有任何帮助,我将不胜感激。:)
问题解决了!
首先:在故事书文件的 index.js 文件中,您必须导出组件
其次:将所有项目推送到例如 git 或作为 npm 包。
第三:将storybook导入到package.json中的另一个项目中
下一次运行npm update
第四:在你的项目的js文件中从storybook中导入组件