Integrar en Vue

Si está buscando cómo utilizar componentes de Vue como componentes personalizados, consulte aquí.

Antes de integrar Univer en un proyecto Vue, lee la instalación y el uso básico y familiarízate con los componentes de Vue y sus hooks del ciclo de vida.

Vue 3.x

Notas antes de la integración

Evite el proxy de las instancias de Univer y FUnivers, ya que esto puede provocar a errores impredecibles o problemas de rendimiento.

Pasos de integración

Inicializar Univer en el gancho onMounted
Destruir Univer en el gancho onBeforeUnmount

Ejemplo

Vue

<script lang="ts" setup>import type { Univer } from '@univerjs/presets'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import { onBeforeUnmount, onMounted, ref } from 'vue'import '@univerjs/preset-sheets-core/lib/index.css'const container = ref<HTMLElement | null>(null)let univerInstance: Univer | null = nullonMounted(() => {  const { univer, univerAPI } = createUniver({    locale: LocaleType.EN_US,    locales: {      [LocaleType.EN_US]: mergeLocales(        UniverPresetSheetsCoreEnUS,      ),    },    presets: [      UniverSheetsCorePreset({        container: container.value as HTMLElement,      }),    ],  })  univerAPI.createWorkbook({})  univerInstance = univer})onBeforeUnmount(() => {  univerInstance?.dispose()  univerInstance = null})</script><template>  <div ref="container" style="height: 600px" /></template>

Esta sección es para aplicaciones Vue 2 existentes. Ejemplo verificado con Vue 2.7.16, Vite 6.3.6, @vitejs/plugin-vue2 2.3.3 y Univer 1.4.0. Para proyectos nuevos se recomienda Vue 3.

Para empezar desde cero, extrae el proyecto inicial, ejecuta npm install y npm run dev y abre la URL indicada. La interfaz está en inglés. Para un proyecto existente, sigue los pasos siguientes.

Instalar dependencias coherentes

Bash

npm install @univerjs/presets@1.4.0 @univerjs/preset-sheets-core@1.4.0 react@18.3.1 react-dom@18.3.1 rxjs@7.8.2

Añadir el componente a tu página

No guardes Univer ni Facade en los data reactivos. Inicializa en mounted cuando exista el contenedor y llama a univer.dispose() en beforeDestroy. No destruyas la misma instancia de nuevo mediante Facade.

Vue

<script>import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'export default {  mounted() {    const { univer, univerAPI } = createUniver({      locale: LocaleType.EN_US,      locales: {        [LocaleType.EN_US]: mergeLocales(          UniverPresetSheetsCoreEnUS,        ),      },      presets: [        UniverSheetsCorePreset({          container: this.$refs.container,        }),      ],    })    this.univerInstance = univer    this.univerAPI = univerAPI    const workbook = univerAPI.createWorkbook({})    workbook.getActiveSheet().getRange('A1:D3').setValues([      ['Item', 'Quantity', 'Unit price', 'Total'],      ['Notebook', 3, 12, '=B2*C2'],      ['Pen', 5, 2, '=B3*C3'],    ])  },  beforeDestroy() {    this.univerInstance?.dispose()    this.univerInstance = null    this.univerAPI = null  },}</script><template>  <div ref="container" style="height: 600px" /></template>

Comprobar el resultado

El primer importe debe ser 36. Cambia la cantidad de 3 a 4 y comprueba que pase a 48. Retira y vuelve a montar el componente para verificar la limpieza y recreación.

Si falla la inicialización

Ante un error setConfig, compara con el proyecto inicial y revisa las dependencias con el comando siguiente. Mantén una única versión de los paquetes Univer y una pareja React / ReactDOM compatible. Una traza por sí sola no demuestra que Vue 2 no esté soportado.

Bash

npm ls @univerjs/core @univerjs/ui @univerjs/presets @univerjs/preset-sheets-core react react-dom

Si solo está vacía la zona de edición, comprueba la altura del contenedor y el CSS del preset. No conviertas la instancia Univer en reactiva para almacenarla en el componente.

Webpack 4 / Vue CLI 3–4

El proyecto usa Vite y exports de paquetes. Compilarlo no verifica Webpack 4. Si tu herramienta antigua no resuelve los exports Facade o de idiomas, se recomienda actualizarla. Una lista parcial de alias puede ocultar módulos ausentes o duplicados.

¿Cómo es esta guía?