• 本期任务是编写数据用户管理页面(Users)。
• 编写数据景点管理页面(Tours)页面。
• 编写数据个人设置页面(Profile)页面。

1 编写用户管理页面

修改Users.vue:

效果：

2 编写景点管理页面

新建Tours.vue：

效果：

3 编写个人设置页面

新建Profile.vue:

效果：

4 修改router文件

修改router/index.js ，优化了一下之前的导入方式改为使用箭头函数来动态引入，这样项目消耗的资源更少：

const routes = [     {         path: '/',         component: Layout,         redirect: '/dashboard',         children: [             {                 path: 'dashboard',                 component:()=> import('@/views/Dashboard'),                 name: 'Dashboard'             },             {                 path: 'users',                 component:()=>  import('@/views/Users'),                 name: 'Users'             },             {                 path: 'profile',                 component:()=>  import('@/views/Profile'),                 name: 'Users'             },             {                 path: 'tours',                 component:()=>  import('@/views/Tours'),                 name: 'Tours'             }             // 其他子路由         ]     },     // 其他路由 ]; 

5 修改Layout.vue

由于新增了页面，因此菜单也需要修改

                       数据驾驶舱                               景点管理                               用户管理                               个人设置 

前端整体效果：

6 美化按钮，自定义按钮的颜色

为了酷炫（帅是一辈子的事），我们修改el-button=primary的配色为黑金色，

在assets/styles下新建global.css：

/* 全局覆盖 Element UI 按钮样式 */ .el-button--primary {     background-color: #545c64 !important; /* 黑色背景 */     border-color: #000000 !important; /* 黑色边框 */     color: #ffd04b !important; /* 金色文字 */ }  .el-button--primary:hover, .el-button--primary:focus {     background-color: #333333 !important; /* 深黑色背景 */     border-color: #333333 !important; /* 深黑色边框 */     color: #ffd04b !important; /* 金色文字 */ }  

在main.js中引入上述文件

import './assets/styles/global.css'; // 引入全局样式覆盖文件 

修改后的按钮效果：

7 修复BUG

• 打开对话框可以明显发现页面右侧会有抖动

  导致这个问题的原因是页面body样式有一个margin 8px的样式，修改方法也是非常简单，在index.html中修改：

• 菜单栏边缘有一侧白色的边距，这个是由于我们之前设置container的时候有一个1px 的边框颜色，使用深色的菜单栏背景就能看出来了，所以删掉下面的样式：

  .container{   height: 100vh;   /*border: 1px solid #eee;*/ } 

• 菜单栏active的问题，我们点击用户管理，然后再刷新页面，发现激活的菜单栏变成数据驾驶舱了，其实就是activeIndex 这个变量刷新页面后变成初始值了，所以修改方式也非常简单，在页面加载完成后给他赋予当前的路由就可以了：

•  mounted() {     console.log('当前路径:', this.$route.path)     this.activeIndex = this.$route.path   },