4.1　商城后台首页静态页面布局

商城后台首页如图4-1所示。

从图4-1可见，商城后台页面布局分为头部、左侧菜单和右侧菜单区域。头部区域和左侧菜单区域是固定的，切换路由时，只有右侧区域是变化的，在后期会将固定的区域抽离成公共布局，通过Element Plus提供的container布局容器实现首页框架。

打开Home.vue后台首页组件，视图层示例代码如下。

图4-1

CSS样式代码如下。

通过上述代码，网站的头部区域、左侧菜单区域以及右侧主体内容区域布局完成。

为了提高代码的可读性和可维护性，接下来进行代码分离，将头部区域、左侧菜单区域、主体区域中的导航菜单抽离成独立模块。

在components目录中分别创建Header.Vue、Menu.Vue、TagMenu.Vue子组件，在Home.vue父组件分别进行引用，示例代码如下。

import Header from '@/components/Header.vue'
import Menu from '@/components/Menu.vue'
import TagMenu from '@/components/TagMenu.vue'

代码分离完成的头部区域在Header组件开发，左侧菜单区域在Menu组件开发，tag导航在TagMenu组件开发。 gk2J3X5LCV4SlGx1XjkB5TC1una4WasVqlLw5eWaEdNU5ZxGRQHdEd5Wz1OTE4Lj