傳單不會使用使用browserify的Vue工作

我是使用browserify和VueJS的新人。我有一個項目，我想使用地圖服務宣傳單。因此，當我在下面的代碼中顯示時，我試圖要求它，我已經使用npm將其拉下。如果我查看已編譯的JS文件，我可以在那裏找到Leaflet。所以，似乎工作..傳單不會使用使用browserify的Vue工作

我會告訴我的生成的地圖的圖像，當我嘗試在瀏覽器中初始化： 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}) 
     }) 
    } 
}}

現在我試着要求：ing我的組件腳本文件中的傳單包。

沿線的某處傳單中斷..查看地圖時控制檯中沒有錯誤，但正如您所看到的，它看起來不太好。

我會很高興能得到所有的幫助！

編輯：我只是嘗試在我的項目中使用chart.js，需要以與傳單相同的方式，像魅力一樣工作..不明白爲什麼傳單不會工作。

/Simon

來源

2016-06-13 Simon

您缺少單張樣式表。使用鏈接標籤添加它（正確版本）：

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

來源

2016-06-14 09:16:59 Jieter

當然，我應該想到這一點。謝謝！ – Simon

傳單不會使用使用browserify的Vue工作

回答

相關問題