storybook [功能请求]:Nuxt支持和/示例

trnvg8h3  于 5个月前  发布在  其他
关注(0)|答案(5)|浏览(143)

你的功能请求是否与问题相关?请描述

利用Nuxt 3(当前最新版本)的优势来实现Storyboard,需要注意的是,之前并没有官方支持Nuxt 2和之前的版本。

描述你希望的解决方案

提供一个指导和经过验证的路径,以便在Nuxt 3中实现Storybook的所有优秀功能。

描述你考虑过的替代方案

使用Vue...虽然不急于迁移到React,但我们的团队对技术并不是很满意,它不是Vue。

你是否能够协助将这个功能变为现实?

是的,我可以

附加说明

我们将帮助测试并创建示例。我们不是Nuxt核心团队,但会参与上述所有内容,包括在线社交发布和培训视频。

bt1cpqcv

bt1cpqcv2#

我还想找到一种官方的方式,在storybook中实现所有的nuxt魔法,而不需要太多的hacks。

uxhixvfz

uxhixvfz3#

哦,链接到网站... https://nuxtjs.org/
他们将Nuxt 3的内容移动到了 https://nuxt.com
如果有人有 hack ,请在这里分享它

zqry0prt

zqry0prt4#

我已经弄清楚了如何使用 @storybook/vue3 V6Nuxt 3 V3.0.0,请按照以下步骤操作:
在执行这些步骤之前,请确保先运行 yarn installnpm ci!

  1. 运行 npx storybook init --type vue3 (如果你询问 是否要在项目上运行 'eslintPlugin' 迁移?Y)
  2. 运行 yarn add --dev @storybook/builder-vite (如果你使用 Vite 作为你的应用程序打包器)
  3. package.jsonscripts 中添加以下内容:
"serve-storybook": "npx http-server ./storybook-static"
  1. .storybookmain.js 文件中,用以下内容扩展 module.exports 对象:
core: {
   builder: '@storybook/builder-vite',
},

async viteFinal(config, { configType }) {
   if (configType === 'DEVELOPMENT') {
      return {
	...config,
	      define: {
	      ...config.define,
	      global: 'window',
	   },
	};
      }
   
   return config;
},
  1. .storybook 文件夹中创建 preview-head.html 文件并添加以下内容:
<script>
   var global = window
</script>
  1. stories 文件夹中删除 Introduction.stories.mdx 文件。
    现在,你可以为 development modeyarn build-storybook 构建故事了。
    参考资料:

相关问题