Vue2 公司后台管理系统（仅前端）

项目源码

码云地址： https://gitee.com/gpnu_wzx/company_manage

一、项目功能

   登录/退出
   路由拦截
   Element-UI
   Tab 选项卡
   二级菜单
   Echarts图表展示
   信息通知的未读已读标记
   表格
   表单
   管理员/员工的基础的CURD操作

二、页面展示

2.1 视频演示

company_manage

2.2 主要页面

登录

首页

通知

个人中心

管理员管理

员工管理

注：我们可以看到员工号为2005的员工年龄只有21但入职时间却为1975年（不符合常理），这是因为使用mockjs模拟数据时间是随机生成的，没有将入职时间与年龄先做一个约束处理导致。

三、项目目录

四、重要知识点总结

4.1 路由的封装

本项目我使用的是3.2.0版本

npm i vue-router@3.2.0

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
   
        path: '/',
        redirect: '/login'
    },
    {
   
        path: '/login',
        name: 'Login',
        component: () => import('../views/Login.vue')
    },
    {
   
        path: '/frame',
        name: 'Frame',
        component: () => import('../components/Frame.vue'),
        redirect: '/home',
        children: [
            {
   
                path: '/home',
                name: 'Home',
                component: () => import('../views/Home.vue')
            },
            {
   
                path: '/personal',
                name: 'Personal',
                component: