---
title: 安装
description: 添加教程所需的包、样式和 Providers。
order: 10
toc:
  - id: add-the-package
    title: 添加包
  - id: import-styles
    title: 导入样式
  - id: application-providers
    title: 应用 Providers
---

## 添加包 {#add-the-package}

在使用方应用中添加工作区依赖：

```json
{
  "dependencies": {
    "@workspace/blocks": "workspace:*"
  }
}
```

Blocks 使用 `@workspace/ui`、React Query 和工作区国际化运行时。工作区包管理器会为本地应用解析这些依赖。

## 导入样式 {#import-styles}

在应用入口导入一次 Block 样式：

```ts
import "@workspace/blocks/globals.css"
```

功能模块应始终从显式子路径导入。例如，导入 `@workspace/blocks/media` 不会把聊天功能加入同一个模块图。

## 应用 Providers {#application-providers}

完整应用外壳要求上层已经提供 React Query 和国际化。在路由树之前加入这些 Providers，然后继续应用外壳章节。