在 Vue Storefront Next 项目中使用 @nuxtjs/storybook 时,Vue 组件未呈现 - 可能是 Typescript 问题?
Posted
技术标签:
【中文标题】在 Vue Storefront Next 项目中使用 @nuxtjs/storybook 时,Vue 组件未呈现 - 可能是 Typescript 问题?【英文标题】:Vue components not rendering when @nuxtjs/storybook is used in a Vue Storefront Next project - possibly a Typescript issue? 【发布时间】:2021-05-26 04:00:21 【问题描述】:我正在尝试在 Vue Storefront Next (https://docs.vuestorefront.io/v2/general/key-concepts.html) 项目中使用 @nuxtjs/storybook。
我可以打开 Storybook 并显示故事,但故事中的组件未呈现。例如,如果我尝试使用 https://storybook.nuxtjs.org/usage 中的示例,那么我会在 devtools 中看到 <link>
元素(Vue 组件的名称),而不是呈现的 <a>
元素(Vue 组件的内容):
然后我转而尝试使用另一个简单的组件:
https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.vue https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.stories.js但这也不起作用,您可以在此处查看一个示例:https://pedantic-chandrasekhar-a83cfc.netlify.app/?path=/story/logo--logo(我无法让 Storybook 在 Codesandbox 上工作)。
Vue Storefront Next 基于 Nuxt,但我必须进行一些更改才能打开 Storybook:
-
更新
nuxt.config.js
中的build
部分:
babel:
presets( envName )
return [
[
'@nuxt/babel-preset-app',
corejs: version: 3
]
]
,
ignore: [/[\/\\]core-js/, /@babel[\/\\]runtime/],
,
-
安装
@babel/runtime-corejs3
、core-js
3 和ts-node
ts-node
是必要的,因为 Vue Storefront Next 提供了一个 tsconfig.json
文件用于部分项目的开发,这使得 @nuxtjs/storybook 模块认为该项目是一个 Typescript 项目 (https://github.com/nuxt-community/storybook/blob/e5b3698482873d7129cd763a0422b8c3151cee0b/src/index.ts#L67-L76),但是 Vue店面项目不使用@nuxt/typescript-runtime
- 我想知道这是否是问题的一部分?
可以在 Codesandbox 上看到 package.json 的内容:https://codesandbox.io/s/admiring-pine-2byq7?file=/package.json
任何有关如何解决此问题的线索将非常感谢,谢谢!我花了一天中最好的时间在这上面,但我对 Storybook 或 Nuxt 的了解还不够,无法自己调试它,不幸的是:(
【问题讨论】:
【参考方案1】:原来@nuxtjs/storybook
模块似乎依赖于在项目的nuxt.config.js
文件中设置的components: true
。
@nuxtjs/storybook
文档中的任何地方都没有提到这一点,但我已经提出了一个 Github 问题来指出这一点,如果维护者同意,我会针对文档提出 PR。
你可以在这个 Github 帖子中看到我是如何发现这个问题的思考过程:https://github.com/nuxt-community/storybook/issues/233#issuecomment-785027558
【讨论】:
以上是关于在 Vue Storefront Next 项目中使用 @nuxtjs/storybook 时,Vue 组件未呈现 - 可能是 Typescript 问题?的主要内容,如果未能解决你的问题,请参考以下文章
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载的对象接口