内容ack 金星组件库
1. 概览
金星组件 is Contentack 的官方 React 组件库,提供了可再使用的UI组件的综合集合. 它作为Concesstack的UI-React应用程序的设计系统基础,可用于构建基于UI扩展和Concesstack的应用程序.
关键特性 :
- 100+生产准备反应组件
- 带有完整类型定义的脚本类型支持
- 用于一致性主题的设计符号系统
- 基于 SCSS 有自定义变量的样式
- 综合故事书文件
- 注重无障碍(WCAG AA标准)
- 状态组件的 Redux 集成
- 丰富的文本编辑器组件( 基于 Slate)
- Formik 组合格式组件
2. 技术堆栈
| 层 | 技术 |
|---|---|
| 语言 | 类型脚本 5.3.3 |
| 框架 | 反应 18.3.1 |
| 构成部分库 | 这是金星组件库本身 |
| 州管理层 | Redux 4.0.5 + 反应 Redux 7.2.1 |
| 路由器 | 反应路由器 DOM 5.2.0 |
| 测试 | Jest 27.5.1 + 反应测试库 10.4.9 |
| 代码质量 | ESLint 8.47.0 + Pretier 2.0.4 (中文(简体) ) |
| 组件文档 | 故事书 6.5.14 |
| 设计托肯斯 | 样式词典 2.10.1 |
| 样式 | SCSS/PostCSS + 设计托肯斯 |
| 表单 | 福尔米克 2.4.6 |
| 丰富的文本编辑器 | 名单0.77.2 |
| HTTP 客户端 | 轴心1.8.4 |
| 处理日期 | 日期-fns 2.1.5.0 + 时间.js 2.29.1 |
3. 开始
先决条件
- 节点.js: v18.0.0+或 v24.x (中文(简体) )
- 无: v8.19.3+ (中文(简体) )
- 图形: 最新版本
- 反应: 16.8.6+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
4. 在你的项目中使用图书馆
消费者安装
$ npm i @contentstack/venus-components --save
导入和使用
import '@contentstack/venus-components/build/main.css'
import { Button, Table, Modal } from '@contentstack/venus-components'
<Button buttonType="primary" onClick={() => console.log('Clicked!')}>Click Me</Button>
设计托肯斯
消费者数字 :
import { TokenName } from '@contentstack/venus-components/build/variables.js'
@import '@contentstack/venus-components/build/variables.css'
5. 解决问题
共同问题
同伴依赖冲突: 使用 npm install --legacy-peer-deps 或者说 npm install --ignore-scripts --no-engine
节点.js 兼容性:使用v18或v25. 切换为 nvm install 22 && nvm use 22
OpenSSL 错误: 已经通过 NODE_OPTIONS='--openssl-legacy-provider' 装入包裹
模块出错运行 npm run clean-install