3.2. 网站 Logo
简介
本小节中,我们将一起新建网站的头部,并在头部显示一个 Logo。
新建头部组件
把所有内容都写在一个文件,不利于项目的开发维护,因为头部组件是共用的,所以我们在 src/components
新建 layouts
文件夹,然后新建 TheHeader.vue
文件,复制贴入以下代码:
src/components/layouts/TheHeader.vue
<template>
<div class="navbar navbar-default topnav">
<div class="container">
<div class="navbar-header">
<a href="/" class="navbar-brand">
<span class="title">{{ logo.title }}</span>
<img :src="logo.src" :alt="logo.title">
</a>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'TheHeader',
data() {
return {
logo: {
src: `${this.uploadsUrl}sites/ByvFbNlQYVwhvTyBgLdqitchoacDNznN.jpg`,
title: 'VuejsCaff'...