安装和基本使用
如果你是首次使用 Univer，我们推荐从 Presets 开始，本章内容将会介绍基于 Presets 的引用方式。如果你已经较为熟悉 Univer，或希望更加灵活地引入插件（例如懒加载部分插件），请参考 高级安装。
在文档的大部分章节中，我们会介绍 Presets 和高级两种安装方式，请选择适合你的方式进行安装。
使用包管理器
如果你的项目中已经引入了现代前端开发工具，那么引入 Univer 将会非常简单。我们推荐使用 Vite、esbuild 或 Webpack 5 等对 ES Module 支持较好的构建工具来构建 Univer 应用。如果你使用了其它构建工具（例如 Webpack 4），可能会需要一些额外的配置，请阅读 常见问题 获取更多信息。
安装
选择你所使用的包管理器以安装 @unvierjs/presets：
npm install @univerjs/presets使用
仅仅十几行代码，你就可以启动一个电子表格应用并加载电子表格的基础功能：
import { createUniver, defaultTheme, LocaleType, Tools } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN';
const { univerAPI } = createUniver({
locale: LocaleType.ZH_CN,
locales: {
zhCN: UniverPresetSheetsCoreZhCN,
},
theme: defaultTheme,
presets: [
UniverSheetsCorePreset({
container: 'app',
}),
],
});
univerAPI.createUniverSheet({ name: 'Test Sheet' });更新
如果你使用的是 pnpm，你可以使用以下命令来更新所有的插件：
pnpm update "@univerjs/presets" @latest通过 <script> 标签引入
如果你不使用包管理工具，你也可以通过 <script> 标签引入 Univer。
示例
我们在当前主流的 CDN 服务商（例如 jsDelivr、unpkg）都提供了 Univer 的 UMD 构建，你可以在 HTML 文件中引入这些资源（当然你也可以下载这些文件然后通过自己的服务器或者 CDN 网络分发）：
<head>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/rxjs/dist/bundles/rxjs.umd.min.js"></script>
<script src="https://unpkg.com/@univerjs/presets/lib/umd/index.js"></script>
<script src="https://unpkg.com/@univerjs/preset-sheets-core/lib/umd/index.js"></script>
<script src="https://unpkg.com/@univerjs/preset-sheets-core/lib/umd/locales/zh-CN.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@univerjs/preset-sheets-core/lib/index.css" />
</head>
<body>
<div id="app"></div>
<script>
const { createUniver, LocaleType, Tools, defaultTheme } = UniverPresets
const { UniverSheetsCorePreset } = UniverPresetSheetsCore
const { univerAPI } = createUniver({
locale: LocaleType.ZH_CN,
locales: {
zhCN: Tools.deepMerge(
{},
UniverPresetSheetsCoreZhCN,
),
},
theme: defaultTheme,
presets: [
UniverSheetsCorePreset(),
],
});
univerAPI.createUniverSheet({ name: 'Test Sheet' }); // 创建一个名为 'Test Sheet' 的工作表
</script>
</body>这里返回的 univerAPI 对象被称为 Univer 的面板 API（Facade API），通过它可以调用 Univer 提供的许多功能。
指定版本
unpkg 和 jsDeliver 都支持指定特定版本的资源。以 unpkg 为例，如果你想使用 0.1.16 版本的 Univer，仅需在 URL 中加上 @<version> 来指定版本即可：
- https://unpkg.com/@univerjs/presets/lib/umd/index.js
+ https://unpkg.com/@univerjs/presets@0.5.0/lib/umd/index.js表格基本操作
在上一小节的代码中，你已经创建了一个 Univer 实例并创建了一个空的电子表格，不过大部分情况下你可能需要的是在 Univer 当中加载已有数据。这一小节将会介绍如何向 Univer 加载数据、修改数据以及如何从 Univer 中存储数据。
加载数据
通过调用 univerAPI 的 createUniverSheet 方法，可以创建一个新的 Workbook 实例。方法的第一个参数是一个对象，包含了 Workbook 的数据，应该符合 IWorkbookData 接口。
import { IWorkbookData, UniverInstanceType } from "@univerjs/core";
const data: IWorkbookData = {
id: 'test',
sheets: {
sheet1: {
id: 'sheet1',
name: 'sheet1',
cellData: {
0: {
0: {
v: 'Hello Univer!',
},
},
},
rowCount: 100,
columnCount: 100,
},
},
locale: LocaleType.ZH_CN,
name: 'Test Workbook',
sheetOrder: ['sheet1'],
};
const workbook = univerAPI.createUniverSheet(data);你可以在 工作表数据结构 进一步了解如何初始化表格数据。
修改数据
你可以通过调用 univerAPI 的方法来使用 Univer 了，例如获取当前激活的，并在指定的范围更新值：
const sheet = univerAPI.getActiveWorkbook().getActiveSheet();
const range = sheet.getRange(0, 0, 1, 1);
range.setValue(1);Univer 基于 命令系统 对状态和数据进行操作和更新，因此你必须使用 Facade API（或其对应的命令）来更新数据，任何直接对数据进行修改以更新视图的操作都不会生效。
存储数据
通过调用 workbook 的 save 方法，可以得到 IWorkbookData 对象，包含表格内部的最新数据。
const savedData = univerAPI.getActiveWorkbook().save();