在vue2中结合antUI实现顶部导航及侧边栏的菜单效果代码

在 Vue2 中结合 Ant Design UI (简称 AntD) 实现顶部导航栏（Header）和侧边栏（Sidebar）的常见做法是利用其提供的组件库来构建界面布局。以下是基本步骤和代码示例：

首先，你需要安装依赖项。在 `package.json` 文件中添加 `@ant-design/icons` 和 `vant` 或者 `element-plus`（如果你选择的是 Element UI 或者 Plus UI）：

npm install @ant-design/icons antd // 如果用AntD
// 或者
npm install element-ui // 如果用Element UI
npm install vant // 如果用Vant

然后，在项目中引入所需的组件：

import { Layout } from 'antd';
import { Menu, Icon } from 'antd';
import { VantIcon } from 'vant';

Vue.use(Layout);
Vue.component('van-icon', VantIcon); // 或者如果用Element UI：Vue.component('el-icon', ElIcon);

接下来，创建顶部导航（Header）:

<template>
  <header>
    <Layout.Header>
      <div class="logo">Logo</div>
      <Menu mode="horizontal" theme="dark">
        <Menu.Item key="1">
          <a href="#">Home</a>
        </Menu.Item>
        <Menu.Item key="2">
          <a href="#">About</a>
        </Menu.Item>
        <!-- 更多选项 -->
      </Menu>
    </Layout.Header>
  </header>
</template>

<style scoped>
.header {
  background-color: #fff;
  padding: 16px;
}
.logo {
  font-size: 18px;
}
</style>

创建侧边栏（Sidebar）:

<template>
  <Layout.Sider>
    <ul>
      <li>
        <a href="#">
          <Icon type="home" /> Home
        </a>
      </li>
      <li>
        <a href="#">
          <Icon type="setting" /> Setting
        </a>
      </li>
      <!-- 更多菜单项 -->
    </ul>
  </Layout.Sider>
</template>

<style scoped>
.sider {
  width: 200px;
}
</style>

最后，在 App 组件或其他需要的地方使用这两个部分：

<template>
  <Layout>
    <Layout.Sider : siderWidth="200">
      <!-- 侧边栏代码 -->
    </Layout.Sider>
    <Layout.Content>
      <!-- 页面内容区域 -->
    </Layout.Content>
  </Layout>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {
    // 其他已引入的组件
  }
};
</script>