vue+elementui编写一个简单的首台管理模板首页

 【绅士礼仪，先赞后看，鼓励作者，拒绝白嫖】
话不多说，先上图

App组件

<template>
  <div id="app">
    <el-container>
      <!-- 侧边栏组件 -->
      <el-aside width="">
        <common-aside></common-aside>
      </el-aside>
      <el-container>
        <!-- 顶部组件 -->
        <el-header>
          <common-header></common-header>
        </el-header>
        <!-- 首页组件 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import CommonAside from "./components/CommonAside.vue";
import CommonHeader from "./components/CommonHeader.vue";

export default {
  name: "App",
  components: {
    CommonAside,
    CommonHeader,
  },
  mounted(){
    console.log(this)
  }
}
</script>

<style>
html,body{
  margin: 0px;
  padding: 0px;
}
.el-header {
  background-color: #303133;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 200px;
  height: 100vh;
}

.el-main {
  background-color: #F2F6FC;
  color: #333;
  text-align: center;
  padding: 10px;
}

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>

侧边栏组件（组件名：CommonAside.vue）

<template>
  <el-menu
    default-active="1-4-1"
    class="el-menu-vertical-demo"               
    :collapse="isCollapse"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    :router= "true">
    <h3>{{isCollapse?'标题':'后台管理系统'}}</h3>
    <el-menu-item v-for="item in noChildren" :key="item.path" :index="item.path+''">
      <i :class="'el-icon-'+ item.icon"></i>
      <span slot="title">{{item.label}}</span>
    </el-menu-item>

    <el-submenu v-for="item in hasChildren" :key="item.path" :index="item.path+''">
      <template slot="title">
        <i :class="'el-icon-'+ item.icon"></i>
        <span slot="title">{{item.label}}</span>
      </template>
      <el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
        <el-menu-item :index="subItem.path">{{subItem.label}}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      menu: [
        {
          path: '/',
          name: 'home',
          label: '首页',
          icon: 's-home',
          url: 'Home/Home'
        },
        {
          path: '/mall',
          name: 'mall',
          label: '商品管理',
          icon: 'video-play',
          url: 'MallManage/MallManage'
        },
        {
          path: '/user',
          name: 'user',
          label: '用户管理',
          icon: 'user',
          url: 'UserManage/UserManage'
        },
        {
         
          label: '其他',
          icon: 'location',
          children: [
            {
              path: '/page01',
              name: 'page01',
              label: '页面1',
              icon: 'setting',
              url: 'Other/PageOne'
            },
            {
              path: '/page02',
              name: 'page02',
              label: '页面2',
              icon: 'setting',
              url: 'Other/PageTwo'
            }]
        }
      ]
    }
  },
  computed: {
    noChildren(){
      return this.menu.filter(item => !item.children)
    },
    hasChildren(){
      return this.menu.filter(item => item.children)
    },
    isCollapse(){
      return this.$store.state.isCollapse;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100vh;
  border: none;
}
.el-menu {
   border: none;
}
.el-menu-item-group__title {
    padding: 0; 
}

h3{
    color: aliceblue;
    line-height: 30px; 
}

span,.el-menu-item{
  font-size: 16px;
}

</style>

顶部组件（组件名：CommonHeader.vue）

<template>
    <el-row>
        <el-col :span="1">
            <div>
                <el-button icon="el-icon-menu" size="mini" @click="menuHandler"></el-button>
            </div>
        </el-col>
        <el-col :span="1"><div class="table">首页</div></el-col>
        <el-col :span="20"><div class="table">&nbsp;</div></el-col>
        <el-col :span="2">
            <!--   头像下拉菜单 -->
            <el-dropdown trigger="click">
                <div class="circle">
                    <el-avatar :size="50" :src="imgUrl"></el-avatar>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-plus">我的</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-plus">账单</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-plus-outline">消息</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-check">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-col>
    </el-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      //菜单控制
      isCollapse: false,
      //头像地址
      imgUrl:require('../assets/avatar.jpg')
    }
  },
  methods: {
    menuHandler(){
        this.$store.commit('MENUHANDLER')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.table {
  color: #C0C4CC;
  line-height: 60px;
}
.circle{
    height: 60px;
}
.el-avatar{
    margin: 5px 0 0 0;
}
</style>

首页组件 （组件名 Index.vue）

<template>
<div>
  <el-row :gutter="20">
    <el-col :span="8">
      <div class="grid-content bg-purple">
        <!-- 首页user信息 -->
        <el-card shadow= 'hover'>
          <div class="userCard">
            <el-avatar :size="150" :src=imgUrl></el-avatar>
            <div class="userInfo">
              <p class="important-font">Admin</p>
              <p class="secondary-font">管理员</p>
            </div>
          </div>
          <div class="login-info">
            <p>上次登录时间: 2022/07/06 18:16</p>
          </div>
        </el-card>
        <!-- 首页表格 -->
        <el-card shadow= 'hover' class="tableInfo">
          <div slot="header">
            <span class="important-font">客户信息</span>
          </div>
          <div>
            <el-table
              :data="tableData"
              stripe
              border
              height="450px"
              style="width: 100%">
              <el-table-column
                prop="date"
                label="日期"
                width="120">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                width="80">
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址">
              </el-table-column>
            </el-table>
          </div> 
        </el-card>
      </div>
    </el-col>
    <el-col :span="16">
      <!-- 六个订单信息 -->
      <div class="num">
        <el-card shadow= 'hover' v-for="item in countData" :key="item.name" :body-style="{ display: 'flex',padding: 0 }" class="OrderCard">
          <i class="icon" :class="'el-icon-'+item.icon" :style="{ background: item.color}"></i>
          <div>
            <p class="important-font">￥{{item.value}}</p>
            <p class="secondary-font">{{item.name}}</p>
          </div>
        </el-card>
      </div>
      <!-- 柱状图 -->
      <el-card style="height: 280px">
        <div style="height:280px;" ref="barEcharts">{{initBarEcharts()}}</div>
      </el-card>
      <div class= "num graph">
        <el-card style="width: 34%;height: 265px;marginRight: 1%">
          <div style="width: 100%;height: 265px;" ref="pieEcharts">{{initPieEcharts()}}</div>
        </el-card>
        <el-card style="width:65%;height: 265px"><div style="height: 265px"><el-calendar v-model="value"></el-calendar></div></el-card>
      </div>
    </el-col>
  </el-row>
</div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "Index",
  data() {
    return {
      imgUrl:require('../assets/avatar.jpg'),
      value: new Date(),
      tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
      }],
      countData:[
        {
          name: '今日支付订单',
          value: 1200,
          icon: 'success',
          color: '#2ec7c9'
        },
        {
          name: '今日收藏订单',
          value: 1200,
          icon: 'star-on',
          color: '#ffb980'
        },
        {
          name: '今日取消订单',
          value: 1200,
          icon: 's-goods',
          color: '#5ab1ef'
        },
        {
          name: '今日退款订单',
          value: 1200,
          icon: 'success',
          color: '#2ec7c9'
        },
        {
          name: '本月支付订单',
          value: 1200,
          icon: 'star-on',
          color: '#ffb980'
        },
        {
          name: '本月退款订单',
          value: 1200,
          icon: 's-goods',
          color: '#5ab1ef'
        }
      ]
    }
  },methods:{
    //柱状图
    initBarEcharts () {
    // 新建一个promise对象
      let p = new Promise((resolve) => {
        resolve()
      })
      //然后异步执行echarts的初始化函数
      p.then(() => {
        //	此dom为echarts图标展示dom
        let myChart = echarts.init(this.$refs.barEcharts)
        let option = {
          title: {
            text: '销售表'
          },
          tooltip: {},
          legend: {
            data: ['今日销量','昨日销量']
          },
          xAxis: {
            data: ['华为', 'vivo', 'oppo', 'ipone', '小米', '三星']
          },
          yAxis: {},
          series: [
            {
              name: '今日销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            },
            {
              name: '昨日销量',
              type: 'bar',
              data: [10, 18, 34, 8, 12, 21]
            }
          ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      })
    },
    //饼图
    initPieEcharts () {
      let p = new Promise((resolve) => {
        resolve()
      })
    //然后异步执行echarts的初始化函数
      p.then(() => {
        let myChart = echarts.init(this.$refs.pieEcharts);
        let option= {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '0%',
            left: 'left'
          },
          series: [
            {
              name: '订单信息',
              type: 'pie',
              radius: ['20%', '65%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'left'
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: 1048, name: '成交订单量' },
                { value: 735, name: '退款订单量' },
                { value: 580, name: '浏览量' },
                { value: 484, name: '加购量' },
                { value: 300, name: '预购量' }
              ]
            }
          ]
        }
        myChart.setOption(option);
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.el-card__body {
    padding: 10px;
}
.userCard{
  height: 180px;
  display: flex;
  border-bottom: 2px solid #DCDFE6;
  border-radius: 2px;
}
.userInfo{
  width: auto;
  padding: 6% 0 0 6%;
}
.important-font{
    font-weight: 900;
    font-size: 25px;
}
.secondary-font{
  color: #909399;
}
.login-info{
  height: 40px;
  text-align: left;
  color: #909399;
}
.tableInfo{
  margin: 20px 0 0 0;
}
.OrderCard{
   margin: 0 0 30px 30px;
   border: #DCDFE6 1px solid;
   border-radius: 10px;
   i{
     width: 30%;
     line-height: 120px;
     font-size: 30px;
     color:#fff
   }
   div{
     width: 300px;
   }
}
.el-card{
  border: none;
}
.num{
  display: flex;
  flex-wrap: wrap;
}
.graph{
  margin: 15px 0 0 0;
}
.el-calendar{
  height: 265px ;
}
</style>

路由配置（router_Config.js）

import VueRouter from 'vue-router'
import Index from '../views/Index.vue'

export default new VueRouter({
    routes:[
        {
            path : "/",
            name: 'home',
            component: Index
        }
    ]
})

mian.js配置

import Vue from 'vue'
import App from './App.vue';
import { Button,Container,Aside,Header,Main,Radio,RadioGroup,RadioButton,Menu,Submenu,MenuItem,MenuItemGroup,Row,Col,Avatar,Dropdown,DropdownMenu,DropdownItem,Card,Table,TableColumn,Calendar,Divider } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueRouter from 'vue-router'
import RouterConfig from './router/router_Config'


Vue.use(VueRouter);
Vue.use(Button);
Vue.use(Radio);
Vue.use(Container);
Vue.use(Aside);
Vue.use(Header);
Vue.use(Main);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Row);
Vue.use(Col);
Vue.use(Avatar);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Card);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Calendar);
Vue.use(Divider);

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router: RouterConfig,
  render: h => h(App),
})