# Instalación y uso básico - Human documentation: [https://docs.univer.ai/es-ES/guides/boards/getting-started/installation](https://docs.univer.ai/es-ES/guides/boards/getting-started/installation) - Agent Markdown: [https://docs.univer.ai/es-ES/guides/boards/getting-started/installation.md](https://docs.univer.ai/es-ES/guides/boards/getting-started/installation.md) - Requested language: `es-ES` - Content language: `es-ES` - Documentation version: `1.2.0` - Source: [boards/getting-started/installation/index.es-ES.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/getting-started/installation/index.es-ES.mdx) --- Este capítulo presenta la instalación y el uso básico de Univers Boards. Boards se distribuye como un producto Univer Office SDK y actualmente utiliza el modo complemento. Si no está familiarizado con los conceptos básicos de Univer, lea primero [Inicio rápido](https://docs.univer.ai/es-ES/guides/boards/getting-started/quickstart.md). Univer ofrece dos modos de integración: *el modo preestablecido* y *el modo plugin*. El modo preestablecido simplifica la configuración mediante conjuntos de plugins preconfigurados. Si necesita **personalizaciones o extensiones avanzadas**, recomendamos el modo plugin para combinar y configurar los plugins de forma individual. ## Configuración a través del modo complemento Univer expone Boards como un conjunto de complementos. Un editor de navegador generalmente registra el tiempo de ejecución compartido de Univer, el complemento de licencia , las dependencias de documentos y dibujos, luego el modelo de Board y los complementos de UI. ### Uso del Administrador de paquetes Utiliza una herramienta de compilación compatible con ES Modules y el campo `exports` de `package.json`. #### Instalación Univer utiliza React para la interfaz y RxJS para los flujos de datos; también puede integrarse en Vue o Angular. Comprueba que las peer dependencies[^peer-dependency] `react`, `react-dom` y `rxjs` estén instaladas. El comando de Yarn siguiente las incluye explícitamente. Mantén todos los paquetes `@univerjs/*` y `@univerjs-pro/*` en **la misma versión**. #### pnpm ```shell pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/drawing-ui @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/ink-ui @univerjs-pro/shape-editor-ui @univerjs-pro/boards @univerjs-pro/boards-ui ``` #### npm ```shell npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/drawing-ui @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/ink-ui @univerjs-pro/shape-editor-ui @univerjs-pro/boards @univerjs-pro/boards-ui ``` #### yarn ```shell yarn add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/drawing-ui @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/ink-ui @univerjs-pro/shape-editor-ui @univerjs-pro/boards @univerjs-pro/boards-ui react react-dom rxjs ``` #### bun ```shell bun add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/drawing-ui @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/ink-ui @univerjs-pro/shape-editor-ui @univerjs-pro/boards @univerjs-pro/boards-ui ``` #### Uso Crea el contenedor antes de inicializar Univer y asígnale una altura explícita: ```html
``` Importa las entradas facade utilizadas a continuación antes de llamar a `FUniver.newAPI(univer)`. Importa el CSS en este orden: `@univerjs/design`, `@univerjs/ui` y, por último, el CSS del producto. > [!WARNING: Caution] > * Registre `UniverLicensePlugin` antes de registrar los complementos de Board. > * Importe CSS de UI compartido antes que CSS de UI del producto. > * Registre complementos de elementos opcionales antes de abrir instantáneas que contengan esos tipos de elementos. > * `UniverBoardsUIPlugin` carga automáticamente `UniverProFormulaEnginePlugin` para las formas. Si la misma instancia de `Univer` también registra `UniverFormulaEnginePlugin`, instala `@univerjs-pro/engine-formula` y sustituye la importación y el registro de ese motor por `UniverProFormulaEnginePlugin` en el código de inicialización. No registres ambos motores de fórmulas. 1. Importe estilos, paquetes de configuración regional y los complementos necesarios: ```ts import { UniverBoardsPlugin } from '@univerjs-pro/boards' import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui' import BoardsUIEnUS from '@univerjs-pro/boards-ui/locale/en-US' import { UniverInkUIPlugin } from '@univerjs-pro/ink-ui' import InkUIEnUS from '@univerjs-pro/ink-ui/locale/en-US' import { UniverLicensePlugin } from '@univerjs-pro/license' 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 { UniverDrawingUIPlugin } from '@univerjs/drawing-ui' import DrawingUIEnUS from '@univerjs/drawing-ui/locale/en-US' 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/drawing-ui/lib/index.css' import '@univerjs-pro/ink-ui/lib/index.css' import '@univerjs-pro/boards-ui/lib/index.css' ``` 1. Importe la entrada de fachada si desea utilizar Facade API[^facade-entry]: ```ts import { FUniver } from '@univerjs/core/facade' import '@univerjs-pro/boards/facade' ``` 1. Cree una instancia de Univer, registre complementos y cree una unidad Board: ```ts const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( DesignEnUS, UIEnUS, DocsUIEnUS, DrawingUIEnUS, InkUIEnUS, BoardsUIEnUS, ), }, }) univer.registerPlugin(UniverRenderEnginePlugin) univer.registerPlugin(UniverUIPlugin, { container: 'app' }) univer.registerPlugin(UniverDocsPlugin) univer.registerPlugin(UniverDocsUIPlugin) univer.registerPlugin(UniverDrawingPlugin) univer.registerPlugin(UniverDrawingUIPlugin) univer.registerPlugin(UniverInkUIPlugin) univer.registerPlugin(UniverLicensePlugin, { license: process.env.CLIENT_LICENSE_TEXT, }) univer.registerPlugin(UniverBoardsPlugin) univer.registerPlugin(UniverBoardsUIPlugin) univer.createUnit(UniverInstanceType.UNIVER_BOARD, {}) const univerAPI = FUniver.newAPI(univer) ``` #### Métodos `univer.registerPlugin` y `univer.registerPlugins` El método `univer.registerPlugin` se utiliza para registrar un complemento en la instancia de Univer. Puede llamar a este método después de crear la instancia de Univer para registrar complementos. Puede registrar un complemento utilizando el método `univer.registerPlugin(Plugin, options)`, donde `Plugin` es el complemento que se registrará y `options` son elementos de configuración opcionales, ya que cada complemento puede tener diferentes elementos de configuración. También puede usar `univer.registerPlugins` para pasar una matriz y registrar varios complementos a la vez. Esto es útil para escenarios en los que necesita administrar complementos de forma centralizada. ```typescript univer.registerPlugins([ UniverRenderEnginePlugin, [UniverUIPlugin, { container: 'app' }], UniverDocsPlugin, UniverDocsUIPlugin, UniverDrawingPlugin, UniverDrawingUIPlugin, UniverInkUIPlugin, [UniverLicensePlugin, { license: process.env.CLIENT_LICENSE_TEXT, }], UniverBoardsPlugin, UniverBoardsUIPlugin, ]) ``` El objeto `univerAPI` devuelto por `FUniver.newAPI(univer)` es API de fachada de Univer. Úselo para crear tableros y operar en elementos del tablero. ## Compatibilidad móvil > [!WARNING] > Estos ejemplos requieren paquetes del SDK que exporten los plugins móviles indicados. Mantenga todas las dependencias `@univerjs/*` y `@univerjs-pro/*` en **la misma versión**. > > `1.0.0-rc.0` no exporta `UniverBoardsMobileUIPlugin`. Utilice una compilación que incluya esta entrada móvil antes de seguir el ejemplo. Utilice **plugins de UI móvil** para los controles táctiles de Univer Boards.[^mobile-ui-mode] Elija el modo antes de crear el editor. En el ejemplo de modo plugin anterior, **sustituya** las siguientes importaciones y registros de UI antes de `createUnit()`. No los añada a un editor de escritorio ya inicializado. Conserve modelos, motores, traducciones, CSS e importaciones Facade. Las clases son exportaciones con nombre del **mismo punto de entrada del paquete**. ```typescript import { UniverBoardsMobileUIPlugin } from '@univerjs-pro/boards-ui' import { UniverDocsMobileUIPlugin } from '@univerjs/docs-ui' import { UniverDrawingMobileUIPlugin } from '@univerjs/drawing-ui' import { UniverMobileUIPlugin } from '@univerjs/ui' univer.registerPlugin(UniverMobileUIPlugin, { container: 'app' }) univer.registerPlugin(UniverDocsMobileUIPlugin) univer.registerPlugin(UniverDrawingMobileUIPlugin) univer.registerPlugin(UniverBoardsMobileUIPlugin) ``` ### Correspondencia de plugins Registre solo las funciones necesarias, con sus modelos y dependencias. Disponer de una UI móvil no implica que ambas interfaces ofrezcan los mismos controles. Las funciones Pro siguen necesitando la licencia correspondiente. Para las funciones que necesitan un backend, integra los módulos correspondientes de [Univer Server SDK](https://docs.univer.ai/es-ES/server.md) en tu aplicación. | Paquete | Registro de escritorio | Registro móvil | | ---------------------------------------- | ----------------------------------- | ----------------------------------------- | | `@univerjs/ui` | `UniverUIPlugin` | `UniverMobileUIPlugin` | | `@univerjs/docs-ui` | `UniverDocsUIPlugin` | `UniverDocsMobileUIPlugin` | | `@univerjs/drawing-ui` | `UniverDrawingUIPlugin` | `UniverDrawingMobileUIPlugin` | | `@univerjs-pro/boards-ui` | `UniverBoardsUIPlugin` | `UniverBoardsMobileUIPlugin` | | `@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/boards-chart-ui` | `UniverBoardsChartUIPlugin` | `UniverBoardsChartMobileUIPlugin` | | `@univerjs-pro/boards-mind-ui` | `UniverBoardsMindUIPlugin` | `UniverBoardsMindMobileUIPlugin` | | `@univerjs-pro/boards-resources-ui` | `UniverBoardsResourcesUIPlugin` | `UniverBoardsResourcesMobileUIPlugin` | | `@univerjs-pro/boards-table-ui` | `UniverBoardsTableUIPlugin` | `UniverBoardsTableMobileUIPlugin` | | `@univerjs-pro/boards-thread-comment-ui` | `UniverBoardsThreadCommentUIPlugin` | `UniverBoardsThreadCommentMobileUIPlugin` | ### Contenedor e interacción táctil Defina una altura explícita y el viewport de la página. `100dvh` sigue la altura dinámica del viewport. Compruebe el desplazamiento, el zoom con dos dedos, la selección de texto, el portapapeles y el teclado virtual en los navegadores móviles de destino. Reducir el ancho no selecciona los plugins móviles. `UniverMobileUIPlugin` usa `disableAutoFocus: true` de forma predeterminada para evitar que el editor tome el foco automáticamente al inicializarse. ```html
``` ## Paquetes de funciones opcionales Agregue paquetes de funciones cuando el editor de tableros necesite el tipo de elemento correspondiente: ```shell pnpm add @univerjs-pro/boards-table @univerjs-pro/boards-table-ui pnpm add @univerjs-pro/boards-mind @univerjs-pro/boards-mind-ui ``` Para ver ejemplos de registro de funciones, consulte [Tabla](https://docs.univer.ai/es-ES/guides/boards/features/tables.md), [Mapas mentales](https://docs.univer.ai/es-ES/guides/boards/features/mind-maps.md) e [Importación y exportación](https://docs.univer.ai/es-ES/guides/boards/features/import-export.md). ## Otras versiones Además de las versiones estables, Univer ofrece canales alfa/beta y nocturnos. Estas versiones le permiten obtener acceso anticipado a las funciones más nuevas que aún no se han lanzado oficialmente. Sin embargo, tenga en cuenta que más funciones también significan más riesgos. Estas versiones pueden contener errores, funciones incompletas o características inestables. Evite el uso de estas versiones en entornos de producción siempre que sea posible. ### Lanzamiento alfa/beta Cuando el equipo de desarrollo de Univer completa una nueva función o un cambio significativo, es posible que lo publique previamente en el canal alfa o beta. Puede instalar la versión alfa/beta de un paquete de Univer usando el siguiente comando: #### npm ```bash npm install @univerjs-pro/boards@alpha # Alpha version npm install @univerjs-pro/boards@beta # Beta version ``` #### pnpm ```bash pnpm add @univerjs-pro/boards@alpha # Alpha version pnpm add @univerjs-pro/boards@beta # Beta version ``` #### yarn ```bash yarn add @univerjs-pro/boards@alpha # Alpha version yarn add @univerjs-pro/boards@beta # Beta version ``` #### bun ```bash bun add @univerjs-pro/boards@alpha # Alpha version bun add @univerjs-pro/boards@beta # Beta version ``` Si encuentra algún problema o tiene algún comentario mientras usa las versiones alfa/beta, infórmelo al equipo de desarrollo de Univer a través de [Problemas de GitHub](https://github.com/dream-num/univer/issues). Agradecemos sus comentarios sobre estas primeras versiones. ## Próximos pasos * [Inicio rápido](https://docs.univer.ai/es-ES/guides/boards/getting-started/quickstart.md) * [Facade API](https://docs.univer.ai/es-ES/guides/boards/getting-started/facade.md) * [Configuración de la licencia](https://docs.univer.ai/es-ES/server/license.md) * [Integración de Server SDK](https://docs.univer.ai/es-ES/server.md) [^peer-dependency]: Las `peerDependencies` son dependencias que la aplicación anfitriona debe proporcionar con versiones compatibles. Permiten compartir bibliotecas como React con Univer. [^facade-entry]: Facade es la API de aplicación de los plugins registrados. Importar una entrada de Facade añade métodos a la API, pero no registra el plugin de la función. [^mobile-ui-mode]: Un plugin de UI móvil selecciona controles táctiles y servicios móviles durante la inicialización. No detecta automáticamente el dispositivo ni cambia una instancia existente al redimensionar la ventana. Para cambiar de modo, conserve el estado del documento, destruya la instancia anterior e inicialice los plugins elegidos.