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 中写入以下内容：

完整引入

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'; 就会有按需加载的效果

<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>