open-index/open-npm huggingface dataset:
npm package: @mapgis/webclient-vue3-common
Description: MapGIS WebClient Vue3 Common by Vue3 + TS
Latest version: 17.8.0

# MapGIS WebClient Vue3 Common

## 特性

- 开箱即用的高质量 Vue 3组件
- 丰富的文档和示例

## 安装

```
# npm
npm install ant-design-vue@^4.2.6
npm install @mapgis/webclient-common
npm install @mapgis/webclient-vue3-ui
npm install @mapgis/webclient-vue3-common

# yarn
yarn add ant-design-vue@^4.2.6
yarn add @mapgis/webclient-common
yarn add @mapgis/webclient-vue3-ui
yarn add @mapgis/webclient-vue3-common

# pnpm
pnpm add ant-design-vue@^4.2.6
pnpm add @mapgis/webclient-common
pnpm add @mapgis/webclient-vue3-ui
pnpm add @mapgis/webclient-vue3-common
```

## 用法

在 main.ts 中写入以下内容：

### 完整引入

```js
import { createApp } from 'vue'
import App from './App.vue'

import '@mapgis/webclient-common'

import Antd from 'ant-design-vue'
import MapGISUIComponents from '@mapgis/webclient-vue3-ui'
import MapGISCommonComponents from '@mapgis/webclient-vue3-common'

import 'ant-design-vue/dist/reset.css'
import '@mapgis/webclient-vue3-ui/dist/index.css'
import '@mapgis/webclient-vue3-common/dist/index.css'

createApp(App).use(Antd).use(MapGISUIComponents).use(MapGISCommonComponents).mount('#app')
```

### 按需导入

默认支持基于 ES modules 的 tree shaking，直接引入 import { Zoom } from '@mapgis/webclient-vue3-common'; 就会有按需加载的效果

```vue
<template>
  <a-config-provider>
    <mapgis-theme-provider>
      <Zoom></Zoom>
    </mapgis-theme-provider>
  </a-config-provider>
</template>

<script>
import { Zoom } from '@mapgis/webclient-vue3-common'
import '@mapgis/webclient-vue3-common/dist/theme/zoom.css'
</script>
```
npm package: @mapgis/webclient-vue3-leaflet
Description: MapGIS WebClient Vue3 Leaflet by Vue3 + TS
Latest version: 17.8.0

# MapGIS WebClient Vue3 Leaflet

## 特性

- 开箱即用的高质量 Vue 3组件
- 丰富的文档和示例

## 安装

```
# npm
npm install ant-design-vue@^4.2.6
npm install @mapgis/leaflet
npm install @mapgis/webclient-common
npm install @mapgis/webclient-leaflet-plugin
npm install @mapgis/webclient-vue3-ui
npm install @mapgis/webclient-vue3-common
npm install @mapgis/webclient-vue3-leaflet

# yarn
yarn add ant-design-vue@^4.2.6
yarn add @mapgis/leaflet
yarn add @mapgis/webclient-common
yarn add @mapgis/webclient-leaflet-plugin
yarn add @mapgis/webclient-vue3-ui
yarn add @mapgis/webclient-vue3-common
yarn add @mapgis/webclient-vue3-leaflet

# pnpm
pnpm add ant-design-vue@^4.2.6
pnpm add @mapgis/leaflet
pnpm add @mapgis/webclient-common
pnpm add @mapgis/webclient-leaflet-plugin
pnpm add @mapgis/webclient-vue3-ui
pnpm add @mapgis/webclient-vue3-common
pnpm add @mapgis/webclient-vue3-leaflet
```

## 用法

在 main.ts 中写入以下内容：

### 完整引入

```js
import { createApp } from 'vue'
import App from './App.vue'

import '@mapgis/webclient-common'
import '@mapgis/webclient-leaflet-plugin'

import Antd from 'ant-design-vue'
import MapGISUIComponents from '@mapgis/webclient-vue3-ui'
import MapGISCommonComponents from '@mapgis/webclient-vue3-common'
import MapGISLeafletComponents from '@mapgis/webclient-vue3-leaflet'

import 'ant-design-vue/dist/reset.css'
import '@mapgis/webclient-vue3-ui/dist/index.css'
import '@mapgis/webclient-vue3-common/dist/index.css'
import '@mapgis/webclient-vue3-leaflet/dist/index.css'

createApp(App).use(Antd).use(MapGISUIComponents).use(MapGISCommonComponents).use(MapGISLeafletComponents).mount('#app')
```

### 按需导入

默认支持基于 ES modules 的 tree shaking，直接引入 import { WebMap } from '@mapgis/webclient-vue3-leaflet'; 就会有按需加载的效果

```vue
<template>
  <a-config-provider>
    <mapgis-theme-provider>
      <WebMap></WebMap>
    </mapgis-theme-provider>
  </a-config-provider>
</template>

<script>
import { WebMap } from '@mapgis/webclient-vue3-leaflet'
import '@mapgis/webclient-vue3-leaflet/dist/theme/web-map.css'
</script>
```

## 导入资源

通过webpack、vite等工具实现资源的拷贝，以vite为例：

> 需要先安装vite-plugin-static-copy

配置`vite.config.js`

