---
title: "安装"
description: "安装 Movk Sigma 与必需的 peer 依赖，按需补装布局、分析、渲染程序等可选包。"
canonical_url: "https://sigma.mhaibaraai.cn/docs/getting-started/installation"
---
# 安装

> 安装 Movk Sigma 与必需的 peer 依赖，按需补装布局、分析、渲染程序等可选包。

## 安装

```bash [pnpm]
pnpm add @movk/sigma sigma graphology
```

```bash [npm]
npm install @movk/sigma sigma graphology
```

```bash [yarn]
yarn add @movk/sigma sigma graphology
```

> [!TIP]
> 
> sigma
> 
>  与 
> 
> graphology
> 
>  是必需的 peer 依赖，由你自己安装——这样整个应用里只有一份 sigma 实例，也不会因为本模块的版本区间限制你升级上游。

## 配置

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@movk/sigma'],

  sigma: {
    prefix: 'Sigma',
    settings: { hideEdgesOnMove: true },
    css: true
  }
})
```

**prefix** (`string`): 默认 'Sigma' —— 组件名前缀。组件文件本身不带前缀，由此选项统一加上，即 Graph.vue 注册为 <SigmaGraph>。

**settings** (`Partial<Settings>`): 默认 {} —— 全局默认的 sigma 行为配置，与组件级 settings 深度合并后整体透传。不做键白名单，sigma 新增的配置项无需本模块升级即可使用。

**css** (`boolean`): 默认 true —— 注入内置控件与覆盖层的样式表。设为 false 后控件的结构与行为不受影响，只是不带样式。

## 可选依赖

其余能力按需装可选 peer，未安装时调用会抛出「装哪个包」的可操作报错：

- **布局** —— `graphology-layout`、`graphology-layout-forceatlas2`、`graphology-layout-noverlap`
- **分析** —— `graphology-metrics`、`graphology-communities-louvain`
- **渲染程序** —— `@sigma/node-image`、`@sigma/node-border`、`@sigma/node-square`、`@sigma/node-piechart`、`@sigma/edge-curve`
- **图片导出** —— `@sigma/export-image`

## SSR 与 WebGL

> [!WARNING]
> 
> sigma
> 
>  的每个子路径都在模块顶层读 
> 
> WebGL2RenderingContext
> 
> ——
> 
> sigma
> 
> 、
> 
> sigma/rendering
> 
> 、
> 
> sigma/primitives
> 
> 、
> 
> sigma/types
> 
>  无一例外，服务端没有这个全局，
> 
> 静态 import 会让 SSR 直接 ReferenceError
> 
> 。
> 
> import type
> 
>  编译期擦除，不受影响。

库内一律动态导入，使用方取用运行期的值时也要延迟。渲染原语用 `defineSigmaPrimitives()` 声明，组件会在建实例前解析完：

```vue
<script setup lang="ts">
const primitives = defineSigmaPrimitives(async () => {
  const { sdfCircle, layerFill } = await import('sigma/rendering')

  return {
    nodes: {
      shapes: [sdfCircle(), sdfPolygon({ name: 'hexagon', sides: 6 })],
      layers: [layerFill()]
    }
  }
})

const styles = {
  nodes: { shape: { attribute: 'shape', defaultValue: 'circle' } }
}
</script>

<template>
  <SigmaGraph :data="data" :primitives="primitives" :styles="styles" />
</template>
```

本库的 `sdfPolygon()` 与 `sdfStar()` 返回纯数据、不引用 sigma 的任何值，可以直接写在外层。

类型侧不受影响——`import type` 在编译期擦除，可以正常静态引入。`graphology` 也没有这个问题，可以直接静态 import。

## 样式

变量的默认值绑定到 Nuxt UI v4 的设计令牌，装了 `@nuxt/ui` 就自动跟随，不需要任何额外配置：

| Sigma 变量 | 绑定的 Nuxt UI 令牌 |
| --- | --- |
| `--sigma-color-bg` | `--ui-bg` |
| `--sigma-color-fg` | `--ui-text-highlighted` |
| `--sigma-color-muted` | `--ui-text-muted` |
| `--sigma-color-border` | `--ui-border` |
| `--sigma-color-hover` | `--ui-bg-elevated` |
| `--sigma-color-active` | `--ui-bg-accented` |
| `--sigma-color-accent` | `--ui-primary` |
| `--sigma-radius` | `calc(var(--ui-radius) * 1.5)`，即 `rounded-md` |

> [!NOTE]
> 
> 没装 
> 
> @nuxt/ui
> 
>  的纯 Nuxt 应用会回落到字面量兜底，取值等同 Nuxt UI 的默认主题（
> 
> slate
> 
>  + 
> 
> green
> 
> ），控件依旧是完整样式，深色跟随 
> 
> prefers-color-scheme
> 
> 。

要覆盖就直接写这些变量。内置规则都包在 `:where()` 里、特异性为 0，任何一条普通规则都能压过它，不必 `!important`：

```css
.sigma-root {
  --sigma-color-accent: #f43f5e;
  --sigma-radius: 10px;
  --sigma-control-size: 40px;
}

.dashboard-graph {
  --sigma-minimap-size: 180px;
}
```

## Vue + Vite

不用 Nuxt 的项目见 [Vue + Vite](https://sigma.mhaibaraai.cn/docs/getting-started/vue)：`@movk/sigma/vite` 自动导入、`@movk/sigma/vue` 具名导入与 `@movk/sigma/vue-plugin` 注入全局 settings，组件与 composables 的用法完全一致。


## Sitemap

See the full [sitemap](https://sigma.mhaibaraai.cn/sitemap.md) for all pages.