Листовка не работает с Vue, используя браузеру

Question

Я новичок в браузере и VueJS. У меня есть проект, в котором я бы хотел использовать картографическую услугу «Листовка». Так как я показываю в коде ниже, я пытаюсь его потребовать, я потянул его, используя npm. Если я посмотрю в скомпилированном JS-файле, я могу найти Лифлет. Так что, кажется, работает ..

Я покажу образ моей карты в результате, когда я пытаюсь инициализировать его в браузере: Broken Leaflet map

Так как вы можете видеть плитки ведут себя очень странно, и ничто не работает так, как должно. Перетаскивание карты действительно странно.

Это код компонентов JS.

var L = require('leaflet'); 

module.exports = { 

data: function() { 
    return { 
     map: false, 
     samples: [], 
     messages: [], 
     customer_id: '', 
     year: '' 
    } 
}, 

methods: { 

fetch: function (id, year, successHandler) { 
    var that = this 
    that.$set('customer_id', id) 
    that.$set('year', year) 
    successHandler(id); 
} 

}, 

ready: function() { 
    var map = L.map('map').setView([41.3921, 2.1705], 13); 

    L.Icon.Default.imagePath = 'images/'; 

    var osmTiles = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; 
    var attribution = '© OpenStreetMap contributors'; 

    L.tileLayer(osmTiles, { 
     maxZoom: 18, 
     attribution: attribution 
    }).addTo(map); 

}, 

route: { 
    data: function (transition) { 
     this.fetch(this.$route.params.customer_id, this.$route.params.year, function (data) { 
      transition.next({customer_id: data}) 
     }) 
    } 
}} 

В настоящее время я попробовал выполнить: пакет листовка в файле сценариев компонентов.

Где-то вдоль линии Листолет ломается. Я не вижу ошибок в консоли при просмотре карты, но, как вы видите, это выглядит не очень хорошо.

Я был бы очень рад за всю помощь, которую я могу получить!

Редактировать: Я просто попытался использовать chart.js в моем проекте, требуемом так же,

/Simon

Answer 1

Вы упускаете лист листовки стиля. Добавьте его (для правильной версии) с помощью тега ссылки:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />