Vue+Element通用管理界面

1.页面原型

参照现在主流的页面布局发现，大多数页面所采用的布局都分为侧边栏，头部栏和主要资源展示页面三大主体。

yuanxin.png

参照element组件库我们发现在布局容器中存在我们想要的布局元素

element.png

点击展开后复制其中的代码，在上次登入界面创建的Vue框架中views目录下创建一个index.vue文件存放首页界面

1
2
3
4
5
6
7
<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

将代码插入到其中的标准格式中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>

</template>

<script>
export default{
    data(){
        return{

        }
    },
    methods:{

    }
}
</script>

插入后的代码为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<template>
    <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
  </el-container>
</el-container>
</template>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

<script>
export default{
    data(){
        return{

        }
    },
    methods:{

    }
}
</script>

启动service服务后界面如下：

index01.png

2.侧边栏

2.1模块化设计

如果将所有的vue界面写在同一个项目中，会显得臃肿和难以维护，建议将项目拆分成模块化的设计风格。

将asdie替换成另一个vue页面，在js中引入页面并且声明components主键。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
    <el-container>
    <el-aside width="200px">
    	<Asidemenu />
    </el-aside>
    <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
  </el-container>
</el-container>
</template>

<script>
import Asidemenu from './aside_menu.vue'
export default{
    data(){
        return{

        }
    },
    methods:{

    },
    components:{
      Asidemenu,
    }
}
</script>

在views下创建aside_menu.vue界面引入标准格式，在element中找到侧边栏组件引入，其中index表示单击窗口后url转跳的位置，其中的i标签中的icon标签也可以在element组件中寻找标签名替换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<template>
    <el-aside style="min-height: 100vh;width: 200px;">          
                <el-menu default-active="1" 
                class="el-menu-vertical-demo" router>
                    <el-menu-item index="/index">
                        <i class="el-icon-house"></i>
                        <span slot="title">项目首页</span>
                    </el-menu-item> 

                    <el-menu-item index="/user">
                        <i class="el-icon-user-solid"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>

                    <el-menu-item index="/order">
                        <i class="el-icon-setting"></i>
                        <span slot="title">订单管理</span>
                    </el-menu-item>

                    <el-submenu index="/other">
                        <template slot="title">
                            <i class="el-icon-more"></i>
                            <span slot="title">其他项目</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/number">
                                <i class="el-icon-s-data"></i>
                                数据量统计
                            </el-menu-item>
                            <el-menu-item index="/about">
                                <i class="el-icon-chat-round"></i>
                                关于
                            </el-menu-item>
                        </el-menu-item-group>  
                    </el-submenu>
                </el-menu>
    </el-aside>
</template>

<script>
export default{
    data(){
        return{

        }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}

</script>

2.2页面预览

接下来访问页面原型如下：

aside.png

2.3建议

在views下创建Home文件夹，将页面所有的vue对象优先创建出来，这样避免思路被中断去构建页面，建议优先完成4中的main设计。

3.头部栏

3.1面包屑组件

在element组件中寻找主流的面包屑组件，它可以直观的显示用户当前所在的页面路径,在这里使用第二种作为演示

bread.png

同样参照上面模块化设计的原理，在views下创建bread.vue界面引入标准格式，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>

</template>

<script>
export default{
    data(){
        return{

        }
    },
    methods:{

    }
}
</script>

3.2页面预览

head.png

3.3页面改进

这时我们发现无论怎么点击侧边栏中的路径，上边的导航栏都不会改变，这里需要动态获取当前所在的路径名称，创建一个list对象，将当前所在目录下的所有页面目录名称录入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-for="item in lists" :key="item.path">{{item.meta.title}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
export default{
    data(){
        return{
            lists:[]
        }
    },
    methods:{

    },
    watch:{
        $route(to,from){
            this.lists=to.matched;
        }
    },
    mounted(){
        this.lists = this.$route.matched;
    }
}
</script>

3.4改进预览

bread_plus.png

4.主要界面

4.1创建main页面所有的简易页面

参照侧边栏，我们需要构建出以下目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
views
├─ Home.vue
└─ Home
   ├─ aside_menu.vue
   ├─ breadcrumb.vue
   ├─ index.vue
   ├─ Login.vue
   ├─ user
   │  └─ index.vue
   ├─ other
   │  ├─ about.vue
   │  ├─ index.vue
   │  └─ number.vue
   ├─ order
   │  └─ index.vue
   └─ index
      └─ index.vue

在各级目录下创建一些标志性文字，例如about.vue内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
    <div>
        <h1>
            about
        </h1>
    </div>
</template>

<script>
export default{
    data(){
        return{

        }
    },
    methods:{

    }
}
</script>

4.2路由信息

$route表示在路由中获取meta中的title元素，所有我们需要在路由中设置title元素。

将router中的index.js路由文件改成以下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/Home/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',  //默认
    name: 'Login',
    component: Login
  },
  {
    path: '/login',  //登入
    name: 'Login',
    component: Login
  },
  {
    path: '/Home',  //首页
    name: 'Home',
    meta:{title:'管理系统'},
    component: () => import('@/views/Home/index.vue'),
    children:[
      {
        path: '/index', //首页
        name: 'index',
        meta:{title:'首页'},
        component: () => import('@/views/Home/index/index.vue'),
      },
      {
        path: '/user', //用户管理
        name: 'user',
        meta:{title:'用户管理'},
        component: () => import('@/views/Home/user/index.vue'),
      },
      {
        path: '/order', //订单管理
        name: 'order',
        meta:{title:'订单管理'},
        component: () => import('@/views/Home/order/index.vue'),
      },
      {
        path: '/other', //其他管理
        name: 'other',
        meta:{title:'其他项目'},
        component: () => import('@/views/Home/other/index.vue'),
        children:[
          {
          path: '/number', //统计量管理
          name: 'number',
          meta:{title:'统计量管理'},
          component: () => import('@/views/Home/other/number.vue'),
         },
        {
            path: '/about', //关于管理
            name: 'about',
            meta:{title:'关于管理'},
            component: () => import('@/views/Home/other/about.vue'),
        },       
      ]
      },
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

将路由中的信息配置成上述，就可以在bread中动态获取各个元素的title数据了。

将路由信息配置完成后，面包屑的功能可以正常使用了，

4.3主页走马灯

走马灯效果在element-ui中显示的效果就是主页的轮播图效果

carouset.png

在assets中创建img文件夹存放图片，在index/index.vue中加入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
    <div>
        <el-carousel indicator-position="outside" height="500px">
            <el-carousel-item v-for="item in lists" :key="item">
                <img :src="item" alt=""/>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
export default{
    data(){
        return{
            lists:[
                require('@/assets/img/back01.jpg'),
                require('@/assets/img/back02.jpg'),
                require('@/assets/img/back03.jpg'),
                require('@/assets/img/back04.jpg'),
            ]
        }
    },

    methods:{

    }
}
</script>

4.4页面效果

carouset_img.png

5.页面卡片

2024年5月22日23点14分

5.1卡片页面原型：

基础用法：

base.png

带图片的用法：

pro.png

这里选择使用图片的卡片样式，将其中的代码块部分复制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<el-row>
  <el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 2 : 0">
    <el-card :body-style="{ padding: '0px' }">
      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
      <div style="padding: 14px;">
        <span>好吃的汉堡</span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <el-button type="text" class="button">操作按钮</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>

<script>
export default {
  data() {
    return {
      currentDate: new Date()
    };
  }
}
</script>

将其中的卡片放置在走马灯效果下，其中v-for循环的内容可以根据页面所需的卡片数量调整，可以通过list函数中的内容获取，修改其中的index/Index.vue的源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<template>
    <div>
        <!-- 跑马灯 -->
        <el-carousel indicator-position="outside" height="300px">
            <el-carousel-item v-for="item in lists" :key="item">
                <img :src="item" alt="" />
            </el-carousel-item>
        </el-carousel>
        <!-- 卡片    -->
        <el-row>
            <el-col :span="6" v-for="(o, index) in cardlist" :key="o" :offset="index > 0 ? 0 : 0">
                <el-card :body-style="{ padding: '0px' }">
                    <img :src="o.img"
                        class="image">
                    <div style="padding: 14px;">
                        <span>{{o.title}}</span>
                        <div class="bottom clearfix">
                            <time class="time">{{ currentDate }}</time>
                            <el-button type="text" class="button">操作按钮</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            lists: [
                require('@/assets/img/back01.jpg'),
                require('@/assets/img/back02.jpg'),
                require('@/assets/img/back03.jpg'),
                require('@/assets/img/back04.jpg'),
            ],
            cardlist:[
                {title:"卡片1",img:require('@/assets/img/top1.jpg')},
                {title:"卡片2",img:require('@/assets/img/top2.jpg')},
                {title:"卡片3",img:require('@/assets/img/top3.jpg')},
                {title:"卡片4",img:require('@/assets/img/top4.jpg')},
            ],
            currentDate: new Date()
        }
    },

    methods: {

    }
}
</script>
<style scoped>
 .el-card__body img{
    width: 100%;
 }
 .el-carousel__container img{
    height: 100%;
    width: 100%;
 }
 .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>

