Vuejs 2.0单个文件组件，webpack和传单映射

Question

我正在使用vuejs几个星期。

现在，我正在尝试实现传单地图。所以我去了传单官方网站，他们说我需要准备我的页面：

• 在文档的 head 部分中包含Leaflet CSS文件
• 包含Leaflet JavaScript文件
• 在您希望地图位于
的位置放置一个具有特定ID的div元素
• 确保地图容器具有已定义的高度，例如通过在CSS中设置它。

问题是我没有＆lt; head ＆gt;我的文档中的部分，因为我使用像这里的单个文件组件：

<template>
    <div id="mymap">
    </div>
</template>

<style scoped type="text/css">
    #mymap {height: 180px;}
</style>

<script></script>

那么我应该在哪里包含这个CSS文件？

Answer 1

在样式部分使用@import导入CSS。

<style type="text/css">
    @import "path/to/leaflet/dist/leaflet.css"

    #mymap {height: 180px;}
</style>

对于脚本，请导入脚本。

<script>
     import Leaflet from 'leaflet'

     ...your code
</script>

FWIW，你的流程中有一个HTML，你可以在那里添加它。通常它是index.html或类似的东西。

其次，我不会将CSS导入到您尝试创建的传单组件中;我会将它导入您的根组件，以防止可能多次导入相同的CSS。我在评论中链接的库采用了这种方法in their example application。

Answer 2

如果您是Vue的新手，我想您将使用一些带有vue-cli的模板来启动。它使结构像this。

我的建议是你使用Extract text Plugin 并在src styles.css下创建一个全局样式文件，以便能够导入这种样式。最后在main.js

中添加此行

import './styles.css'