```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineConfig({
  define: {
    MAPGIS_BASE_URL: JSON.stringify('./')
  },
  plugins: [
    vue(),
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@mapgis/webclient-common/dist/webclient-common-resource/*',
          dest: 'webclient-common-resource'
        }
      ]
    })
  ]
})
```
npm package: @mapgis/webclient-vue3-mapboxgl
Description: MapGIS WebClient Vue3 MapboxGL by Vue3 + TS
Latest version: 17.8.0

# MapGIS WebClient Vue3 MapboxGL

## 特性

- 开箱即用的高质量 Vue 3组件
- 丰富的文档和示例

## 安装

```
# npm
npm install ant-design-vue@^4.2.6
npm install @mapgis/mapbox-gl
npm install @mapgis/webclient-common
npm install @mapgis/webclient-mapboxgl-plugin
npm install @mapgis/webclient-vue3-ui
npm install @mapgis/webclient-vue3-common
npm install @mapgis/webclient-vue3-mapboxgl

# yarn
yarn add ant-design-vue@^4.2.6
yarn add @mapgis/mapbox-gl
yarn add @mapgis/webclient-common
yarn add @mapgis/webclient-mapboxgl-plugin
yarn add @mapgis/webclient-vue3-ui
yarn add @mapgis/webclient-vue3-common
yarn add @mapgis/webclient-vue3-mapboxgl

# pnpm
pnpm add ant-design-vue@^4.2.6
pnpm add @mapgis/mapbox-gl
pnpm add @mapgis/webclient-common
pnpm add @mapgis/webclient-mapboxgl-plugin
pnpm add @mapgis/webclient-vue3-ui
pnpm add @mapgis/webclient-vue3-common
pnpm add @mapgis/webclient-vue3-mapboxgl
```

## 用法

在 main.ts 中写入以下内容：

### 完整引入

```js
import { createApp } from 'vue'
import App from './App.vue'

import '@mapgis/webclient-common'
import '@mapgis/webclient-mapboxgl-plugin'

import Antd from 'ant-design-vue'
import MapGISUIComponents from '@mapgis/webclient-vue3-ui'
import MapGISCommonComponents from '@mapgis/webclient-vue3-common'
import MapGISMapboxGLComponents from '@mapgis/webclient-vue3-mapboxgl'

import 'ant-design-vue/dist/reset.css'
import '@mapgis/webclient-vue3-ui/dist/index.css'
import '@mapgis/webclient-vue3-common/dist/index.css'
import '@mapgis/webclient-vue3-mapboxgl/dist/index.css'

createApp(App).use(Antd).use(MapGISUIComponents).use(MapGISCommonComponents).use(MapGISMapboxGLComponents).mount('#app')
```

### 按需导入

默认支持基于 ES modules 的 tree shaking，直接引入 import { WebMap } from '@mapgis/webclient-vue3-mapboxgl'; 就会有按需加载的效果

```vue
<template>
  <a-config-provider>
    <mapgis-theme-provider>
      <WebMap></WebMap>
    </mapgis-theme-provider>
  </a-config-provider>
</template>

<script>
import { WebMap } from '@mapgis/webclient-vue3-mapboxgl'
import '@mapgis/webclient-vue3-mapboxgl/dist/theme/web-map.css'
</script>
```

## 导入资源

通过webpack、vite等工具实现资源的拷贝，以vite为例：

> 需要先安装vite-plugin-static-copy

配置`vite.config.js`

```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineConfig({
  define: {
    MAPGIS_BASE_URL: JSON.stringify('./')
  },
  plugins: [
    vue(),
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@mapgis/webclient-common/dist/webclient-common-resource/*',
          dest: 'webclient-common-resource'
        }
      ]
    })
  ]
})
```
npm package: @mapgis/webclient-vue3-ui
Description: MapGIS WebClient Vue3 UI by Vue3 + TS
Latest version: 17.8.0

# MapGIS WebClient Vue3 UI

## 特性

- 开箱即用的高质量 Vue 3组件
- 丰富的文档和示例

## 安装

```
# npm
npm install ant-design-vue@^4.2.6
npm install @mapgis/webclient-vue3-ui

# yarn
yarn add ant-design-vue@^4.2.6
yarn add @mapgis/webclient-vue3-ui

# pnpm
pnpm add ant-design-vue@^4.2.6
pnpm add @mapgis/webclient-vue3-ui
```

## 用法

在 main.ts 中写入以下内容：

### 完整引入

```js
import { createApp } from 'vue'
import App from './App.vue'

import Antd from 'ant-design-vue'
import MapGISUIComponents from '@mapgis/webclient-vue3-ui'

import 'ant-design-vue/dist/reset.css'
import '@mapgis/webclient-vue3-ui/dist/index.css'

createApp(App).use(Antd).use(MapGISUIComponents).mount('#app')
```

### 按需导入

默认支持基于 ES modules 的 tree shaking，直接引入 import { Iconfont } from '@mapgis/webclient-vue3-ui'; 就会有按需加载的效果

```vue
<template>
  <a-config-provider>
    <ThemeProvider>
      <Iconfont type="mapgis-home" />
    </ThemeProvider>
  </a-config-provider>
</template>

<script setup lang="ts">
import { ThemeProvider, Iconfont } from '@mapgis/webclient-vue3-ui'
import '@mapgis/webclient-vue3-ui/dist/theme/iconfont.css'
</script>
```