HashiCorp 设计系统项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00117/article/details/142476026

HashiCorp 设计系统项目教程

design-system Helios Design System 项目地址: https://gitcode.com/gh_mirrors/designs/design-system

1. 项目的目录结构及介绍

HashiCorp 设计系统项目的目录结构如下：

hashicorp/design-system/
├── packages/
│   ├── components/
│   ├── ember-flight-icons/
│   ├── flight-icons/
│   └── tokens/
├── website/
├── .gitignore
├── .yarnrc.yml
├── LICENSE
├── README.md
├── package.json
└── yarn.lock

目录结构介绍

packages/: 包含设计系统的各个子包，每个子包负责不同的功能模块。
- components/: 设计系统组件的实现，使用 Ember.js。
- ember-flight-icons/: Ember.js 插件，包含 <FlightIcon /> 组件（已弃用）。
- flight-icons/: 包含不同格式的图标（SVG/SVG Sprite/React）。
- tokens/: 设计令牌，用于存储设计决策。
website/: 设计系统的文档网站，包含使用指南和示例。
.gitignore: Git 忽略文件，指定哪些文件和目录不需要版本控制。
.yarnrc.yml: Yarn 配置文件，用于配置 Yarn 的行为。
LICENSE: 项目许可证，采用 MPL-2.0 许可证。
README.md: 项目介绍和使用说明。
package.json: 项目的依赖和脚本配置文件。
yarn.lock: Yarn 锁定文件，确保依赖版本的一致性。

2. 项目的启动文件介绍

项目的启动文件主要集中在 packages/ 目录下的各个子包中。每个子包都有自己的启动文件和配置文件。

启动文件示例

以 packages/components 为例，启动文件可能包括：

index.js: 组件库的入口文件，负责导出所有组件。
app.js: 用于开发和测试的 Ember.js 应用入口文件。

启动命令

在项目根目录下，可以使用以下命令启动开发服务器：

yarn workspace @hashicorp/design-system-components run ember serve

3. 项目的配置文件介绍

项目的配置文件主要集中在项目根目录和各个子包中。

配置文件示例

package.json: 包含项目的依赖、脚本和元数据。

{
  "name": "@hashicorp/design-system-components",
  "version": "1.0.0",
  "scripts": {
    "start": "ember serve",
    "build": "ember build",
    "test": "ember test"
  },
  "dependencies": {
    "ember-cli": "^3.28.0"
  }
}