VUE项目实战

Ant Design Vue项目

第二步（整体布局）

整体布局

使用Ant Design Vue组件，定义了布局组件，可以利用他进行全部布局，官网链接可以瞅瞅

[www.antdv.com/components/…]:
1. Layout布局
2. menu导航栏

安装插件

npm install ant-design-vue --save
复制代码

在main.js中引入：

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)
复制代码

就可以使用Ant Design Vue啦

设计布局

新建layout文件夹
一般的布局结构如下，设计的也是这样子的布局：

代码可以在官网进行参考，我根据自己的喜好改的如下：

<template>
  <a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header"
      :style="{backgroundColor:'pink'}"
    >
      <div class="logo" />
      <a-menu
        theme="light"
        mode="horizontal"
        :default-selected-keys="['2']"
        :style="{ lineHeight: '64px',float:'right',backgroundColor:'pink'}"
      >
        <a-menu-item key="1">
          我的
        </a-menu-item>
        <a-menu-item key="2">
          消息
        </a-menu-item>
        <a-menu-item key="3">
          退出
        </a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
          mode="inline"
          :default-selected-keys="['1']"
          :default-open-keys="['sub1']"
          :style="{ height: '100%', borderRight: 0 }"
        >
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="user" />首页</span>
            <a-menu-item key="1">
              vue
            </a-menu-item>
            <a-menu-item key="2">
              react
            </a-menu-item>
            <a-menu-item key="3">
              layui
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="laptop" />行业使用</span>
            <a-menu-item key="5">
              医疗
            </a-menu-item>
            <a-menu-item key="6">
              教育
            </a-menu-item>
            <a-menu-item key="7">
              司法
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <span slot="title"><a-icon type="notification" />个人产品</span>
            <a-menu-item key="9">
              AI
            </a-menu-item>
            <a-menu-item key="10">
              输入法
            </a-menu-item>
            <a-menu-item key="11">
              智能识别
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding:24px 24px 24px 24px"> 
        <a-layout-content
          :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '100vh' }"
        >
        内容是不一样的呀
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false,
    };
  },
};
</script>

<style>
body,html{
  margin: 0;
}

#app{
  margin: 0;
  padding: 0;
}

#components-layout-demo-top-side-2 .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}

a-menu-item{
  padding: 0;
}

</style>
复制代码