Привет!Я пытался сделать приложение на Vue.js и но компонент header не отображается,хоть ошибок никаких не выдает.
HelloWorld.vue
<template>
<header></header>
</template>
<script>
import header from './Header';
export default {
components:{
'header': header
},
name: 'HelloWorld',
data () {
return {
}
}
}
</script>
<style lang="sass" scoped>
</style>
Header.vue
<template>
<div class=headerMain>
<div class=header>
<div class=header-leftside>
<img src="/assets/img/group-2.png" alt="brand"><p>bran</p>
<button class=header-button-browse><span>Browse</span><i class="fas fa-caret-down"></i></button><input type="text" placeholder="Search for Item...">
<button class=header-button-search><i class="fas fa-search"></i></button>
</div>
<div class=header-right-side>
<a href="#"><i class="fas fa-shopping-cart"></i></a>
<button class=header-account-button><span>My Account</span><i class="fas fa-caret-down"></i></button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'header',
data () {
return {
}
}
}
</script>
<style lang="sass" scoped>
.header
display: flex
flex-wrap: wrap
justify-content: space-around
.header-right-side
display: flex
justify-content: flex-end
align-items: flex-end
.header-leftside
display: flex
justify-content: flex-start
align-items: flex-end
img
width: 59px
height: 51px
margin-right: 7px
p
color: #222222
font-family: 'Lato', sans-serif
font-weight: 300
font-size: 24px
text-transform: uppercase
margin: 0
&:after
content: "D"
color: #f16d7f
font-size: 24px
font-family: 'Lato', sans-serif
font-weight: 900
input
border: 1px solid #e6e6e6
width: 250px
padding: 9.5px
margin: 0
font-family: 'Lato', sans-serif
font-weight: 300
border-left: none
border-right: none
&:focus
outline: none
.header-button-browse
font-family: 'Lato', sans-serif
font-weight: 300
background-color: #f5f5f5
outline: none
border: 1px solid #e6e6e6
font-size: 14px
padding: 9px
color: #222222
margin-left: 19px
span
margin-right: 7px
.header-button-search
font-family: 'Lato', sans-serif
font-weight: 300
background-color: #f5f5f5
outline: none
border: 1px solid #e6e6e6
font-size: 14px
padding: 9px
color: #222222
margin: 0px
.header-right-side
a
text-decoration: none
color: #222222
font-size: 25px
margin-left: 15px
&:hover
text-decoration: none
color: #222222
.header-account-button
background-color: #f16d7f
font-family: 'Lato', sans-serif
font-weight: 400
font-size: 15px
color: #ffffff
padding: 9px
padding-left: 13px
padding-right: 13px
outline: none
border: none
margin-left: 8px
span
margin-right: 7px
</style>
Как мне исправить данную проблему?