企业官网建设流程全解析

Univer 快速上手：3 步构建企业级协作平台完整指南

【免费下载链接】univerUniver is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.项目地址: https://gitcode.com/GitHub_Trending/un/univer

Univer 是一个覆盖在线表格、文档、幻灯片三大内容形态的全栈开源框架，也是搭建企业级协作平台的现成底座。它把"编辑器"做成了一层可嵌入你产品的基础设施，而不是一个只能开箱即用的成品。

读完你将获得：

• 看懂 Univer 核心模块的分工，以及它为什么能在浏览器和服务器两端跑
• 走完安装、初始化、运行 3 步，在页面上得到一个可输入、可算的在线表格
• 掌握拦截器与插件两个扩展手法，把自定义逻辑接进数据流

定位：三大内容形态的一体化前端框架

一句话：Univer 是用于创建和编辑电子表格、文字处理文档、演示文稿的全栈框架，Web 与 Node.js 服务端皆可运行。

核心卖点：

• 三形态统一：表格、文档、幻灯片共用一套核心，不是三个拼接起来的独立产品
• 全栈能力：业务模块与 UI 无关，headless 模式下可以直接跑在 Node.js 里，服务端计算、协作同步不受浏览器限制
• 公式引擎内置：单元格公式、函数库、依赖追踪开箱即用
• 接入方式自由：React、Vue、Web Components 都有官方适配层，主题与多语言初始化时传参即可
• 扩展是一等公民：从菜单栏、工具条到单元格的数据读写，任何环节都能挂入自定义逻辑

3 步上手：安装、初始化、看到效果

第 1 步：装依赖。用 pnpm 安装预设包与表格预设：

pnpm add @univerjs/presets @univerjs/preset-sheets-core

第 2 步：初始化实例。下面这段代码创建实例、挂载表格模块并打开一个空工作簿：

import { createUniver, defaultTheme, LocaleType } from '@univerjs/presets'; import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'; const { univer, univerAPI } = createUniver({ locale: LocaleType.ZH_CN, theme: defaultTheme, presets: [UniverSheetsCorePreset()], }); univerAPI.createWorkbook({ name: '我的工作表' });

第 3 步：运行验证。参照 官方示例库 里的 preset-sheets-core 示例启动开发服务器，页面上出现的表格即可输入、可写公式。想换主题或语言，只需在初始化参数里调整 theme 和 locale，不需要额外配置。

核心模块分工：大白话讲清架构与公式引擎

先放一张总览图，再逐块拆：

• core：骨架层。文档数据模型、命令系统、撤销/重做、权限等基础设施都在这，上层模块不用关心底层怎么管状态。
• sheets / docs / slides：三大内容形态各自的业务模块，管编辑逻辑，不绑定任何 UI 框架，所以同样的代码可以 headless 跑在 Node.js 里。
• engine-render：只管画。单元格绘制、虚拟滚动与按需渲染都在这一层，屏幕上不可见的区域不参与计算和重绘。
• engine-formula：公式引擎。处理顺序大致是：把公式文本解析成结构化语法树，记录每个结果依赖哪些单元格，然后按依赖关系依次计算；某个输入值变化时，只重算受它影响的单元格，而不是整张表。

设计细节可以看 公式引擎架构笔记，源码位于 packages/engine-formula/。

场景实战：多实例、公式重算与大数据量表格

场景一：同页并行多个工作簿。场景：你的工作台要让用户并排打开一张表和一份文档同时编辑。做法：创建多个独立实例，各自持有数据、状态与权限，互不串扰。收益：前端不用自己维护"哪个编辑器属于哪块区域"这类脏状态，架构层面原生支持。

场景二：公式密集的大表。场景：报表里有大量公式，改一个上游单元格会引发一串重算。做法：公式引擎按依赖追踪只重算受影响的区域，渲染层用虚拟滚动只更新可视范围。收益：行数上去之后表格依然保持流畅滚动，仓库的 e2e 性能用例正是持续验证滚动场景。

场景三：往表格里塞图形。场景：用户希望直接在表格上插入形状来标注数据。做法：图形能力是独立预设，初始化时把 Drawing 预设加进列表即可。收益：拖拽、对齐这类交互现成可用，不用自己搭画布。

扩展机制：拦截单元格数据流中的任意一步

最常用的扩展点是单元格拦截器服务SheetInterceptorService。单元格的值或样式被读取、写入时，会先经过一串注册好的拦截器；你只需在链路里挂一个 handler，就能在不改核心代码的前提下"顺手加工"数据。条件格式、数据验证这类功能就是这么接进去的。

以"读值时给单元格做格式化"为例，思路如下：

import { InterceptorEffectEnum } from '@univerjs/core'; import { SheetInterceptorService, INTERCEPTOR_POINT } from '@univerjs/sheets'; const myInterceptor = { effect: InterceptorEffectEnum.Value, handler: (value, context, next) => { // 这里可以先加工 value（如给特定单元格加前缀），再传给 next return next(value); }, }; // 按枚举选一个拦截点注册，完整清单见源码 interceptor-const.ts sheetInterceptorService.register(INTERCEPTOR_POINT.STYLE, myInterceptor);

拦截点定义在 packages/sheets/src/services/sheet-interceptor/，挑与你场景匹配的点注册即可。此外，初始化时的plugins数组支持挂载完整插件（菜单、UI 组件、业务逻辑），示例库里的自定义导入 CSV 按钮就是一个最小参考。

回顾：下一个协作产品从哪开始

Univer 把文档协作从"嵌入一个功能"变成了"搭建一个框架"：三种内容形态共用一套核心，公式与渲染各有独立引擎，数据流的每一步都留有扩展缝。对要快速交付内部协作系统或 SaaS 办公产品的团队来说，值得放进技术选型的第一梯队。

• 官方示例库：表格、文档、多实例等多种集成方式的完整示例
• 文档目录：架构设计、命名规范、同构运行等约定说明
• 设计笔记：公式引擎、图形、选区等模块的设计思路

现在就去示例里改一个单元格的值，跑通它，你就掌握了这套框架的 80%。

【免费下载链接】univerUniver is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.项目地址: https://gitcode.com/GitHub_Trending/un/univer