elementplus好看的导航栏

### 使用 Element Plus 创建美观的导航栏 为了创建一个美观且功能丰富的导航栏，可以利用 `element-plus` 提供的各种组件来构建。下面是一个简单的例子，展示如何使用 `el-menu` 和其他相关组件来设计一个响应式的顶部导航栏。 #### 安装依赖 首先确保已经安装了 `element-plus` 库[^2]： ```bash npm install element-plus --save ``` 接着在项目的入口文件（通常是 `main.js` 或者类似的配置文件）引入并注册该库: ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 导入整个ElementPlus或者按需加载 import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` #### 编写模板代码 接下来定义 Vue 组件中的 HTML 部分，这里采用的是单文件组件 `.vue` 的形式： ```html <template> <div class="header"> <!-- logo --> <img src="@/assets/logo.png" alt="Logo"/> <!-- 菜单项 --> <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">首页</el-menu-item> <el-submenu index="2"> <template slot="title">服务</template> <el-menu-item index="2-1">选项一</el-menu-item> <el-menu-item index="2-2">选项二</el-menu-item> </el-submenu> <el-menu-item index="3"><a href="#" target="_blank">联系我们</a></el-menu-item> </el-menu> <!-- 用户操作区 --> <div class="operation-area"> <el-button type="text" icon="el-icon-search"></el-button> <el-dropdown trigger="click"> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>黄金糕</el-dropdown-item> <el-dropdown-item>狮子头</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </div> </template> ``` #### 添加样式调整布局 为了让页面看起来更整洁友好，还需要适当加入一些 CSS 来美化界面： ```css <style scoped> .header { display: flex; align-items: center; justify-content: space-between; } .operation-area .el-button+.el-button { margin-left: 10px; } </style> ``` 以上就是通过 `element-plus` 实现的一个基础版顶部导航栏实例[^1]。可以根据实际需求进一步自定义样式和交互逻辑。