---
title: "安装"
description: "安装 @movk/mapbox 及其 peer 依赖，并按 Nuxt 或 Vue + Vite 选择接入方式。"
seo_title: "Installation"
seo_description: "Install @movk/mapbox and mapbox-gl, optionally add mapbox-gl-draw for drawing, and prepare your Mapbox and Tianditu tokens."
canonical_url: "https://mapbox.mhaibaraai.cn/docs/getting-started/installation"
---
# 安装

> 安装 @movk/mapbox 及其 peer 依赖，并按 Nuxt 或 Vue + Vite 选择接入方式。

## 环境要求

> \[\!NOTE\]
> 
> - **Mapbox GL JS** —— v3（`mapbox-gl` 作为 peer 依赖）
> - **Vue** —— 3.4+
> - **Node.js** —— `^20.19.0 || >=22.12.0`
> - 一个 **Mapbox access token**（[免费申请](https://account.mapbox.com/access-tokens/){rel="[\"nofollow\"]"}）；如需天地图底图，另需天地图 `tk`

## 安装依赖

```bash [pnpm]
pnpm add @movk/mapbox mapbox-gl
```

```bash [npm]
npm install @movk/mapbox mapbox-gl
```

```bash [yarn]
yarn add @movk/mapbox mapbox-gl
```

需要绘制能力（`MapboxDrawControl`）时，额外安装：

```bash [pnpm]
pnpm add @mapbox/mapbox-gl-draw
```

```bash [npm]
npm install @mapbox/mapbox-gl-draw
```

```bash [yarn]
yarn add @mapbox/mapbox-gl-draw
```

## 选择接入方式

**Nuxt 4**

作为 Nuxt 模块注册，组件与 composables 自动导入。

**Vue + Vite**

经 Vite 插件 + vue-plugin，在纯 Vue 项目中使用同一套组件。


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.