# Installation et utilisation de base

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

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

- Requested language: `fr-FR`

- Content language: `fr-FR`

- Documentation version: `1.2.0`

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

---

Ce chapitre présente l’installation et l’utilisation de base d’Univer Bases. Bases est distribué en tant que produit Univer Office SDK et utilise actuellement le mode plugin.

Si vous ne connaissez pas les concepts fondamentaux d’Univer, commencez par lire le guide [Démarrage rapide](https://docs.univer.ai/fr-FR/guides/bases/getting-started/quickstart.md).

Univer propose deux modes d’intégration : *le mode prédéfini* et *le mode plugin*. Le mode prédéfini simplifie la configuration grâce à des ensembles de plugins préconfigurés. Pour une **personnalisation ou des extensions approfondies**, nous recommandons le mode plugin, qui permet de combiner et de configurer les plugins individuellement.

## Configuration en mode plugin

Une application Bases destinée au navigateur enregistre généralement l’environnement d’exécution partagé d’Univer, le moteur de rendu, l’interface utilisateur, le moteur de formules et la licence , puis les plugins du modèle et de l’interface utilisateur de Bases.

### Utilisation d’un gestionnaire de packages

Utilisez un outil de compilation compatible avec les modules ES et le champ `exports` de `package.json`.

#### Installation

Univer utilise React pour son interface et RxJS pour les flux de données ; il peut aussi être intégré à Vue ou Angular. Vérifiez que les peer dependencies[^peer-dependency] `react`, `react-dom` et `rxjs` sont installées. La commande Yarn ci-dessous les inclut explicitement.

Conservez **la même version** pour tous les packages `@univerjs/*` et `@univerjs-pro/*`.

#### 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
```

#### Utilisation

Créez le conteneur avant d’initialiser Univer et définissez une hauteur explicite :

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

Importez les entrées facade utilisées ci-dessous avant d’appeler `FUniver.newAPI(univer)`. Importez les CSS dans cet ordre : `@univerjs/design`, `@univerjs/ui`, puis ceux du produit.

> [!WARNING: Attention]
> * Enregistrez `UniverLicensePlugin` avant les plugins Bases.
> * Importez les styles CSS de l’interface utilisateur partagée avant ceux de l’interface du produit.
> * Utilisez `UniverProFormulaEnginePlugin` de `@univerjs-pro/engine-formula` pour Bases, y compris les formes des tableaux de bord. Si vous combinez plusieurs produits dans une même instance `Univer`, remplacez tout import et enregistrement de `UniverFormulaEnginePlugin` ; n'enregistrez pas les deux moteurs de formules.

1.
   Importez les styles, les packs de langue et les plugins requis :
   
   ```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.
   Importez les points d’entrée de la façade si vous souhaitez utiliser l’API Facade[^facade-entry] :
   
   ```ts
   import { FUniver } from '@univerjs/core/facade'
   import '@univerjs-pro/bases/facade'
   import '@univerjs-pro/bases-ui/facade'
   ```

1.
   Créez une instance d’Univer, enregistrez les plugins, puis créez une unité 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éthodes `univer.registerPlugin` et `univer.registerPlugins`

La méthode `univer.registerPlugin` sert à enregistrer un plugin dans l’instance Univer. Vous pouvez l’appeler après avoir créé l’instance Univer afin d’y enregistrer des plugins.

Vous pouvez enregistrer un plugin avec la méthode `univer.registerPlugin(Plugin, options)`, où `Plugin` désigne le plugin à enregistrer et `options` les paramètres de configuration facultatifs, qui peuvent varier d’un plugin à l’autre.

Vous pouvez également utiliser `univer.registerPlugins` pour passer un tableau et enregistrer plusieurs plugins en une seule fois. Cette possibilité est utile lorsque vous devez centraliser la gestion des plugins.

```typescript
univer.registerPlugins([
  UniverRenderEnginePlugin,
  [UniverUIPlugin, { container: 'app' }],

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

## Prise en charge mobile

Le paquet `@univerjs-pro/bases-ui` n’exporte actuellement aucun plugin UI mobile dédié. N’utilisez pas d’import `MobileUIPlugin` ni d’option `mobile: true` inexistants. Un conteneur étroit ne prouve pas une prise en charge tactile complète : vérifiez l’UI existante sur les appareils ciblés.

## Autres versions

Outre les versions stables, Univer propose des canaux alpha / beta et nightly. Ces versions vous donnent un accès anticipé aux fonctionnalités les plus récentes qui n’ont pas encore été publiées officiellement. Gardez toutefois à l’esprit que davantage de fonctionnalités implique aussi davantage de risques. Ces versions peuvent contenir des bugs, des fonctionnalités incomplètes ou instables. Évitez autant que possible de les utiliser dans des environnements de production.

### Version alpha / beta

Lorsque l’équipe de développement d’Univer termine une nouvelle fonctionnalité ou une modification importante, elle peut la publier en avant-première sur le canal alpha ou beta. Vous pouvez installer la version alpha / beta d’un package Univer à l’aide de la commande suivante :

#### 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 vous rencontrez un problème ou souhaitez faire part de vos commentaires lors de l’utilisation des versions alpha / beta, signalez-les à l’équipe de développement d’Univer via les [issues GitHub](https://github.com/dream-num/univer/issues).

Vos retours sur ces versions préliminaires sont les bienvenus.

## Étapes suivantes

* [Démarrage rapide](https://docs.univer.ai/fr-FR/guides/bases/getting-started/quickstart.md)
* [Facade API](https://docs.univer.ai/fr-FR/guides/bases/getting-started/facade.md)
* [Configuration de la licence](https://docs.univer.ai/fr-FR/server/license.md)
* [Intégration du Server SDK](https://docs.univer.ai/fr-FR/server.md)

[^peer-dependency]: Les `peerDependencies` sont des dépendances que l’application hôte doit fournir dans une version compatible. Elles permettent de partager des bibliothèques comme React avec Univer.

[^facade-entry]: Facade est l’API applicative des plugins enregistrés. Importer une entrée Facade ajoute des méthodes API, mais n’enregistre pas le plugin fonctionnel lui-même.