注意其中的span值，在element布局中，默认将页面等分成24分，span=6就是占24份中的6分，详情可以参考element官方源码，其中还有根据页面分辨率大小调整span所占比例的办法

span.png

5.2Col Attributes

参数 说明 类型 可选值 默认值
span 栅格占据的列数 number — 24
offset 栅格左侧的间隔格数 number — 0
push 栅格向右移动格数 number — 0
pull 栅格向左移动格数 number — 0
xs <768px 响应式栅格数或者栅格属性对象 number/object (例如： {span: 4, offset: 4}) — —
sm ≥768px 响应式栅格数或者栅格属性对象 number/object (例如： {span: 4, offset: 4}) — —
md ≥992px 响应式栅格数或者栅格属性对象 number/object (例如： {span: 4, offset: 4}) — —
lg ≥1200px 响应式栅格数或者栅格属性对象 number/object (例如： {span: 4, offset: 4}) — —
xl ≥1920px 响应式栅格数或者栅格属性对象 number/object (例如： {span: 4, offset: 4}) — —
tag 自定义元素标签 string * div

5.3页面效果

card.png

6.页面美化

6.1侧边栏的美化

侧边栏的主题颜色一般与页面主体的颜色不同，一般是做深颜色的处理用来突出显示，这里我们参照element写好的自定义颜色列表做设计。

1
2
3
4
5
6
7
8
9
<el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">

发现其中主要颜色背景部分由这些决定background-color=”#545c64”
text-color=”#fff”
active-text-color=”#ffd04b”。将这段带面添加到aside中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<template>
    <el-aside style="min-height: 100vh;width: 200px;">
        <el-menu default-active="1" class="el-menu-vertical-demo" router background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b" style="height: 100vh;">
            <el-menu-item index="/index">
                <i class="el-icon-house"></i>
                <span slot="title">项目首页</span>
            </el-menu-item>

            <el-menu-item index="/user">
                <i class="el-icon-user-solid"></i>
                <span slot="title">用户管理</span>
            </el-menu-item>

            <el-menu-item index="/order">
                <i class="el-icon-setting"></i>
                <span slot="title">订单管理</span>
            </el-menu-item>

            <el-submenu index="/other">
                <template slot="title">
                    <i class="el-icon-more"></i>
                    <span slot="title">其他项目</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/number">
                        <i class="el-icon-s-data"></i>
                        数据量统计
                    </el-menu-item>
                    <el-menu-item index="/about">
                        <i class="el-icon-chat-round"></i>
                        关于
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </el-aside>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}

</script>

6.2页面展示

black_card.png