Vue 3 Storybook：(PrimeVue)组件不显示

Question

目前，我正在使用Vue Storybook (Vue Js3)与UI框架primevue结合使用。但是，我正确地设置了所有内容，并且没有出现任何问题，但我仍然无法在浏览器中看到我的组件。它应该是正常渲染的。

关于文档，我只需要编写一个.vue和一个.stories.js文件来显示我的组件。

main.js

import {createApp} from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';

const app = createApp(App);


app.component('Breadcrumb', Breadcrumb);
app.use(PrimeVue,{ripple: true});

List.vue

<template>
  <div>
    <Breadcrumb :home="home" :model="items" />
  </div>
</template>

<script>
import Breadcrumb from "primevue/breadcrumb";

export default {
  name: "List",
  components: {
    Breadcrumb,
  },
  data() {
    return {
      home: {
        icon: "pi pi-home",
        to: "/",
      },
      items: [
        { label: "Computer" },
        { label: "Notebook" },
        { label: "Accessories" },
        { label: "Backpacks" },
        { label: "Item" },
      ],
    };
  },
};
</script>

List.stories.js

import List from "./List.vue";

export default {
  title: "List",
  component: List,
};

// export const actionsData = {
//   onPinTask: action("pin-task"),
//   onArchiveTask: action("archiveTask"),
// };

const Template = (args, { argTypes }) => ({
    components: { List },
    props: Object.keys(argTypes),
    template:
      '<List />',
  });
export const ListDefault = Template.bind({});

有人知道问题出在哪里吗？我可以在故事书Sidemenu里面看到它。

​

Answer 1

我认为主要问题在于您的main.js文件。我也在努力使用我的，但最终我启动并运行了它。您的main.js是storybook应用程序的入口点，您需要对其进行不同于主应用程序的配置。如果你看下面的图片，你会注意到应用程序是从@storybook/vue3导入的。当涉及到与第三方库的集成时，这是混淆的主要原因。我希望这个解决方案对你和将来的任何人都有帮助。如果对你有效，请让我知道。注意安全。

​

还要注意你的css文件。我已经导入了我的应用程序所需的所有css文件。如果您正在使用less或scss，请务必在storybook docs上查看如何管理它们。再见。