univer

环境要求

• Node.js 运行环境（README 未指定具体版本）
• 使用 pnpm 作为包管理器（README 全部命令均为 pnpm add）
• 一个可运行的前端工程，页面中需有承载 Univer 的容器元素
• 若在服务端使用，需 Node.js 环境（README 称 Facade API 同时支持浏览器与 Node.js）

安装与启动步骤

1. 1准备页面容器

   在页面中放置一个带 id 的容器，Univer 的 UI 会挂载到该元素上，示例 id 为 app。

   <div id="app" style="height: 100vh"></div>

   复制

2. 2安装插件模式依赖

   插件模式可精细控制包、样式、语言包与 Facade 注册，依赖较多但可控性最强。

   pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui @univerjs/sheets-ui @univerjs/ui

   复制

3. 3引入模块与样式

   必须导入各 UI 包的 index.css，并导入各包的 /facade 入口，否则样式缺失、Facade API 不可用。

   import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
   import { FUniver } from '@univerjs/core/facade'
   import { UniverDocsPlugin } from '@univerjs/docs'
   import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
   import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'
   import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
   import { UniverSheetsPlugin } from '@univerjs/sheets'
   import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula'
   import { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui'
   import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt'
   import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui'
   import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'
   import { UniverUIPlugin } from '@univerjs/ui'
   
   import '@univerjs/design/lib/index.css'
   import '@univerjs/ui/lib/index.css'
   import '@univerjs/docs-ui/lib/index.css'
   import '@univerjs/sheets-ui/lib/index.css'
   import '@univerjs/sheets-formula-ui/lib/index.css'
   import '@univerjs/sheets-numfmt-ui/lib/index.css'
   
   import '@univerjs/engine-formula/facade'
   import '@univerjs/ui/facade'
   import '@univerjs/sheets/facade'
   import '@univerjs/sheets-ui/facade'
   im

   复制

4. 4创建实例并注册插件

   用 new Univer 传入 locale 与合并后的语言包，再逐个 registerPlugin；UI 插件的 container 需与页面容器 id 一致。

   const univer = new Univer({
     locale: LocaleType.EN_US,
     locales: {
       [LocaleType.EN_US]: mergeLocales(
         DesignEnUS,
         UIEnUS,
         DocsUIEnUS,
         SheetsEnUS,
         SheetsUIEnUS,
         SheetsFormulaEnUS,
         SheetsFormulaUIEnUS,
         SheetsNumfmtUIEnUS,
       ),
     },
   })
   
   univer.registerPlugin(UniverRenderEnginePlugin)
   univer.registerPlugin(UniverFormulaEnginePlugin)
   univer.registerPlugin(UniverUIPlugin, { container: 'app' })
   univer.registerPlugin(UniverDocsPlugin)
   univer.registerPlugin(UniverDocsUIPlugin)
   univer.registerPlugin(UniverSheetsPlugin)
   univer.registerPlugin(UniverSheetsUIPlugin)
   univer.registerPlugin(UniverSheetsFormulaPlugin)
   univer.registerPlugin(UniverSheetsFormulaUIPlugin)
   univer.registerPlugin(UniverSheetsNumfmtPlugin)
   univer.registerPlugin(UniverSheetsNumfmtUIPlugin)

   复制

5. 5创建空白工作簿

   通过 FUniver.newAPI 拿到 Facade API，再调用 createWorkbook 渲染出表格界面。

   const univerAPI = FUniver.newAPI(univer)
   univerAPI.createWorkbook({})

   复制

6. 6安装 Preset 模式依赖

   若只需 Sheets/Docs/Node 等受支持场景，可用 Preset 模式，包与配置更少，开箱即用。

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

   复制

7. 7用 Preset 初始化

   用 createUniver 直接传入 presets 数组，Preset 已内置必要的 Facade 注册与样式引入。

   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'
   
   const { univerAPI } = createUniver({
     locale: LocaleType.EN_US,
     locales: {
       [LocaleType.EN_US]: mergeLocales(UniverPresetSheetsCoreEnUS),
     },
     presets: [
       UniverSheetsCorePreset({
         container: 'app',
       }),
     ],
   })
   
   univerAPI.createWorkbook({})

   复制

关键配置

如何确认成功

页面容器中出现可编辑的电子表格工作簿界面（或 Node 端成功执行 createWorkbook 不报错），即为启动成功。

常见问题

注意事项

• README 只提供了 pnpm 的安装命令，未给出 npm/yarn 的安装方式，请勿自行替换包管理器。
• 页面必须有 id 为 app（或自定义后同步传给 container）的容器元素，否则 UI 无处挂载。
• 各 UI 包的 index.css 与各包的 /facade 导入顺序在示例中已给出，建议原样保留。
• README 未说明 Node 版本要求、开发服务器启动或构建命令，相关步骤需参考官网文档。