快速开始 ​

本节将介绍如何在项目中使用 Vue Maplibre。

用法 ​

完整引入 ​

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

import VueMaplibre from '@meteosci/vue-maplibre'
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import '@meteosci/vue-maplibre/dist/index.css'

const app = createApp(App)

app.use(VueMaplibre)
app.mount('#app')

Volar 支持 ​

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.types 指定全局组件类型。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["@meteosci/vue-maplibre/global"]
  }
}

按需导入 ​

Vue Maplibre 提供了基于 ES Module 的开箱即用的 Tree Shaking功能。

App.vue

<script setup>
import { VmMap } from '@meteosci/vue-maplibre'
</script>

<template>
  <VmMap map-style="https://demotiles.maplibre.org/style.json" />
</template>

快捷搭建项目模板 ​

我们提供了 Vite 模板.

全局配置 ​

开始使用 ​

现在你可以启动项目了。 对于每个组件的用法，请查阅 对应的独立文档.