在 Vue 中集成
如果你正在寻找使用 Vue 组件作为自定义组件的方法，请参阅此处。
在集成 Univer 到 Vue 项目前，请确保你已经阅读了安装和基本使用章节，并了解 Vue 组件和生命周期钩子。
Vue 3.x
集成前须知
- 应避免对 Univer 和 FUniver 的实例进行代理，否则可能会引起不可预知的错误或性能问题。
集成步骤
- 在
onMounted钩子中初始化 Univer - 在
onBeforeUnmount钩子中销毁 Univer
示例代码
Vue
<script lang="ts" setup>import type { Univer } from '@univerjs/presets'import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreZhCN from '@univerjs/preset-docs-core/locales/zh-CN'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import { onBeforeUnmount, onMounted, ref } from 'vue'import '@univerjs/preset-docs-core/lib/index.css'const container = ref<HTMLElement | null>(null)let univerInstance: Univer | null = nullonMounted(() => { const { univer, univerAPI } = createUniver({ locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( UniverPresetDocsCoreZhCN, ), }, presets: [ UniverDocsCorePreset({ container: container.value as HTMLElement, }), ], }) univerAPI.createDocument({}) univerInstance = univer})onBeforeUnmount(() => { univerInstance?.dispose() univerInstance = null})</script><template> <div ref="container" style="height: 600px" /></template>Vue 2.x
集成前须知
- 使用 pnpm 安装
@univerjs/presets时，可能会出现需要手动安装 react 和 react-dom 的情况。 - 如果在开发环境中遇到了 ResizeObserver loop limit exceeded 警告，可以忽略它，也可以参考下面的代码片段解决：
TypeScript
if (process.env.NODE_ENV === 'development') { const _ResizeObserver = window.ResizeObserver function debounce(fn, delay) { let timer = null return function () { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn.apply(this, arguments) }, delay) } } window.ResizeObserver = class ResizeObserver extends _ResizeObserver { constructor(callback) { callback = debounce(callback, 50) super(callback) } }}集成步骤
- 在
mounted钩子中初始化 Univer - 在
beforeDestroy钩子中销毁 Univer
示例代码
Vue
<script>import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreZhCN from '@univerjs/preset-docs-core/locales/zh-CN'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'export default { mounted() { const { univer, univerAPI } = createUniver({ locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( UniverPresetDocsCoreZhCN, ), }, presets: [ UniverDocsCorePreset({ container: this.$refs.container, }), ], }) univerAPI.createDocument({}) this.univerInstance = univer }, beforeDestroy() { this.univerInstance?.dispose() this.univerInstance = null },}</script><template> <div ref="container" style="height: 600px" /></template>你觉得这篇文档如何？