Decathlon Vitamin Web 项目教程

Decathlon Vitamin Web 项目教程

vitamin-web Decathlon Design System UI components for web applications 项目地址: https://gitcode.com/gh_mirrors/vi/vitamin-web

1. 项目介绍

Decathlon Vitamin Web 是一个由 Decathlon 设计系统团队开发的开源项目，旨在为 Web 应用程序提供一致且高质量的用户体验。该项目包含了多个核心包和社区包，支持不同的技术栈（如 React、Svelte、Vue 等），并提供了丰富的 UI 组件和样式库。

核心功能

• 核心包: 提供了一系列的 CSS 样式、设计令牌、图标和资产，支持不同的技术栈。
• 社区包: 提供了基于 React、Svelte 和 Vue 的组件库，由社区维护。

项目目标

• 提供一致的设计和开发体验。
• 支持多种技术栈，满足不同产品的需求。
• 促进社区贡献，增强项目的多样性和质量。

2. 项目快速启动

安装依赖

首先，确保你已经安装了 yarn，然后克隆项目并安装依赖：

# 安装 yarn
brew install yarn

# 克隆项目
git clone https://github.com/Decathlon/vitamin-web.git

# 进入项目目录
cd vitamin-web

# 安装依赖
yarn install

构建项目

构建所有包：

yarn build

启动项目

启动所有展示和构建源代码，并启用热重载：

yarn start

你也可以单独启动某个部分（推荐）：

yarn start:css
yarn start:icons
yarn start:react
yarn start:svelte
yarn start:vue

3. 应用案例和最佳实践

应用案例

Decathlon Vitamin Web 已经被广泛应用于 Decathlon 的多个 Web 应用程序中，确保了这些应用在设计风格和用户体验上的一致性。例如，Decathlon 的官方网站和移动应用都使用了 Vitamin Web 提供的组件和样式。

最佳实践

• 按需引入: 根据项目需求，选择性地引入所需的组件和样式，避免不必要的资源加载。
• 自定义样式: 使用 Tailwind CSS 的预设样式，通过 @apply 指令自定义样式，提高开发效率。
• 社区贡献: 积极参与社区，贡献代码和建议，帮助项目不断完善。

4. 典型生态项目

核心包

• @vtmn/css: 提供全局 CSS 样式，支持 Tailwind CSS。
• @vtmn/css-tailwind-preset: 提供 Tailwind CSS 的预设样式。
• @vtmn/icons: 提供 SVG 图标库。
• @vtmn/assets: 提供 SVG 资产库。

社区包

• @vtmn/react: 提供 React 组件库。
• @vtmn/svelte: 提供 Svelte 组件库。
• @vtmn/vue: 提供 Vue 组件库。

通过这些生态项目，开发者可以根据自己的技术栈选择合适的组件和样式，快速构建高质量的 Web 应用程序。

vitamin-web Decathlon Design System UI components for web applications 项目地址: https://gitcode.com/gh_mirrors/vi/vitamin-web