vue create vue-ol

cd vue-ol
npm run serve

cnpm i ol --s

import 'ol/ol.css';

<template>
? ? <div class="map" id="map"></div>
</template>

<script>
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import { fromLonLat } from 'ol/proj';
export default {
? ? name: "MapContainer",
?? ?methods:{
?? ??? ?createMap(){
?? ??? ??? ?let map = new Map({
?? ??? ??? ??? ?layers: [new TileLayer({
?? ??? ??? ??? ??? ?source: new OSM(),
?? ??? ??? ??? ?}) ],
?? ??? ??? ??? ?target: 'map',
?? ??? ??? ??? ?view: new View({
?? ??? ??? ??? ??? ?maxZoom: 18,
?? ??? ??? ??? ??? ?center: fromLonLat([108.92,34.28]),
?? ??? ??? ??? ??? ?zoom: 10,
?? ??? ??? ??? ?}),
?? ??? ??? ?});
?? ??? ?}
?? ?},
?? ?mounted(){
?? ??? ?this.createMap()
?? ?}
};
</script>

<style scoped>
.map {
? ? height: 100%;
? ? margin: 0;
? ? padding: 0;
? ? overflow: hidden;
? ? position: relative;
?? ?background: #1f3064;
}
</style>

<template>
? <div class="home">
? ? <MapContainer msg="Welcome to Your Vue.js App"/>
? </div>
</template>

<script>
import MapContainer from '@/components/MapContainer.vue'
export default {
? name: 'Home',
? components: {
? ? MapContainer
? }
}
</script>
<style>
.home{
?? ?height: 100%;
?? ?position: relative;
}
</style>