导言
一、header组件的实现
引入 几个less。
1. 引入自定义样式(四个 less)
- common.less
- home.less
- reset.less
index.less中引入了其他三个，在main.js中引入这一个即可
2. 自定义Header组件
a、创建：commenHeaderMenu.vue
<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
- 创建计算函数
isCollapse
- 删除 data 中
isCollapse
- 观看页面展示，页面无误，说明组件中使用的
关闭/展开属性使用的就是vuex中的数据，通过this.$store.state.tab.isCollapse;来引用，在下图的控制台中，也打印出了this.$store这个对象。
c、header 组件 icon 添加事件
d、修改 Aside 文本样式
e、页面展示
三、main组件的实现
- mian组件，也就是 home 页面的内容，更多的是 element-ui 的显示组件哈。
- 其中的class样式，也在之前的less中一块引进来了。
- 新引入的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后，浏览器控制台出错
- 第一个红框打印的是
this.$store，说明vuex没有配置成功。 - 第二个红框导致出现的错误。
b、解决
我看了项目的vue版本 是2.6.14版本，然后通过命令安装的是vuex是4.0.2版本。
然后看了下vuex官网
意思是：
vue3.x 对应 vuex4.xvue2.x 对应 vuex3.x
所以重新下载vuex，指定3版本，
c、下载对应版本
npm i vuex@3.0.0oryarn add vuex@3.0.0- 重启即可
