Question

我有一个包含许多组件的Vue应用程序。目前我将index-Awesome包含在index.html文件的头部中，但只有一个页面或组件实际需要它。是否可以将其移动到组件本身，以便只在需要时才加载？

移动这个

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

到这个

<template></template>
<link rel="stylesheet" href="../../static/css/font-awesome-4.7.0/css/font-awesome-min.css"></link>
<script>
    export default {
        name: 'SingleComponent',
        data: function() {
            return{}
        }
    }
</script>
<style scoped>
</style>

我尝试下载Font-Awesome并在组件中添加链接标签，如上所述^^^^我没有收到任何错误，但图标仍无效。

Answer 1

在App.js的样式标记中导入css文件

DataMember

Answer 2

如果您只有一个页面或组件，那么在<template />和<html />代码中创建所需内容是否更容易？

Answer 3

我没有尝试直接在组件中包含Font-Awesome，而是发现它已经有一个名为vue-awesome的Vue包装器，所以我使用了它。

仅在一个Vue组件中包含外部CSS库

3 个答案: