接着上一篇文章的Layout布局，继续在那个Demo基础上添加代码：

1、修改App.vue的LayoutSider：

    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="inline"
        :default-selected-keys="['1']"
        :default-open-keys="['sub1', 'sub2']"
      >
        <a-menu-item key="1">
          <a-icon type="mail" />
          一级菜单1
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="calendar" />
          一级菜单2
        </a-menu-item>
        <a-sub-menu key="sub1">
          <span slot="title">
            <a-icon type="appstore" />
            <span>一级菜单3</span>
          </span>
          <a-menu-item key="3">二级菜单31</a-menu-item>
          <a-menu-item key="4">二级菜单32</a-menu-item>
          <a-sub-menu key="sub1-2" title="Submenu">
            <a-menu-item key="5">三级菜单321</a-menu-item>
            <a-menu-item key="6">三级菜单322</a-menu-item>
          </a-sub-menu>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <span slot="title">
            <a-icon type="setting" />
            <span>一级菜单4</span>
          </span>
          <a-menu-item key="7">二级菜单41</a-menu-item>
          <a-menu-item key="8">二级菜单42</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>

2、注册Menu组件，main.js中添加代码：

引入组件：

import { Menu } from 'ant-design-vue'

注册组件：

Vue.component(Menu.name, Menu)
Vue.component(Menu.SubMenu.name, Menu.SubMenu)
Vue.component(Menu.Item.name, Menu.Item)

3、组件的引入，可以跟Layout写在一起：

import { Layout, Icon, Menu } from 'ant-design-vue'

4、编译并启动服务：

npm run serve

浏览器运行如下图：

 

参考文档：https://antdv.com/components/layout-cn

                  https://antdv.com/components/menu-cn/

Demo地址：https://gitee.com/yjh4866/antdv