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

Question

夏天

我想在故事书文件(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。

Answer 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 />'
})

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

Storybook file does not import corresponding .vue

vue.js

nuxt.js

storybook

夏天