Storybook 文件没有导入对应的 .vue答案

【问题标题】：Storybook file does not import corresponding .vueStorybook 文件没有导入对应的 .vue
【发布时间】：2021-12-30 18:19:04
【问题描述】：

夏天

我想在storybook文件(component/index.stories.ts)中导入vue文件(component/index.vue)。
但它是编译错误，无法导入。

component/index.stories.ts

import Test from '~/components/test/index.vue' # <- compile error.

export default {
  title: 'Test'
}

export const TestWebsite = () => '<Test />'

这是目录。

project
  ├ pages
  │  └ index.vue
  ├ components
  │  ├ test
  │  │  ├ index.vue
  .  .  └ index.stories.ts
  .  .

我想知道如何解决这个编译错误并成功运行 Storybook。

【问题讨论】：

标签： vue.js nuxt.js storybook

【解决方案1】：

创建 index.d.ts 后，我可以导入 .vue 文件并成功显示在 Storybook 上。

index.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  const _default: Vue
  export default _default
}

index.stories.ts

import Test from './index.vue'

export default {
  component: Test,
  title: 'Components/Test'
}

export const Primary = () => ({
  components: { Test },
  template: '<Test />'
})

【讨论】：