evangelist

bit.dev 的营销组件

用于构建 bit.dev 营销网站的可重用 React 组件集。该存储库是一个公开组件的基于组件的微前端。

组件集合-选择和使用

该前端代码库中的所有组件都是使用 Bit 作为一组独立可用的组件来编写和公开的。请参阅bit.dev 上的evangelist范围，探索任何组件并将其集成到您的项目中。

• 使用bbit install安装独立组件
• 使用bbit import探索本地工作区中的组件并根据您自己的需要修改它们。
• 在文档的实时游乐场和“组合”页面中亲自尝试任何组件。

这是一个基于组件的微前端

等等..什么？

整个 bit.dev 平台和网站并不是作为一个整体应用程序构建的。相反，它是由在不同代码库中维护的组件构建的，这些代码库是单独开发的，然后使用 Bit 公开并集成在一起。

给我举个例子！

查看 bit.dev 主页。

您会注意到它是由位于不同前端代码库中的组件构建的：

• evangelist组件（此处）。
• 基本用户界面组件。
• 容器应用程序（私有）。
• ETC

我们使用 Bit 来包含和公开任何代码库中的组件，作为 bit.dev 中的一组 API，可以集成到不同的页面和应用程序中。例如：

• bit.dev 上公开的evangelist组件。
• 在 bit.dev 上公开了 base-ui 组件。

关键部件

页数

整页有边距、背景。由于其大小，页面组件不应包含粒度内容，而应仅设置各个部分的布局。

部分

各个区域包含大部分内容，并且可以在页面之间重复使用。各个部分可能在不同页面中占据不同的空间，因此应避免调整大小和背景

内容

可视化组件的原始数据对象（如 MVC 的模型）。单个 ui 组件可以在不同的地方使用多个Content组件，并且Content在不同的 ui 组件中可能会以不同的方式呈现。

原子/“具体”

特定于此主页的组件。作为原子 UI 组件，它们仍然是抽象的，不应包含文本和内容。

设置

1. 安装位： npm install @teambit/bit --global
2. 克隆此 Bit 工作区： git clone https://github.com/teambit/evangelist.git evangelist
3. 进入工作空间目录： cd evangelist
4. 安装所有软件包并导入所有组件： bbit install
5. 运行 Workspace UI 以探索 Evangalist 组件： bbit start并转到 https://localhost:3000
6. 享受！