@lx-frontend/wrap-element-ui

$3

wrap-element-ui 是一款基于 element-UI 二次封装的前端组件库，主要用于快速开发 PC 网站中后台产品

$3

``bash
pnpm i wrap-element-ui
`

$3

可以局部注册所需的组件，适用于与其他框架组合使用的场景

`js
import { DemoComponent } from "@lx-frontend/wrap-element-ui";

export default {
components: {
DemoComponent,
},
};
`

在模板中，用 自定义标签的方式使用组件

`xml

`

$3

新增或修改组件时，使用 pnpm dev 可以实时预览 stories。

开发完成后，可以使用 pnpm dist 预览打包后的组件是否能正常工作。与 pnpm dev 的区别在于，该命令修改了组件的引用地址，指向了打包后的组件。该命令不能实时预览修改。

build:lib命令用于打包组件库，生成组件代码及类型定义文件。

build:sb 用于生成 stories 静态预览文件。

pnpm preview 用于预览build:sb生成的静态文件。

$3

1. Storybook Setup API 无法动态更新 Controls
- 使用 Storybook 的 setup API 时，无法动态更新 controls 面板的内容。建议使用 Vue 2 老版本的 Options API 写法。

2. Options API 中 this 指向问题
- 在 Storybook 中使用 Options API 写法时，无法正确获取 this 指向。建议尽量避免 hook 的嵌套导致 this` 丢失问题。虽然可以通过传递 Vue 实例的方式来解决，但请尽量保持 demo 的简单性和可读性。

3. Storybook 卡死问题
- 当 story 内容过多或嵌套层级过深时，可能会导致 Storybook 卡死。这通常是复杂组件的 story 出现逻辑问题时导致的，但 Storybook 无法抛出明确的错误信息。建议检查自己新增的逻辑，逻辑中的错误会导致原本嵌套很深的组件造成 Storybook 页面的卡死。