快速上手

技术准备

MapGIS Web App Framework 使用了最新的前端技术，比如 typescript (opens new window)、vue (opens new window)、vue-cli (opens new window) 、axios (opens new window) 和 ant-design-vue (opens new window)，使用之前，可提前了解和学习这些相关知识。

开发环境

本地需安装 node.js (opens new window)，并且 node 版本为 14.x.x。

安装

yarn add @mapgis/web-app-framework
# 或者
npm install --save @mapgis/web-app-framework

在 main.js 中全局引入

import Vue from 'vue'
import WebAppFramework from '@mapgis/web-app-framework'
import App from './App.vue'

Vue.use(WebAppFramework)

new Vue({
  el: '#app',
  render: h => h(App)
})

加载应用

<template>
  <mp-app-loader :application="application" />
</template>

<script>
import { AppManager } from '@mapgis/web-app-framework'

export default {
  props: {
    baseAPI: String,
    appConfigPath: String,
    appAssetsPath: String
  },
  data() {
    return {
      application: {}
    }
  },
  async created() {
    const appManager = AppManager.getInstance()

    // 加载应用
    await appManager.loadConfig(
      this.baseAPI,
      this.appConfigPath,
      this.appAssetsPath
    )

    // 获取应用（解析后的应用对象）
    this.application = appManager.getApplication()
  }
}
</script>