前言

背景:最近在做的一个项目需要接触到地图，所以了解到了OpenLayer,接下来让我们从头开始根据官方文档来运行一个简单的地图啦（讲真，全英文档看的有点犯困）

以下操作是基于你的电脑已经安装好vue搭建环境的，如果还没有，推荐看下面这篇文章
https://ricesgui.github.io/2018/09/11/%E4%BB%8E%E9%9B%B6%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AAvue%E9%A1%B9%E7%9B%AE/
官方文档的操作是建立在一个空项目的基础上，所以我们先来搭建一个空项目先啦！官方文档：http://openlayers.org/en/latest/doc/tutorials/bundle.html

首先

vue init webpack testol

这里特别提一下自己踩到的坑，就是自己给项目名称命名含有大写，这回导致后面进入文件夹时报错找不到文件路径，所以

推荐用小写命名项目

npm install ol
npm install --save-dev parcel-bundler

修改端口的话是为了避免与其他项目的端口冲突

在main.js里引入OpenLayer,并调用

在index.html里显示调用的结果

npm run dev

结果如下：

放大后的地图