Vue에 통합하기
Vue 컴포넌트를 사용자 정의 컴포넌트로 사용하는 방법을 찾고 있다면 여기를 참고하세요.
Vue 프로젝트에 Univer를 통합하기 전에 설치 및 기본 사용법을 읽고 Vue 컴포넌트와 수명 주기 훅을 이해하세요.
Vue 3.x
통합 전 참고 사항
- Univer 및 FUniver 인스턴스를 프록시하지 마세요. 예기치 않은 오류나 성능 문제가 발생할 수 있습니다.
통합 단계
onMounted훅에서 Univer 초기화onBeforeUnmount훅에서 Univer 제거
예제
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
통합 전 참고 사항
- 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) } }}- Vue CLI 3.x/4.x(Webpack 4.x 기반)를 빌드 도구로 사용하는 경우 매핑된 경로를 실제 경로로 직접 변경해야 합니다.
JavaScript
// vue.config.jsconst path = require('node:path')module.exports = { transpileDependencies: ['@wendellhu/redi'], configureWebpack: { resolve: { alias: { '@univerjs/core/facade': path.resolve(__dirname, 'node_modules/@univerjs/core/lib/facade.js'), '@univerjs/engine-formula/facade': path.resolve(__dirname, 'node_modules/@univerjs/engine-formula/lib/facade.js'), '@univerjs/preset-sheets-core/lib/index.css': path.resolve(__dirname, 'node_modules/@univerjs/preset-sheets-core/lib/index.css'), '@univerjs/preset-sheets-core/locales/en-US': path.resolve(__dirname, 'node_modules/@univerjs/preset-sheets-core/lib/es/locales/en-US.js'), '@univerjs/design/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/design/lib/es/locale/en-US.js'), '@univerjs/docs-ui/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/docs-ui/lib/es/locale/en-US.js'), '@univerjs/sheets-formula-ui/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/sheets-formula-ui/lib/es/locale/en-US.js'), '@univerjs/sheets-formula/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/sheets-formula/lib/es/locale/en-US.js'), '@univerjs/sheets-numfmt-ui/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/sheets-numfmt-ui/lib/es/locale/en-US.js'), '@univerjs/sheets-ui/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/sheets-ui/lib/es/locale/en-US.js'), '@univerjs/sheets/facade': path.resolve(__dirname, 'node_modules/@univerjs/sheets/lib/facade.js'), '@univerjs/sheets/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/sheets/lib/es/locale/en-US.js'), '@univerjs/ui/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/ui/lib/es/locale/en-US.js'), '@wendellhu/redi/react-bindings': path.resolve(__dirname, 'node_modules/@wendellhu/redi/dist/esm/react-bindings/index.js'), // ... }, }, },}통합 단계
mounted훅에서 Univer 초기화beforeDestroy훅에서 Univer 제거
예제
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, }), ], }) univerAPI.createWorkbook({}) this.univerInstance = univer }, beforeDestroy() { this.univerInstance?.dispose() this.univerInstance = null },}</script><template> <div ref="container" style="height: 600px" /></template>이 가이드는 어떠셨나요?