3.2. 网站 Logo

本教程最新版为 2.6,当前版本已放弃维护,请阅读最新版本!

简介

本小节中,我们将一起新建网站的头部,并在头部显示一个 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'...

本文章首发在 LearnKu.com 网站上。

为了保证课程的高品质,我们需要对课程进行收费。付费后 才能观看剩余内容。 购买

上一篇 下一篇
讨论数量: 10

bing_
[备份] main.scss 文件,原站样式
7 个点赞 | 3 个回复 | 分享
Innocence6
图片 404???
1 个点赞 | 5 个回复 | 分享
LW_aravel
关于图片和样式问题,大家可以参考一下
1 个点赞 | 1 个回复 | 分享 | 课程版本 2.6
Adeljan
图片和标题访问不到
0 个点赞 | 3 个回复 | 分享
求解关于样式的一点小问题?
0 个点赞 | 3 个回复 | 问答
chencvue
图片访问不到
0 个点赞 | 1 个回复 | 分享
wongvio
vue 的本地路径要怎么写啊
0 个点赞 | 1 个回复 | 问答