# Установка и основы использования - Human documentation: [https://docs.univer.ai/ru-RU/guides/slides/getting-started/installation](https://docs.univer.ai/ru-RU/guides/slides/getting-started/installation) - Agent Markdown: [https://docs.univer.ai/ru-RU/guides/slides/getting-started/installation.md](https://docs.univer.ai/ru-RU/guides/slides/getting-started/installation.md) - Requested language: `ru-RU` - Content language: `ru-RU` - Documentation version: `1.2.0` - Source: [slides/getting-started/installation/index.ru-RU.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/getting-started/installation/index.ru-RU.mdx) --- В этой главе описаны установка и основы использования Univer Slides. В руководстве используются пакеты Slides из Web SDK. Сейчас для Slides нет пресета, поэтому приложение необходимо создавать в режиме плагинов. Если вы ещё не знакомы с основными концепциями Univer, сначала прочитайте раздел [«Быстрый старт»](https://docs.univer.ai/ru-RU/guides/slides/getting-started/quickstart.md). Univer поддерживает два способа интеграции: *режим предустановок* и *режим плагинов*. Предустановки упрощают настройку благодаря готовым наборам плагинов. Для **глубокой настройки и расширения возможностей** рекомендуем режим плагинов, позволяющий комбинировать и настраивать плагины по отдельности. ## Настройка в режиме плагинов Univer предоставляет Slides в виде набора плагинов. В браузерном редакторе обычно регистрируют общую среду выполнения Univer, плагин лицензии , зависимости Docs и Drawing, а затем плагины модели и интерфейса Slides. ### Использование менеджера пакетов Используйте сборщик с поддержкой ES Modules и поля `exports` в `package.json`. #### Установка Univer использует React для интерфейса и RxJS для потоков данных; его также можно встроить в Vue или Angular. Убедитесь, что peer dependencies[^peer-dependency] `react`, `react-dom` и `rxjs` установлены. Команда 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
``` Перед вызовом `FUniver.newAPI(univer)` импортируйте точки входа facade из примера ниже. Импортируйте CSS в порядке: `@univerjs/design`, `@univerjs/ui`, затем CSS продукта. > [!WARNING: Внимание] > * Регистрируйте `UniverLicensePlugin` до регистрации плагинов Slides. > * Импортируйте общие стили интерфейса до стилей интерфейса продукта. > * Добавляйте необязательные пакеты функций, например печать, таблицы, диаграммы, импорт и экспорт, только тогда, когда они нужны продукту. > * `UniverSlidesUIPlugin` автоматически загружает `UniverProFormulaEnginePlugin` для работы с фигурами. Если в том же экземпляре `Univer` также регистрируется `UniverFormulaEnginePlugin`, установите `@univerjs-pro/engine-formula` и замените импорт и регистрацию обычного движка на `UniverProFormulaEnginePlugin` в коде инициализации. Не регистрируйте оба движка формул. 1. Импортируйте стили, пакеты локализации и необходимые плагины: ```typescript import { UniverLicensePlugin } from '@univerjs-pro/license' import { UniverSlidesPlugin } from '@univerjs-pro/slides' import { UniverSlidesUIPlugin } from '@univerjs-pro/slides-ui' import SlidesUIEnUS from '@univerjs-pro/slides-ui/locale/en-US' import SlidesEnUS from '@univerjs-pro/slides/locale/en-US' import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core' import DesignEnUS from '@univerjs/design/locale/en-US' import { UniverDocsPlugin } from '@univerjs/docs' import { UniverDocsUIPlugin } from '@univerjs/docs-ui' import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US' import { UniverDrawingPlugin } from '@univerjs/drawing' import { UniverRenderEnginePlugin } from '@univerjs/engine-render' import { UniverUIPlugin } from '@univerjs/ui' import UIEnUS from '@univerjs/ui/locale/en-US' 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-entry], импортируйте его точки входа: ```typescript import { FUniver } from '@univerjs/core/facade' import '@univerjs-pro/slides/facade' ``` 1. Создайте экземпляр Univer, зарегистрируйте плагины и создайте юнит Slides: ```typescript const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( DesignEnUS, UIEnUS, DocsUIEnUS, SlidesEnUS, SlidesUIEnUS, ), }, }) 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`, возвращаемый методом `FUniver.newAPI(univer)`, представляет собой Facade API Univer. Используйте его для создания презентаций и вызова 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/ru-RU/guides/slides/features/print.md), [«Таблицы»](https://docs.univer.ai/ru-RU/guides/slides/features/tables.md), [«Диаграммы»](https://docs.univer.ai/ru-RU/guides/slides/features/charts.md) и [«Импорт и экспорт»](https://docs.univer.ai/ru-RU/guides/slides/features/import-export.md). #### Отложенная загрузка необязательных плагинов В режиме плагинов можно отложить загрузку функциональных плагинов до момента, когда они действительно понадобятся продукту: ```typescript univer.createUnit(UniverInstanceType.UNIVER_SLIDE, {}) import('@univerjs-pro/slides-chart').then(({ UniverSlidesChartPlugin }) => { univer.registerPlugin(UniverSlidesChartPlugin) }) ``` ### Использование на сервере В Node.js регистрируйте плагины модели без плагинов браузерного интерфейса: ```typescript univer.registerPlugin(UniverSlidesPlugin) ``` Плагин модели используется для обработки снимков без интерфейса. Чтобы предоставить API совместного редактирования или преобразования файлов, подключите соответствующие [модули Server SDK](https://docs.univer.ai/ru-RU/server.md); регистрация одного плагина не создаёт эти сервисы. ## Поддержка мобильных устройств > [!WARNING] > Для примеров нужны пакеты SDK, экспортирующие перечисленные мобильные плагины. Все зависимости `@univerjs/*` и `@univerjs-pro/*` должны иметь **одинаковую версию**. > > `1.0.0-rc.0` не экспортирует `UniverSlidesMobileUIPlugin`. Для этого примера используйте сборку, содержащую соответствующую мобильную точку входа. Для сенсорного интерфейса Univer Slides используйте **мобильные UI-плагины**.[^mobile-ui-mode] Выберите режим до создания редактора. В примере режима плагинов выше **замените** следующие импорты и регистрации UI до вызова `createUnit()`. Не добавляйте их к уже инициализированному настольному редактору. Сохраните плагины моделей, движки, локализации, CSS и импорты Facade. Классы экспортируются под разными именами из **одной точки входа пакета**. ```typescript import { UniverSlidesMobileUIPlugin } from '@univerjs-pro/slides-ui' import { UniverDocsMobileUIPlugin } from '@univerjs/docs-ui' import { UniverMobileUIPlugin } from '@univerjs/ui' univer.registerPlugin(UniverMobileUIPlugin, { container: 'app' }) univer.registerPlugin(UniverDocsMobileUIPlugin) univer.registerPlugin(UniverSlidesMobileUIPlugin) ``` ### Соответствие плагинов Регистрируйте только нужные функции, сохраняя плагины моделей и зависимости. Наличие мобильного UI не означает одинаковый набор элементов управления на обеих платформах. Функциям Pro по-прежнему нужны соответствующая лицензия. Для функций, которым нужен backend, подключите соответствующие модули [Univer Server SDK](https://docs.univer.ai/ru-RU/server.md) к своему приложению. | Пакет | Настольная регистрация | Мобильная регистрация | | ---------------------------------------- | ----------------------------------- | ----------------------------------------- | | `@univerjs/ui` | `UniverUIPlugin` | `UniverMobileUIPlugin` | | `@univerjs/docs-ui` | `UniverDocsUIPlugin` | `UniverDocsMobileUIPlugin` | | `@univerjs-pro/slides-ui` | `UniverSlidesUIPlugin` | `UniverSlidesMobileUIPlugin` | | `@univerjs/drawing-ui` | `UniverDrawingUIPlugin` | `UniverDrawingMobileUIPlugin` | | `@univerjs/thread-comment-ui` | `UniverThreadCommentUIPlugin` | `UniverThreadCommentMobileUIPlugin` | | `@univerjs-pro/shape-editor-ui` | `UniverShapeEditorUIPlugin` | `UniverShapeEditorMobileUIPlugin` | | `@univerjs-pro/chart-ui` | `UniverChartUIPlugin` | `UniverChartMobileUIPlugin` | | `@univerjs-pro/exchange-client` | `UniverExchangeClientPlugin` | `UniverExchangeClientMobileUIPlugin` | | `@univerjs-pro/slides-chart-ui` | `UniverSlidesChartUIPlugin` | `UniverSlidesChartMobileUIPlugin` | | `@univerjs-pro/slides-print` | `UniverSlidesPrintPlugin` | `UniverSlidesPrintMobilePlugin` | | `@univerjs-pro/slides-table-ui` | `UniverSlidesTableUIPlugin` | `UniverSlidesTableMobileUIPlugin` | | `@univerjs-pro/slides-thread-comment-ui` | `UniverSlidesThreadCommentUIPlugin` | `UniverSlidesThreadCommentMobileUIPlugin` | ### Контейнер и сенсорное управление Задайте явную высоту контейнера и viewport страницы. `100dvh` соответствует динамической высоте области просмотра. Проверьте прокрутку, масштабирование двумя пальцами, выделение текста, буфер обмена и экранную клавиатуру в целевых мобильных браузерах. Уменьшение ширины не включает мобильные плагины. `UniverMobileUIPlugin` по умолчанию использует `disableAutoFocus: true`, чтобы редактор не получал фокус автоматически при инициализации. ```html
``` ## Другие каналы выпуска Помимо стабильных выпусков, Univer предлагает каналы alpha / beta и nightly. Они позволяют заранее получить доступ к новейшим функциям, которые еще не выпущены официально. Однако вместе с новыми возможностями возрастают и риски: такие версии могут содержать ошибки, неполные или нестабильные функции. По возможности не используйте их в рабочей среде. ### Выпуски Alpha / Beta После завершения работы над новой функцией или существенным изменением команда разработчиков Univer может предварительно опубликовать их в канале alpha или beta. Установить alpha- или beta-версию пакета Univer можно следующей командой: #### npm ```bash npm install @univerjs-pro/slides@alpha # Alpha version npm install @univerjs-pro/slides@beta # Beta version ``` #### pnpm ```bash pnpm add @univerjs-pro/slides@alpha # Alpha version pnpm add @univerjs-pro/slides@beta # Beta version ``` #### yarn ```bash yarn add @univerjs-pro/slides@alpha # Alpha version yarn add @univerjs-pro/slides@beta # Beta version ``` #### bun ```bash bun add @univerjs-pro/slides@alpha # Alpha version bun add @univerjs-pro/slides@beta # Beta version ``` Если при использовании alpha- или beta-версий вы обнаружите проблему или захотите поделиться отзывом, сообщите об этом команде разработчиков Univer через [GitHub Issues](https://github.com/dream-num/univer/issues). Мы будем рады вашим отзывам о предварительных выпусках. ## Что дальше * Узнайте, как использовать [Facade API](https://docs.univer.ai/ru-RU/guides/slides/getting-started/facade.md). * [Настройка лицензии](https://docs.univer.ai/ru-RU/server/license.md) * [Интеграция Server SDK](https://docs.univer.ai/ru-RU/server.md) * Добавьте нужные функциональные плагины из раздела [«Функции»](https://docs.univer.ai/ru-RU/guides/slides/features/print.md). [^peer-dependency]: `peerDependencies` — зависимости, совместимые версии которых предоставляет основное приложение. Это позволяет Univer и приложению использовать общую копию библиотек, например React. [^facade-entry]: Facade — прикладной API зарегистрированных плагинов. Импорт точки входа Facade добавляет методы API, но не регистрирует сам функциональный плагин. [^mobile-ui-mode]: Мобильный UI-плагин выбирает сенсорные элементы управления и мобильные сервисы при инициализации. Он не определяет устройство автоматически и не переключает существующий экземпляр при изменении размера окна. Чтобы сменить режим, сохраните состояние документа, уничтожьте старый экземпляр и инициализируйте выбранный набор плагинов.