参考文章：https://www.jianshu.com/p/fd399ad4b7d8

1、安装vue-cli

npm install -g @vue/cli

2、vue初始化项目，一路Enter，默认

vue init webpack vue-openlayers

3、安装ol包

cnpm i -S ol(指定版本安装：cnpm  i -S ol@4.6.5)

4、创建组件，更改路由

src\components\olmap.vue

<template>
    <div id="map" ref="rootmap">

    </div>
</template>

<script>
import "ol/ol.css";
//最新版本引入
import { Map, View } from "ol";
//v4.5.6引入
//import Map from 'ol/map';
//import View from 'ol/view';
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    var mapcontainer = this.$refs.rootmap;
    this.map = new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        projection: "EPSG:4326",    //使用这个坐标系
        center: [114.064839,22.548857],  //深圳
        zoom: 12
      })
    });
  }
};
</script>

<style>
#map{height:100%;}
/*隐藏ol的一些自带元素*/
.ol-attribution,.ol-zoom { display: none;}

</style>

src\App.vue

<template>
  <div id="app">
    <olmap />
  </div>
</template>

<script>
import olmap from './components/olmap.vue'

export default {
  name: 'app',
  components: {
    olmap
  }
}
</script>

<style>
*{padding:0; margin:0;}
html,body{
  height: 100%;
}
#app {
  height: 100%;
}
</style>

src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import olmap from '../components/olmap'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'olmap',
      component: olmap
    }
  ]
})