从0构建一个具备响应式的导航栏

2024-01-13 12:10:06

绪论

随着移动端设备的普及，网页的响应式设计变得越来越重要。本文将介绍如何使用Element UI和Vue.js来实现一个具备响应式的导航栏，以满足不同设备的访问需求。

步骤

安装Element UI和Vue.js

npm install element-ui
npm install vue

创建Vue项目

vue create my-project

在Vue项目中添加Element UI

vue add element-ui

创建导航栏组件

在src目录下创建Navbar.vue文件，并添加以下代码：

<template>
  <div class="navbar">
    <div class="navbar-logo">
      <a href="/">My Logo</a>
    </div>
    <div class="navbar-menu">
      <el-menu :default-active="activeIndex" class="el-menu-horizontal">
        <el-menu-item index="1">Home</el-menu-item>
        <el-menu-item index="2">About</el-menu-item>
        <el-menu-item index="3">Contact</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  }
}
</script>

<style>
.navbar {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.navbar-logo {
  float: left;
}

.navbar-menu {
  float: right;
}

.el-menu-horizontal {
  border-bottom: none;
}

.el-menu-item {
  padding: 10px 15px;
}
</style>

在App.vue中注册导航栏组件

在src/App.vue文件中，添加以下代码：

<template>
  <div id="app">
    <Navbar />
    <router-view />
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue'

export default {
  components: {
    Navbar
  }
}
</script>