Интеграция в Vue

Если вы хотите использовать компоненты Vue в качестве пользовательских компонентов, обратитесь к этому разделу.

Перед интеграцией Univer в проект Vue прочитайте раздел установки и базовой настройки и ознакомьтесь с компонентами Vue и хуками их жизненного цикла.

Vue 3.x

Перед интеграцией

Не используйте прокси для экземпляров Univer и FUniver: это может привести к непредсказуемым ошибкам или проблемам с производительностью.

Этапы интеграции

Инициализируйте Univer в хуке onMounted
Уничтожьте Univer в хуке onBeforeUnmount

Пример

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>

Vue 2.x

Раздел для существующих приложений Vue 2. Пример проверен с Vue 2.7.16, Vite 6.3.6, @vitejs/plugin-vue2 2.3.3 и Univer 1.4.0. Для новых проектов рекомендуем Vue 3.

Чтобы начать с нуля, распакуйте проект, выполните npm install и npm run dev и откройте указанный URL. Интерфейс английский. Для существующего проекта следуйте шагам ниже.

Установить согласованные зависимости

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

Добавить компонент на страницу

Не помещайте Univer и Facade в реактивные data. Создавайте редактор в mounted, когда контейнер готов, и вызывайте univer.dispose() в beforeDestroy. Не уничтожайте тот же экземпляр повторно через 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>

Проверить результат

Сумма первой строки должна быть 36. Измените количество с 3 на 4 — получите 48. Удалите и снова смонтируйте компонент для проверки очистки и повторного создания.

Если инициализация не удалась

При ошибке setConfig сравните код со стартовым проектом и проверьте зависимости командой ниже. Используйте одну версию пакетов Univer и совместимую пару React / ReactDOM. Один стек ошибки не доказывает отсутствие поддержки Vue 2.

Bash

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

Если пустует только редактор, проверьте высоту контейнера и CSS пресета. Не делайте экземпляр Univer реактивным ради хранения в компоненте.

Webpack 4 / Vue CLI 3–4

Проект использует Vite и exports пакетов. Успешная сборка не подтверждает совместимость с Webpack 4. Если старый инструмент не разрешает Facade или языковые exports, рекомендуем обновить его. Неполные alias могут скрывать отсутствующие и повторные модули.

Насколько полезно это руководство?