# Instalación y uso básico

- Human documentation: [https://docs.univer.ai/es-ES/guides/bases/getting-started/installation](https://docs.univer.ai/es-ES/guides/bases/getting-started/installation)

- Agent Markdown: [https://docs.univer.ai/es-ES/guides/bases/getting-started/installation.md](https://docs.univer.ai/es-ES/guides/bases/getting-started/installation.md)

- Requested language: `es-ES`

- Content language: `es-ES`

- Documentation version: `1.2.0`

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

---

Este capítulo presenta la instalación y uso básico de Univers Bases. Bases 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 el [Inicio rápido](https://docs.univer.ai/es-ES/guides/bases/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

Una aplicación Bases del navegador generalmente registra el tiempo de ejecución compartido de Univer, el motor de renderizado, el shell de la interfaz de usuario, el motor de fórmulas, la licencia y luego el modelo de Bases y los complementos de la interfaz de usuario.

### 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/engine-render @univerjs/ui @univerjs-pro/bases @univerjs-pro/bases-ui @univerjs-pro/engine-formula @univerjs-pro/license
```

#### npm

```shell
npm install @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/ui @univerjs-pro/bases @univerjs-pro/bases-ui @univerjs-pro/engine-formula @univerjs-pro/license
```

#### yarn

```shell
yarn add @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/ui @univerjs-pro/bases @univerjs-pro/bases-ui @univerjs-pro/engine-formula @univerjs-pro/license react react-dom rxjs
```

#### bun

```shell
bun add @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/ui @univerjs-pro/bases @univerjs-pro/bases-ui @univerjs-pro/engine-formula @univerjs-pro/license
```

#### Uso

Crea el contenedor antes de inicializar Univer y asígnale una altura explícita:

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

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 Bases.
> * Importe el CSS de la interfaz de usuario compartido antes CSS de la interfaz de usuario del producto.
> * Usa `UniverProFormulaEnginePlugin` de `@univerjs-pro/engine-formula` para Bases, incluidas las formas del panel de control. Si combinas varios productos en una misma instancia de `Univer`, sustituye cualquier importación y registro de `UniverFormulaEnginePlugin`; no registres ambos motores de fórmulas.

1.
   Importe estilos, paquetes de configuración regional y los complementos necesarios:
   
   ```ts
   import { UniverBasesPlugin } from '@univerjs-pro/bases'
   import { UniverBasesUIPlugin } from '@univerjs-pro/bases-ui'
   import BasesUIEnUS from '@univerjs-pro/bases-ui/locale/en-US'
   import BasesEnUS from '@univerjs-pro/bases/locale/en-US'
   import { UniverProFormulaEnginePlugin } from '@univerjs-pro/engine-formula'
   import { UniverLicensePlugin } from '@univerjs-pro/license'
   import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'
   import DesignEnUS from '@univerjs/design/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-pro/bases-ui/lib/index.css'
   ```

1.
   Importe entradas de fachada si desea utilizar Facade API[^facade-entry]:
   
   ```ts
   import { FUniver } from '@univerjs/core/facade'
   import '@univerjs-pro/bases/facade'
   import '@univerjs-pro/bases-ui/facade'
   ```

1.
   Cree una instancia de Univer, registre complementos y cree una unidad base:
   
   ```ts
   const univer = new Univer({
     locale: LocaleType.EN_US,
     locales: {
       [LocaleType.EN_US]: mergeLocales(
         DesignEnUS,
         UIEnUS,
         BasesEnUS,
         BasesUIEnUS,
       ),
     },
   })
   
   univer.registerPlugin(UniverRenderEnginePlugin)
   univer.registerPlugin(UniverUIPlugin, { container: 'app' })
   
   univer.registerPlugin(UniverProFormulaEnginePlugin)
   univer.registerPlugin(UniverLicensePlugin, {
     license: process.env.CLIENT_LICENSE_TEXT,
   })
   univer.registerPlugin(UniverBasesPlugin)
   univer.registerPlugin(UniverBasesUIPlugin)
   
   univer.createUnit(UniverInstanceType.UNIVER_BASE, {})
   
   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' }],

  UniverProFormulaEnginePlugin,
  [UniverLicensePlugin, {
    license: process.env.CLIENT_LICENSE_TEXT,
  }],
  UniverBasesPlugin,
  UniverBasesUIPlugin,
])
```

## Compatibilidad móvil

Actualmente, `@univerjs-pro/bases-ui` no exporta un plugin de UI móvil dedicado. No utilice importaciones `MobileUIPlugin` ni opciones `mobile: true` inexistentes. Un contenedor estrecho no garantiza compatibilidad táctil completa; evalúe la UI existente en los dispositivos de destino.

## 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/bases@alpha # Alpha version
npm install @univerjs-pro/bases@beta # Beta version
```

#### pnpm

```bash
pnpm add @univerjs-pro/bases@alpha # Alpha version
pnpm add @univerjs-pro/bases@beta # Beta version
```

#### yarn

```bash
yarn add @univerjs-pro/bases@alpha # Alpha version
yarn add @univerjs-pro/bases@beta # Beta version
```

#### bun

```bash
bun add @univerjs-pro/bases@alpha # Alpha version
bun add @univerjs-pro/bases@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/bases/getting-started/quickstart.md)
* [Facade API](https://docs.univer.ai/es-ES/guides/bases/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.