快速上手

本节将介绍如何在项目中使用 larkexplorer-ui

WARNING

本组件库是基于 VUE3 环境进行构建，同时需要引入 LarkExplorer-SDK ↓ 包后才可以正常工作

用法

完整引入

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

// main.ts
import { createApp } from 'vue'
import LarkExplorerUI from 'larkexplorer-ui'
import '../node_modules/larkexplorer-ui/dist/style.css'
import App from './App.vue'

createApp(App).use(LarkExplorerUI).mount('#app')

按需引入

// main.ts
import { createApp } from 'vue'
// 样式引入
import '../node_modules/larkexplorer-ui/dist/style.css'
import App from './App.vue'

createApp(App).mount('#app')

<!-- app.vue -->
<template>
  <div class="form-cus">
    <ShotGridMap :map="map" :options="options" @close-this="close"> </ShotGridMap>
  </div>
</template>
<script setup lang="ts">
  import { ShotGridMap } from 'larkexplorer-ui'
  const options = {
    nameShow: true,
    nameValue: '自定义图名',
    companyShow: true,
    companyValue: '自定义制图单位名称',
    authorShow: true,
    authorValue: '自定义作者',
    timeShow: true,
    timeValue: Date.now(),
    coords: true,
    grid: true,
    scaleBarShow: true,
    scaleBarType: 'box',
    northShow: true,
    northType: 'north_0',
    dpi: 96,
    outType: '.png',
    logo: new URL('./assets/images/logo.png', import.meta.url).href,
  };
</script>

开始使用

至此，一个基于 Vue3 、LarkExplorer-SDK 和 LarkExplorer-UI 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档 现在你可以启动项目了。