效果图

1.首先创建一个项目
https://cli.vuejs.org/zh/guide/creating-a-project.html
2.引入antd
https://www.antdv.com/docs/vue/introduce-cn/
3.配置路由
main.js

import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import App from './App';
import router from './router'
import Router from 'vue-router' 
import axios from 'axios'



Vue.use(Router);
Vue.use(Antd);
Vue.prototype.$axios = axios
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
}).$mount("#app");

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/App' // 主页
import login from '@/views/login'
import historyQuery from '@/views/historyQuery'
import paramConfig from '@/views/paramConfig'
import queryMonitor from '@/views/queryMonitor'
import equipFault from '@/views/equipFault'
import equipReprint from '@/views/equipReprint'
import equipStatus from '@/views/equipStatus'
import user from '@/views/user'


export default new Router({
  routes :[
    {
      path: "/",
      name: "Home",
      components: Home
    },
    {
      path: "/historyQuery",
      name: "historyQuery",
      component: historyQuery
    },
    {
      path: "/paramConfig",
      name: "paramConfig",
      component: paramConfig
    },
    {
      path: "/queryMonitor",
      name: "queryMonitor",
      component: queryMonitor
    },
    {
      path: "/equipFault",
      name: "equipFault",
      component: equipFault
    },
    {
      path: "/equipReprint",
      name: "equipReprint",
      component: equipReprint
    },
    {
      path: "/equipStatus",
      name: "equipStatus",
      component: equipStatus
    },
    {
      path: "/login",
      name: "login",
      component: login
    },
    {
      path: "/user",
      name: "user",
      component: user
    }
  ]
  
})

Vue.use(Router)

App.vue

<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider :trigger="null" collapsible v-model="collapsed">
      <div class="logo" > 
        <img src="./assets/rigangLogo.png" style="width:100%"/>
      </div>
      <a-menu 
      theme="dark" 
      mode="inline" 
      :SelectedKeys="[$route.path]"
      >
        <a-menu-item :key="'/equipStatus'">
          <router-link to="/equipStatus">
            <a-icon type="api" />
            <span>一体机状态查询</span>
          </router-link>
        </a-menu-item>
        <a-menu-item :key="'/equipReprint'">
          <router-link to="/equipReprint">
            <a-icon type="upload" />
            <span>二次打印申请</span>
          </router-link>
        </a-menu-item>
        <a-menu-item :key="'/equipFault'">
          <router-link to="/equipFault">
            <a-icon type="tool" />
            <span>故障报修</span>
          </router-link>
        </a-menu-item>
        <a-menu-item :key="'/historyQuery'">
          <router-link to="/historyQuery">
            <a-icon type="profile" />
            <span>历史查询</span>
          </router-link>
        </a-menu-item>
        <a-menu-item :key="'/queryMonitor'">
          <router-link to="/queryMonitor">
            <a-icon type="picture" />
            <span>监控查询</span>
          </router-link>
        </a-menu-item>
        <a-menu-item :key="'/paramConfig'">
          <router-link to="/paramConfig">
            <a-icon type="setting" />
            <span>参数配置</span>
          </router-link>
        </a-menu-item>
        <a-menu-item :key="'/user'">
          <router-link to="/user">
            <a-icon type="user" />
            <span>角色管理</span>
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="()=> collapsed = !collapsed"
        />
        <a-button type="danger" style="position:absolute;top:5px;right:5px">退出登录</a-button>
      </a-layout-header>
      <a-layout-content
        :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
      >
        <!-- 对应的组件内容渲染到router-view中 -->
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>


<script>
export default {
  data() {
    return {
      collapsed: false
    };
  }
};
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: white;
  margin: 16px;
}
.ant-layout.ant-layout-has-sider {
  height: 100%;
}
</style>