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

Posted 2023-02-19

【中文标题】Vue 3 Storybook：（PrimeVue）组件不显示

【英文标题】：Vue 3 Storybook: (PrimeVue) Component not display

【发布时间】：2021-07-06 03:52:25

【问题描述】：

目前我正在将 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 中看到它。

【参考方案1】：

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

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

【讨论】：

以后请粘贴真实文本（作为代码块）。能够复制和粘贴文本很重要，而您的图像使这变得不可能。

@Pwdr 哦，对不起。我知道你从哪里来。感谢您指出了这一点。问候。