vue 快速引入高德地图组件

本文只是为了校验 用最简单直接的方式（不额外修改别的文件、不引入额外插件），去实现高德组件的展示，能成功展示就成功了一半！！至于后续业务方面有别的需求，那就去查文档！！

原文出处：>文章链接<

// index.html 引入高德地图js和ui
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=申请的key值"></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>

// vue文件
<template>
  <div>
    <div>地图</div>
    <div id="container" style="width:95vw; height:300px"></div>
  </div>
</template>
<script>
var AMap, map
export default {
  data () {
    return {
    }
  },
  mounted: function () {
    AMap = window.AMap;
    // AMapUI = window.AMapUI;
    this.init()
  },
  methods: {
    init: function () {
      map = new AMap.Map('container', {
        center: [116.397428, 39.90923],
        resizeEnable: true,
        zoom: 10
      })
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
        map.addControl(new AMap.ToolBar())
        map.addControl(new AMap.Scale())
      })
    }
  }
}
</script>

最后效果：

===============================================

vue-cli关闭eslint  no-unused-var错误

// package.json ====== eslintConfig
"rules": {
      "no-": "off",
      "no-debugger":"off",
      "no-console": "off",
      "no-empty":"off",
      "no-unused-vars":"off"
}