Vue 3 Storybook：（PrimeVue）组件不显示

Question

目前我正在将 Vue Storybook (Vue Js 3) 与 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({});

任何人的想法，问题出在哪里？我可以在 Storybook Sidemenu 中看到它。

Answer 1

我认为主要问题在于您的 ma​​in.js 文件。我也与我的斗争，但最终我把它启动并运行。您的 main.js 是 Storybook 应用程序的入口点，您需要对它进行不同于主应用程序的配置。如果您查看下图，您会注意到 app 是从 @storybook/vue3 导入的。这是与第三方库集成时混淆的要点。我希望这个解决方案可以帮助您以及将来的其他任何人。 请让我知道这对你有没有用。注意安全。

还要记下您的 css 文件。我已经开始导入我的应用程序所需的所有 css 文件。如果您使用的是 less 或 scss，请查看 storybook docs 以了解如何管理它们。咻。