首先創建vue-cli的腳手架
1.npm i -globa vue-cli
2.vue init webpack
3.選擇創建自己的vue項目
4.npm install --save esri-loader(very important)
5.在hellowword.vue文件中引入具體代碼如下
<template>
<div class="fx"></div>
</template>
<script>
import { loadModules } from 'esri-loader';
export default {
name: 'web-map',
mounted() {
loadModules(['esri/Map', 'esri/views/MapView'], { css: true })
.then(([ArcGISMap, MapView]) => {
const map = new ArcGISMap({
basemap: 'topo-vector'
});
this.view = new MapView({
container: this.$el,
map: map,
center: [-118, 34],
zoom: 8
});
});
},
beforeDestroy() {
if (this.view) {
this.view.container = null;
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fx {
padding: 0;
margin: 0;
width: 1920px;
height: 1080px;
}
</style>