vue-element-admin 综合开发三：header组件的实现、vuex的使用、main组件（home页面）的实现

导言

一、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>

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>

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>

二、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
  }
})

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

export default {
  state: {
  },
  mutations: {
  }
}

c、更改：main.js

到此配置结束

4. 解决 二.1 的需求

a. 编辑store/tab.js模块

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

export default {
  state: {
    isCollapse: false
  },
  mutations: {
    collapseMenu(state){
      state.isCollapse = !state.isCollapse;
    }
  }
}

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">Admin</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登陆时间：<span>2021-07-19</span></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>

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
    }
})

改正：

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

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. 重启即可