1、程序在进入main.js的过程中,可以看到首先渲染Index.vue组件 import Vue from 'vue/dist/vue.js' import VueRouter from 'vue-router'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; //import Map,{createLayer} from 'vue-openlayer-map'; import Map,{createLayer,filterKey,clearSpatial,addAlarmFlash,removeOverLayeById,clearMap,radarChart} from 'vue-openlayer-lx' import router from './router.js'; import Index from './Index.vue'; Vue.use(VueRouter); Vue.use(ElementUI); Vue.use(Map); Vue.prototype.createLayer = createLayer; Vue.prototype.clearSpatial = clearSpatial; Vue.prototype.clearMap = clearMap; Vue.prototype.filterKey = filterKey; Vue.prototype.addAlarmFlash = addAlarmFlash; Vue.prototype.radarChart = radarChart; Vue.prototype.removeOverLayeById = removeOverLayeById; Vue.config.productionTip = false; new Vue({ el: '#app', router, render: h => h(Index), }); 2、进入index.vue组件后,HeaderTemplate为顶部,router-view为路由

<template>
    <el-container id="app">
        <el-header class="header">
            <header-template :fun="selectHeader"/>
        </el-header>
        <router-view></router-view>
    </el-container>
</template>
import HeaderTemplate from './components/HeaderTemplate.vue'
export default {
    name: 'app',
    data() {
        return {}
    },
    components: {
        HeaderTemplate
    },
    methods: {
        /**
         * 菜单选择回调方法
         * @param key
         * @param path
         */
        selectHeader(code, item) {
            if (item.target == "_blank") {
                //页面触发类型为弹出方式
                window.open(item.path);
            } else {
                //页面触发类型为路由
                this.$router.push({
                    name: item.path,
                    params: {
                        time: (new Date()).getTime(),
                        headerCode: code
                    }
                });
            }
        }
    }
}

3、程序首先进入的组件根据router.js路由进入websiteTemplate {path: '/', redirect: '/websiteTemplate'} websiteTemplate中包含两部分：代码编辑区域@/components/AceTemplate.vue;地图展示区域@/components/MapTemplate.vue（其中MapTemplate中再包含sl-map) 4、左侧树Menu.vue（包含MenuTemplate.vue）,在进行路由的时候包含Menu（左侧树节点）以及含有它的子组件webSiteTemplate（除了左侧树节点外右侧的所有区域） {path: '/', redirect: '/websiteTemplate'}, { path: '/menu/:time', name: 'Menu', component: Menu, props: true, children: [ { path: 'websiteTemplate', name: 'WebsiteTemplate', component: WebsiteTemplate },

            ]
        },

5、Website.vue为地图操作界面的vue文件，和API的关系不大