导言

一、header组件的实现

引入 几个less。

1. 引入自定义样式(四个 less)

1. common.less
2. home.less
3. reset.less
4. index.less 中引入了其他三个，在 main.js 中引入这一个即可
   

2. 自定义Header组件

a、创建：commenHeaderMenu.vue

icon官网

<template>
  <header>
    <div class="l-content">
      <el-button plain icon="el-icon-menu" size="mini">el-button>
    div>
  header>
template>
1
2
3
4
5
6
7

b、main.vue中引入

c、页面

2. 引入下拉菜单

a、编辑：commenHeaderMenu.vue

<template>
  <header>
    <div class="l-content">
      <el-button plain icon="el-icon-menu" size="mini">el-button>
      <h3 style="color: #fff">首页h3>
    div>
    <div class="r-content">
      <el-dropdown trigger="click" szie="mini">
        <span>
          <img class="user" :src="userImg" />
        span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心el-dropdown-item>
          <el-dropdown-item>退出el-dropdown-item>
        el-dropdown-menu>
      el-dropdown>
    div>
  header>
template>
<script>
export default {
  name: "commenHeaderMenu",
  data() {
    return {
      userImg: require("../assets/images/user.png"),
    };
  },
};
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

b、main.js按需引入

c、页面

3. header 最终样式

<style lang="less" scoped>
header {
  display: flex; // 使用flex布局
  height: 100%;
  justify-content: space-between;
  align-items: center; // 水平居中
}
.l-content {
  display: flex;
  align-items: center;
  .el-button {
    margin-right: 20px;
  }
}
.r-content {
  .user {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

二、vuex的使用、安装、配置

1. 需求描述

现在要实现点击首页左边的icon 来实现侧边栏的收起和展开。但是
icon在组件commenHeaderMenu.vue中

控制侧边栏的属性在组件commenAsideMenu.vue中

这两个组件是兄弟组件

所以设计到 组件间通信的问题。
方法1：使用组件间通信。
方法2：使用vuex进行管理。
这里为了方便，使用vuex进行管理。

2. 安装vuex

npm i vuex or yarn add vuex (npm 会报错，用yarn 即可)
这里报错了，用了很长时间发现了是版本问题，问题描述和解决，在最下面的开发中bug里面。

3. 配置vuex

a、新建：store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab'

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  modules: {
    tab
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

b、新建模块： stroe/tab.js

export default {
  state: {
  },
  mutations: {
  }
}
1
2
3
4
5
6

c、更改：main.js

到此配置结束

4. 解决 二.1 的需求

a. 编辑store/tab.js模块

将控制展开和封闭属性，封装到 tab/state/isCollapse。

export default {
  state: {
    isCollapse: false
  },
  mutations: {
    collapseMenu(state){
      state.isCollapse = !state.isCollapse;
    }
  }
}
1
2
3
4
5
6
7
8
9
10

b、修改组件：commenAsideMenu.vue

1. 创建计算函数 isCollapse
   
2. 删除 data 中 isCollapse
   
3. 观看页面展示，页面无误，说明组件中使用的关闭/展开属性使用的就是vuex中的数据，通过 this.$store.state.tab.isCollapse; 来引用，在下图的控制台中，也打印出了 this.$store 这个对象。
   

c、header 组件 icon 添加事件

d、修改 Aside 文本样式

e、页面展示

三、main组件的实现

1. mian组件，也就是 home 页面的内容，更多的是 element-ui 的显示组件哈。
2. 其中的class样式，也在之前的less中一块引进来了。
3. 新引入的element 组件，也在 main.js 中 使用 Vue.use 按需引入了
   直接放上页面和数据了。

1. 页面代码

<template>
  <el-row class="home" :gutter="20">
    
    <el-col :span="8" style="margin-top: 20px">
      
      <el-card shadow="hover">
        <div class="user">
          <img :src="userImg" />
          <div class="userInfo">
            <p class="name">Adminp>
            <p class="access">超级管理员p>
          div>
        div>
        <div class="login-info">
          <p>上次登陆时间：<span>2021-07-19span>p>
          <p>上次登陆地点：<span>武汉span>p>
        div>
      el-card>
      
      <el-card style="margin-top: 20px; height: 460px">
        <el-table :data="tableData">
          <el-table-column
            v-for="(value, key) in tableLabel"
            :prop="key"
            :label="value"
            :key="key"
          >el-table-column>
        el-table>
      el-card>
    el-col>
    
    <el-col :span="16" style="margin-top: 20px">
      
      <div class="num">
        <el-card
          v-for="item in countData"
          :key="item.name"
          :body-style="{ display: 'flex', padding: 0 }"
        >
          <i
            class="icon"
            :class="`el-icon-${item.icon}`"
            :style="{ background: item.color }"
          >i>
          <div class="detail">
            <p class="num">¥{{ item.value }}p>
            <p class="txt">{{ item.name }}p>
          div>
        el-card>
      div>
      
      <el-card style="height: 280px">el-card>
      
      <div class="graph">
        <el-card style="height: 260px">el-card>
        <el-card style="height: 260px">el-card>
      div>
    el-col>
  el-row>
template>

<script>

export default {
  name: "Home",
  data() {
    return {
      userImg: require("../../assets/images/user.png"),
      tableData: [
        {
          name: "oppo",
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
        {
          name: "vivo",
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
        {
          name: "苹果",
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
        {
          name: "小米",
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
        {
          name: "三星",
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
        {
          name: "魅族",
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
      ],
      countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ],
      tableLabel: {
        name: "课程",
        totalBuy: "今日购买",
        monthBuy: "本月购买",
      },
    };
  },
  mounted() {
  },
};
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
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

2. 页面展示

四、开发中bug

1. app.js:275 Uncaught Error: [vuex] store must be called with the new operator

原因：在使用Vuex.Store()的时候忘记加上new了

const store = Vuex.Store({	//Vuex前面少了new
    modules:{
        user
    }
})
1
2
3
4
5

改正：

const store = new Vuex.Store({
    modules:{
        user
    }
})

1
2
3
4
5
6

2. vuex版本引发的血案（版本对应）

a、描述

安装 vuex：npm i vuex or yarn add vuex
配置完vuex后，浏览器控制台出错

1. 第一个红框打印的是 this.$store，说明vuex没有配置成功。
2. 第二个红框导致出现的错误。
   

b、解决

我看了项目的vue版本 是2.6.14版本，然后通过命令安装的是vuex是4.0.2版本。
然后看了下vuex官网

意思是：

1. vue3.x 对应 vuex4.x
2. vue2.x 对应 vuex3.x
   所以重新下载vuex，指定3版本，

c、下载对应版本

1. npm i vuex@3.0.0 or yarn add vuex@3.0.0
2. 重启即可