接着之前的创建管理后台，接下来我们搭建布局

搭建布局

使用ant-design的layout组件，使用方法如下：

在main.ts页面导入组件，并使用

import { Button, Layout } from 'ant-design-vue'

const plugins = [Button, Layout]

其他代码和之前一样。

然后我们在layout的布局中选择一个，我们一般选择的就左右布局，右边是上中下布局

代码可以直接从框架上拷贝下来，那我们得到的样式就是现在这样的

我们能看到高度是存在一定问题的，主要原因是高度没有撑满100%，我通过设置

#app {
  height: 100%;
  color: #fff;
}
.ant-layout {
  height: 100%;
}
.ant-layout-header {
  color: #fff;
}

保存后得到的效果如下：

添加侧边目录

在现有基础上，把home和about页面作用侧边的栏目, 这里想要将侧边栏做成可收缩的，如下：

这里我们使用menu组件，先修改main.ts文件

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

const plugins = [Button, Layout, Menu]

同样粘贴组件上的代码，得到如下结果

home和page两个按钮

 <a-menu-item key="2">
     <router-link to="/">Home</router-link>
  </a-menu-item>
  <a-menu-item key="3">
     <router-link to="/about">About</router-link>
  </a-menu-item>

点击About页面，我们就可以看到下个页面

登录页面

页面创建

在这里使用input和form组件

import { Button, Layout, Menu, Form, Input } from 'ant-design-vue'
const plugins = [Button, Layout, Menu, Form, Input]

创建login文件，文件夹下创建index.vue文件

index.vue文件主要就使用了form和input,button等组件

提交按钮

直接上代码

setup () {
    const formState = reactive<FormState>({
      user: '',
      password: ''
    })
    const onFinish: FormProps['onFinish'] = values => {
      console.log(values, formState)
    }

    const onFinishFailed: FormProps['onFinishFailed'] = errors => {
      console.log(errors)
    }

    return {
      size: ref<SizeType>('large'),
      formState,
      onFinish,
      onFinishFailed
    }
 }

拿到了user和password，这样就可以提交请求了。

未完待续。。。。。！！！

搭建管理后台 -3

搭建布局

添加侧边目录

登录页面

页面创建

提交按钮