# 安装和基本使用

- Human documentation: [https://docs.univer.ai/zh-CN/guides/slides/getting-started/installation](https://docs.univer.ai/zh-CN/guides/slides/getting-started/installation)

- Agent Markdown: [https://docs.univer.ai/zh-CN/guides/slides/getting-started/installation.md](https://docs.univer.ai/zh-CN/guides/slides/getting-started/installation.md)

- Requested language: `zh-CN`

- Content language: `zh-CN`

- Documentation version: `1.0.0-rc.0`

- Source: [slides/getting-started/installation/index.zh-CN.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/getting-started/installation/index.zh-CN.mdx)

---

本章介绍 Univer Slides 的安装与基本使用。本指南使用 Web SDK 的 Slides 包。目前没有 Slides 预设，因此需要通过插件模式创建 Slides 应用。

如果你还不熟悉 Univer 的基础概念，建议先阅读 [快速开始](https://docs.univer.ai/zh-CN/guides/slides/getting-started/quickstart.md)。

## 通过插件模式创建

Univer 以插件的形式提供 Slides 能力。一个浏览器端编辑器通常需要先注册 Univer 通用运行时、授权插件、Docs 与 Drawing 依赖，然后再注册 Slides 的模型和 UI 插件。

### 使用包管理器

使用支持 ES Module 和 `package.json` 中 `exports` 字段的构建工具。

#### 安装

Univer 使用 React 构建界面、RxJS 处理数据流，也可以嵌入 Vue 或 Angular 应用。请确认已安装 `react`、`react-dom` 和 `rxjs` 这些 peer dependencies；下方 Yarn 命令已显式包含它们。

所有 `@univerjs/*` 和 `@univerjs-pro/*` 包应保持相同版本。

#### pnpm

```shell
pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui
```

#### npm

```shell
npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui
```

#### yarn

```shell
yarn add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui react react-dom rxjs
```

#### bun

```shell
bun add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui
```

#### 使用

初始化 Univer 前，先创建容器并设置明确的高度：

```html
<div id="app" style="height: 600px"></div>
```

调用 `FUniver.newAPI(univer)` 前，请引入下方示例使用的 facade 入口。样式按 `@univerjs/design`、`@univerjs/ui`、产品 CSS 的顺序引入。

> [!WARNING: 注意事项]
> * 注册 Slides 插件前，需要先注册 `UniverLicensePlugin`。
> * 样式文件的引入顺序很重要，请先引入通用 UI 样式，再引入产品 UI 样式。
> * 打印、表格、图表、导入导出等可选功能包，只在产品需要对应能力时再加入。

1.
   引入样式文件、语言包和必要插件：
   
   ```typescript
   import { UniverLicensePlugin } from '@univerjs-pro/license'
   import { UniverSlidesPlugin } from '@univerjs-pro/slides'
   import { UniverSlidesUIPlugin } from '@univerjs-pro/slides-ui'
   import SlidesUIZhCN from '@univerjs-pro/slides-ui/locale/zh-CN'
   import SlidesZhCN from '@univerjs-pro/slides/locale/zh-CN'
   import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'
   import DesignZhCN from '@univerjs/design/locale/zh-CN'
   import { UniverDocsPlugin } from '@univerjs/docs'
   import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
   import DocsUIZhCN from '@univerjs/docs-ui/locale/zh-CN'
   import { UniverDrawingPlugin } from '@univerjs/drawing'
   import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
   import { UniverUIPlugin } from '@univerjs/ui'
   import UIZhCN from '@univerjs/ui/locale/zh-CN'
   
   import '@univerjs/design/lib/index.css'
   import '@univerjs/ui/lib/index.css'
   import '@univerjs/docs-ui/lib/index.css'
   import '@univerjs-pro/slides-ui/lib/index.css'
   ```

1.
   如果需要使用 Facade API，可以引入相关 facade 入口：
   
   ```typescript
   import { FUniver } from '@univerjs/core/facade'
   import '@univerjs-pro/slides/facade'
   ```

1.
   创建 Univer 实例，注册插件，并创建 Slides unit：
   
   ```typescript
   const univer = new Univer({
     locale: LocaleType.ZH_CN,
     locales: {
       [LocaleType.ZH_CN]: mergeLocales(
         DesignZhCN,
         UIZhCN,
         DocsUIZhCN,
         SlidesZhCN,
         SlidesUIZhCN,
       ),
     },
   })
   
   univer.registerPlugin(UniverRenderEnginePlugin)
   univer.registerPlugin(UniverUIPlugin, {
     container: 'app',
   })
   
   univer.registerPlugin(UniverDocsPlugin)
   univer.registerPlugin(UniverDocsUIPlugin)
   univer.registerPlugin(UniverDrawingPlugin)
   
   univer.registerPlugin(UniverLicensePlugin, {
     license: process.env.CLIENT_LICENSE_TEXT,
   })
   
   univer.registerPlugin(UniverSlidesPlugin)
   univer.registerPlugin(UniverSlidesUIPlugin)
   
   univer.createUnit(UniverInstanceType.UNIVER_SLIDE, {})
   
   const univerAPI = FUniver.newAPI(univer)
   ```

这里返回的 `univerAPI` 对象被称为 Univer 的面板 API（Facade API），通过它可以创建演示文稿并调用 Slides 相关能力。

#### `univer.registerPlugin` 与 `univer.registerPlugins` 方法

`univer.registerPlugin` 方法用于注册一个插件到 Univer 实例中。你可以在创建 Univer 实例后调用这个方法来注册插件。

你可以通过 `univer.registerPlugin(Plugin, options)` 的方式来注册插件，其中 `Plugin` 是要注册的插件，`options` 是可选的配置项，每个插件可能有不同的配置项。

你也可以通过 `univer.registerPlugins` 传入一个数组，一次性注册多个插件。这对于需要集中管理插件的场景非常有用。

```typescript
univer.registerPlugins([
  UniverRenderEnginePlugin,
  [UniverUIPlugin, {
    container: 'app',
  }],
  UniverDocsPlugin,
  UniverDocsUIPlugin,
  UniverDrawingPlugin,
  [UniverLicensePlugin, {
    license: process.env.CLIENT_LICENSE_TEXT,
  }],
  UniverSlidesPlugin,
  UniverSlidesUIPlugin,
])
```

#### 可选功能包

当编辑器需要对应能力时，再安装功能包：

```shell
pnpm add @univerjs-pro/slides-print
pnpm add @univerjs-pro/slides-table @univerjs-pro/slides-table-ui
pnpm add @univerjs-pro/chart-ui @univerjs-pro/slides-chart @univerjs-pro/slides-chart-ui
pnpm add @univerjs-pro/slides-exchange-client
```

功能注册示例请参考 [打印](https://docs.univer.ai/zh-CN/guides/slides/features/print.md)、[表格](https://docs.univer.ai/zh-CN/guides/slides/features/tables.md)、[图表](https://docs.univer.ai/zh-CN/guides/slides/features/charts.md) 和 [导入导出](https://docs.univer.ai/zh-CN/guides/slides/features/import-export.md)。

#### 懒加载部分插件

插件模式的一个优势是可以延迟加载可选功能：

```typescript
univer.createUnit(UniverInstanceType.UNIVER_SLIDE, {})

import('@univerjs-pro/slides-chart').then(({ UniverSlidesChartPlugin }) => {
  univer.registerPlugin(UniverSlidesChartPlugin)
})
```

### 服务端使用

在 Node.js 中，通常只注册模型插件，不注册浏览器 UI 插件：

```typescript
univer.registerPlugin(UniverSlidesPlugin)
```

这个方式适合快照处理、服务端导入导出和协同服务。

## 其他发布版本

除了稳定版本之外，Univer 还提供了 alpha / beta 通道。这些版本可以让你提前体验到尚未正式发布的最新功能。但请记住，更多的功能同时意味着更多的风险。这些版本可能包含错误、不完整的功能或者不稳定的特性。请尽可能避免在生产环境中使用这些版本。

### Alpha / Beta 版本

当 Univer 开发团队完成了一个新功能或重大更改时，可能会将其预发布到 alpha 或 beta 通道，你可以通过以下命令安装 alpha / beta 版本的 Univer 包：

#### npm

```bash
npm install @univerjs-pro/slides@alpha # Alpha 版本
npm install @univerjs-pro/slides@beta # Beta 版本
```

#### pnpm

```bash
pnpm add @univerjs-pro/slides@alpha # Alpha 版本
pnpm add @univerjs-pro/slides@beta # Beta 版本
```

#### yarn

```bash
yarn add @univerjs-pro/slides@alpha # Alpha 版本
yarn add @univerjs-pro/slides@beta # Beta 版本
```

#### bun

```bash
bun add @univerjs-pro/slides@alpha # Alpha 版本
bun add @univerjs-pro/slides@beta # Beta 版本
```

如果你在使用 alpha / beta 版本时遇到任何问题或者有任何反馈，请通过 [GitHub Issues](https://github.com/dream-num/univer/issues) 向 Univer 开发团队报告。

我们欢迎你对于这些早期版本的反馈。

## 下一步

* 在 [Facade API](https://docs.univer.ai/zh-CN/guides/slides/getting-started/facade.md) 中了解如何通过面板 API 操作 Slides。
* 在 [许可证](https://docs.univer.ai/zh-CN/guides/license.md) 中了解授权和部署要求。
* 按需接入 [功能](https://docs.univer.ai/zh-CN/guides/slides/features/print.md) 章节中的插件。