BEEQ

Beeq，Web组件库计划

该存储库包含BEEQ设计系统中存在的Web组件的源代码。

包裹	版本	文档
@beeq/core		读书我
@beeq/angular		读书我
@beeq/react		读书我
@beeq/vue		读书我
@beeq/tailwindcss		读书我

配x开始之前配x

结构 ？

该项目已作为NX Monorepo结构：

 ├── ? packages
  ├── ? beeq
  ├── ? beeq-angular
  ├── ? beeq-react
  ├── ? beeq-vue
  ├── ...
  ├── ? beeq-tailwindcss
  ├── ...
├── ? tools
├── package.json
├── package-lock.json

在哪里：

• 软件包/beeq：核心库（实现的所有元素/组件的来源）
• 包装/beeq-angular： Beeq核心库的角度特定包装器
• 包装/beeq-react：react.js特定包装器Beeq核心库
• 包装/beeq-vue：vue.js特定的包装器，用于beeq核心库
• 包装/beeq-tailwindcss： Beeq的自以为是的parwindcss配置

依赖性？

我们建议使用Volta来管理节点和NPM版本。安装过程非常简单，正如其官方网站所述：

使用Volta，您可以一次选择一个节点引擎，然后停止担心它。您可以在项目之间切换，而不必在节点之间手动切换。

安装了Volta后，每当您在本地更改到Beeq文件夹时，它将切换到package.json中固定的右节点和NPM版本。

  "volta" : {
    "node" : " 20.11.1 " ,
    "npm" : " 10.4.0 "
  }

Volta不是强制性的，您仍然可以使用最适合您的节点/NPM设置，只需记住您需要的：

• NodeJS v18.x或更高
• NPM V8或更高

用法

BEEQ组件已发布到NPM软件包管理器注册表。您可以根据项目的技术堆栈使用@beeq/core或任何特定于框架的包装器（ @beeq/angular ， @beeq/react ）。确保每个软件包的使用情况说明：

• 如何使用@beeq/core软件包
• ？如何使用@beeq/angular软件包
• 如何使用@beeq/react软件包
• ？如何使用@beeq/vue软件包
• ？如何使用@beeq/tailwindcss预设

随时查看我们的故事书，以查看所有发布的Beeq组件。在这里，您可以找到所有组件的API（属性，事件和方法）以及每个组件允许的变化。

运行该项目？‍

要在Beeq设计系统上开发/扩展组件，请在GitHub中分配此存储库，然后将其克隆到本地到新目录：

git clone https://github.com/ < YOUR_GITHUB_USERNAME > /BEEQ.git BEEQ-Design-System
cd BEEQ-Design-System
git checkout main

安装

只需运行：

npm ci
# Make sure to build first the project before starting it
npm run build
npm start

开始编码？！

建造 ？

对于生产制造，只需运行：

npm run build

测试 ？

Beeq使用JEST进行单位测试，开玩笑和Puppeteer进行端到端测试。

您可以通过执行一次进行所有测试：

npm run test

如果遇到类似于下面的错误，请尝试在本地检查main分支并再次运行测试。

fatal: Not a valid object name main
fatal: No such ref: ' main '
nx affected

生成组件

Beeq带有一个组件生成器，可在创建新组件的骨架时节省您的时间。要使用发电机，您只需要运行以下命令并按照提示CLI中的说明进行操作：

npm run g

贡献

？如果您有心情并想提供帮助？，请仔细阅读我们的贡献指南和发展标准。

❗️在处理错误修复，新功能等时，请注意我们遵循gitflow工作流程。确保遵循有关分支策略指南的说明，涉及如何在开始处理错误/热门修复，新功能等时如何创建分支机构。

文档

模板

需要帮助吗？在此处查看Stenciljs文档（https://stenciljs.com/）。

尾风CSS

我们将CSS用于组件的样式，请在此处查看其文档：（ https：//tailwindcss.com/docs/）

谢谢

我们要向色彩表达衷心的感谢，以提供视觉测试平台，使我们能够审查UI的变化并确定视觉回归。

感谢NX团队帮助我们简化了CI流程并有效地管理MonorePo。