vue is 顶部导航栏添加logo

要在Vue的顶部导航栏中添加Logo，可以按照以下步骤操作：

1. 在项目文件夹中创建一个名为“assets”的文件夹，用于存放Logo图片文件。

2. 在Vue组件中的“template”标签中添加一个“img”标签，以显示Logo图片。例如：

   <template>
     <div class="navbar">
       <img src="@/assets/logo.png" alt="Logo">
       <ul class="nav-links">
         // 导航链接
       </ul>
     </div>
   </template>

在这个例子中，“@/”是一个别名，指向项目的根目录。因此，“@/assets/logo.png”指的是位于“assets”文件夹中的“logo.png”文件。

3. 使用CSS样式表来对Logo图片进行样式设置，以便它适应顶部导航栏的大小和位置。例如：

   <style>
     .navbar {
       display: flex;
       justify-content: space-between;
       align-items: center;
       height: 60px;
       padding: 0 20px;
       background-color: #fff;
       box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
     }

     .navbar img {
       height: 40px;
     }

     .nav-links {
       display: flex;
       justify-content: space-between;
       align-items: center;
       list-style: none;
       margin: 0;
       padding: 0;
     }

     .nav-links li {
       margin-right: 20px;
     }

     // 其他样式设置
   </style>

在这个例子中，“.navbar img”选择器设置Logo图片的高度为40像素。

这样，你就可以在Vue的顶部导航栏中添加Logo了！