Только начал изучать vue.js и решил при помощи него сделать хедер на сайте так, чтобы он размещался в одном файле Header.vue, а на каждую страницу просто добавить скрипт и всё. Header.vue выглядит так:
<link rel="stylesheet" type="text/css" href="/css/header.css">
<link rel="stylesheet" type="text/css" href="/css/change_button_color.css">
<template>
<header>
<a href="/" ><input type="button" class="buttons " value="Main page"/></a>
<a href="/login" ><input type="button" class="buttons " value="Login"/></a>
<a href="/registration" ><input type="button" class="buttons " value="Registration"/></a>
<a href="/admin/admin-page" ><input type="button" class="buttons " value="Admin Page"/></a>
<a href="/logout-page" ><input type="button" class="buttons " value="User info"/></a>
</header>
</template>
<script>
export default{
}
</script>
<style>
</style>
Вот так я добавляю хедер на обычную страницу :
...
<script src="js/Header.vue"></script>
<script>
import Header from 'static/js/Header'
export default {
components:{
'my-header':Header
}
}
</script>
</head>
<body>
<my-header></my-header>
...
Я вроде бы всё делаю по туториалу, но на веб-странице ничего не отображается. Скорее всего запутался в мелочах.
p.s. ещё два маленьких вопроса: нужно ли мне добавлять <script src="js/Header.vue"></script>
или следующего импорта достаточно? и второй: нужно ли добавлять ссылки на css внутри Header.vue или же мне нужно стили прописать напрямую в в Header.vue, а css файлы со стилями не нужны? Если что, в фронте и тем более vue я новичок, поэтому не судите строго=)