1、clm-admin重构

.env.dev

+NODE_ENV = 'dev'
+VUE_APP_TITLE = 'dev'
+VUE_APP_One = 'http://xxx.xxx.xxx.xx'
\ No newline at end of file

.env.pro

+NODE_ENV = 'pro'
+VUE_APP_TITLE = 'pro'
+VUE_APP_One = 'http://xxx.xxx.xxx.xx'
\ No newline at end of file

src/components/Footer.vue

+<template>
+    <div class="footer-wrap">
+        这是底部
+    </div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

src/components/Header.vue

+<template>
+  <div class="header-wrap">
+    <img class="qida-logo" src="../assets/qida_logo.png">
+    <i class="y-axis"></i>
+    <a-button class="back-old" type="default">回到旧版</a-button>
+    <div class="msg-wrap">
+      <span class="iconfont iconnotification"></span>
+      <div class="animate-wrap">
+        <div class="animate">消息通知消息通知消息通知消息通知消息通知消息消息通知消息通知消息通知消息通知消息通知消息消息通知消息通知消息通知消息通知消息通知消息消息通知消息通知消息通知消息通知消息通知消息</div>
+      </div>
+    </div>
+    <a-button type="default" class="back-clm" >
+      前往学员端
+    </a-button>
+    <div class="user-wrap">
+      <a-popover trigger="click" placement="bottomRight" :getPopupContainer="
+        triggerNode => {
+          return triggerNode.parentNode;
+        }
+      ">
+        <template #content>
+          <a-button class="user-popover">退出登陆</a-button>
+        </template>
+        <a-button type="default">
+          <span class="iconfont iconUser"></span>
+          <span class="user-name">493514152@qq.com493514152@qq.com493514152@qq.com493514152@qq.com</span>
+          <span class="iconfont icontriangle-bottom"></span>
+        </a-button>
+      </a-popover>
+    </div>
+    <i class="y-axis y-axis-right"></i>
+    <a-button type="default" class="user-detail">
+      账户信息
+    </a-button>
+  </div>
+</template>
+<style lang="less" scoped>
+@import url('../css/iconfont/iconfont.css');
+.header-wrap {
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 53px;
+  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.24);
+  border: 1px solid rgba(255, 255, 255, 100);
+  box-sizing: border-box;
+  position: relative;
+  color: #101010;
+  & > * {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .qida-logo {
+    display: inline-block;
+    height: 25px;
+    position: absolute;
+    left: 32px;
+  }
+  .y-axis {
+    display: inline-block;
+    height: 9px;
+    width: 1px;
+    border: 1px solid rgba(11, 130, 219, 100);
+    left: 125px;
+  }
+  .back-old {
+    width: 80px;
+    height: 21px;
+    line-height: 20px;
+    border-radius: 4px;
+    font-size: 12px;
+    text-align: center;
+    font-family: PingFang SC;
+    border: 1px solid rgba(187, 187, 187, 100);
+    left: 135px;
+    cursor: pointer;
+  }
+  .msg-wrap {
+    left: 230px;
+    width: 480px;
+    height: 18px;
+    line-height: 18px;
+    border-radius: 3px;
+    background-color: rgba(245, 245, 245, 100);
+    text-align: center;
+    border: 1px solid rgba(255, 255, 255, 100);
+    text-align: left;
+    font-size: 12px;
+    color: #BDBDBD;
+    span {
+      display: inline-block;
+      position: relative;
+      top: 50%;
+      transform: translate3d( 0, -50%, 0);
+      padding: 0 13px 0 11px;
+    }
+    .animate-wrap {
+      display: inline-block;
+      position: absolute;
+      width: 430px;
+      top: 50%;
+      transform: translate3d( 0, -50%, 0);
+      overflow: hidden;
+      .animate {
+        padding-left: 20px;
+        font-size: 12px;
+        display: inline-block;
+        white-space: nowrap;
+        animation: 40s wordsLoop linear infinite normal;
+      }
+      @keyframes wordsLoop {
+        0% {
+            transform: translateX(430px);
+            -webkit-transform: translateX(430px);
+        }
+        100% {
+            transform: translateX(-100%);
+            -webkit-transform: translateX(-100%);
+        }
+      }
+      @-webkit-keyframes wordsLoop {
+        0% {
+            transform: translateX(430px);
+            -webkit-transform: translateX(430px);
+        }
+        100% {
+            transform: translateX(-100%);
+            -webkit-transform: translateX(-100%);
+        }
+      }
+    }
+  }
+  .back-clm{
+    right: 408px;
+    width: 80px;
+    height: 21px;
+    padding: 0;
+    border-radius: 4px;
+    font-size: 12px;
+    text-align: center;
+    font-family: PingFang SC;
+    cursor: pointer;
+    border: 1px solid rgba(187, 187, 187, 100);
+  }
+  .user-wrap{
+    right: 178px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 185px;
+    height: 30px;
+    line-height: 30px;
+    font-size: 12px;
+    cursor: pointer;
+    .ant-btn {
+      border: none;
+      & > * {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      .iconUser {
+        font-size: 18px;
+        padding: 0 5px;
+      }
+      .user-name {
+        width: 135px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .icontriangle-bottom {
+        font-size: 12px;
+        padding: 0 5px;
+      }
+    }
+    .user-popover {
+      width: 180px;
+      text-align: left;
+    }
+  }
+  .y-axis-right {
+    right: 142px;
+    left: unset;
+  }
+  .user-detail{
+    right: 16px;
+    width: 110px;
+    height: 28px;
+    line-height: 28px;
+    border-radius: 4px;
+    font-size: 14px;
+    text-align: center;
+    font-family: PingFang SC;
+    cursor: pointer;
+    border: 1px solid #bbbbbb;
+  }
+}
+</style>

src/components/LeftNav.vue

+<template>
+    <nav class="left-nav-wrap">
+        <div class="company-name">{{company}}</div>
+        <div class="nav-list">
+            <a-menu
+                mode="inline"
+                :openKeys="openKeys"
+                v-model:selectedKeys="selectedKeys"
+                style="width: 100%"
+                @openChange="onOpenChange"
+                @select="select"
+            >
+                <a-sub-menu :key="item.id" v-for="(item) in menus" >
+                    <template #title>
+                        <span> <i class="iconfont iconquanquanb"></i> <span class="sub-name">{{item.name}}</span></span>
+                    </template>
+                    <a-menu-item :key="sub.id" v-for="(sub) in item.items">{{sub.name}}</a-menu-item>
+                    <!-- <a-menu-item key="10">学习地图</a-menu-item>
+                    <a-menu-item key="11">直播</a-menu-item>
+                    <a-menu-item key="12">考试</a-menu-item>
+                    <a-menu-item key="13">混合培训</a-menu-item> -->
+                </a-sub-menu>
+                <!-- <a-sub-menu key="sub2">
+                    <template #title>
+                        <span> <i class="iconfont iconquanquanb"></i> <span class="sub-name">资源管理</span></span>
+                    </template>
+                    <a-menu-item key="4">课程资源</a-menu-item>
+                    <a-menu-item key="5">学习计划</a-menu-item>
+                    <a-menu-item key="6">考试资料</a-menu-item>
+                    <a-menu-item key="7">个人成就</a-menu-item>
+                    <a-menu-item key="8">应用</a-menu-item>
+                </a-sub-menu>
+                <a-sub-menu key="sub1">
+                    <template #title>
+                        <span> <i class="iconfont iconquanquanb"></i> <span class="sub-name">组织管理</span></span>
+                    </template>
+                    <a-menu-item key="1">学员管理</a-menu-item>
+                    <a-menu-item key="2">管理员</a-menu-item>
+                    <a-menu-item key="3">讲师管理</a-menu-item>
+                </a-sub-menu> -->
+            </a-menu>
+        </div>
+    </nav>
+</template>
+
+<script>
+export default {
+  props: {
+    company: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      menus: [
+        {
+          name: '任务派发',
+          id: 'top1',
+          items: [
+            { name: '学习项目', id: '1', route: '/s1' },
+            { name: '学习地图', id: '2', route: '/s2' },
+            { name: '直播', id: '3', route: '/s3' },
+            { name: '考试', id: '4', route: '/s4' },
+            { name: '混合培训', id: '5', route: '/s5' }
+          ]
+        },
+        {
+          name: '资源管理',
+          id: 'top2',
+          items: [
+            { name: '课程资源', id: '6', route: '/s6' },
+            { name: '学习计划', id: '7', route: '/s7' },
+            { name: '考试资料', id: '8', route: '/s8' },
+            { name: '个人成就', id: '9', route: '/s9' },
+            { name: '应用', id: '10', route: '/s10' }
+          ]
+        },
+        {
+          name: '组织管理',
+          id: 'top3',
+          items: [
+            { name: '学员管理', id: '11', route: '/traineeManage' },
+            { name: '管理员', id: '12', route: '/admin' },
+            { name: '讲师管理', id: '13', route: '/s13' }
+          ]
+        }
+      ],
+      routes: {},
+      rootSubmenuKeys: [],
+      selectedKeys: [],
+      openKeys: []
+    }
+  },
+  mounted () {
+    this.$router.isReady().then(() => {
+      console.log(this.$router)
+      const currentRoute = this.$router.currentRoute.value.path
+      this.menus.forEach((item) => {
+        this.rootSubmenuKeys.push(item.id)
+        item.items.forEach((sub) => {
+          if (sub.route === currentRoute) {
+            this.selectedKeys.push(sub.id)
+            this.openKeys.push(item.id)
+          }
+          this.routes[sub.id] = sub.route
+        })
+      })
+    })
+  },
+  methods: {
+    onOpenChange (openKeys) {
+      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
+      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
+        this.openKeys = openKeys
+      } else {
+        this.openKeys = latestOpenKey ? [latestOpenKey] : []
+      }
+    },
+    select (e) {
+      const [key] = e.selectedKeys
+      this.$router.push(this.routes[key])
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import url('../css/iconfont/iconfont.css');
+.left-nav-wrap {
+    width: 100%;
+    height: 100%;
+    .company-name {
+        width: 100%;
+        text-align: center;
+        height: 47px;
+        line-height: 47px;
+        background-color: rgba(189, 189, 189, 100);
+        font-size: 16px;
+        font-weight: bold;
+    }
+    .nav-list {
+        .iconquanquanb {
+            font-size: 12px;
+            font-weight: normal;
+        }
+        .sub-name {
+            display: inline-block;
+            height: 100%;
+            width: 20px;
+            &::after {
+                content: "";
+                width: 100%;
+                height: 2px;
+                background: #C3C3C3 100%;
+                position: absolute;
+                bottom: -1px;
+                left: 40px;
+            }
+        }
+        ::v-deep .ant-menu-submenu-title {
+            height: 58px;
+            margin: 0;
+            line-height: 58px;
+            font-size: 16px;
+            font-weight: bold;
+            background: #D2D2D2 100%;
+        }
+        ::v-deep .ant-menu-submenu-selected {
+            .ant-menu-submenu-title {
+                background:#C3C3C3 100%;
+            }
+        }
+        ::v-deep .ant-menu-item {
+            margin: 0;
+            height: 54px;
+            line-height: 54px;
+            font-size: 16px;
+            background: #E3E3E3 100%;
+            &::after {
+                content: "";
+                width: 100%;
+                height: 2px;
+                background:#D0D0D0 100%;
+                position: absolute;
+                bottom: -1px;
+                left: 40px;
+                top: unset;
+                right: unset;
+                border:none;
+                transform: unset;
+                opacity: 1;
+                transition: unset;
+            }
+        }
+    }
+}
+</style>

src/components/RightNav.vue

+<template>
+  <div class="nav-list">
+    <a-menu v-model:selectedKeys="current" mode="horizontal">
+      <a-menu-item key="mail"> 学员管理 </a-menu-item>
+      <a-menu-item key="app"> 部门管理 </a-menu-item>
+    </a-menu>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      current: ['mail']
+    }
+  }
+}
+</script>

src/components/RightNavSlot.vue

+<template>
+    <div class="rifht-nav-wrap">
+        <div class="right-nav">
+            <RightNav></RightNav>
+        </div>
+        <div class="right-content-wrap">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+<script>
+import RightNav from './RightNav'
+export default {
+  components: {
+    RightNav
+  }
+}
+</script>
+<style lang="less" scoped>
+@nav-item-height: 58px;
+@right-nav-height: 60px;
+@right-nav-margin-bottom: 10px;
+.rifht-nav-wrap{
+    width: 100%;
+    height: 100%;
+    .right-nav {
+        width: 100%;
+        height: @right-nav-height;
+        line-height: @right-nav-height;
+        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
+        border: 1px solid rgba(255, 255, 255, 100);
+        margin-bottom: @right-nav-margin-bottom;
+        ::v-deep .nav-list {
+            height: 100%;
+            .ant-menu-horizontal{
+                line-height: @nav-item-height;
+            }
+            .ant-menu {
+                font-size: 16px;
+            }
+        }
+    }
+    .right-content-wrap {
+        height: calc(100% - @right-nav-height -  @right-nav-margin-bottom);
+        width: 100%;
+        background: red;
+    }
+}
+
+</style>

src/css/iconfont/iconfont.css

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1605576180830'); /* IE9 */
+  src: url('iconfont.eot?t=1605576180830#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAU8AAsAAAAACewAAATwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDQAqGXIVuATYCJAMYCw4ABCAFhG0HZBuoCBEVpMGQ/QGyIRvoS1Jju+ulJqUQ385vecMmhuoIjrxz3wGxhRGQAAAAAADB8/3a79znKx8xj3SxpImET8cbHvFolUqliUVCpHsm75De+3e9FExeAW90UilJQWeqqKndOkLY9KH9P4horM3e3qs0FQhdNJtIJpOIVEjZLTRvABm+fwHwv2s7XEu50rDQqOIpmieTUMWi2t/2WALvB5tLTbomKleP/4ShXXzSn5Lj99CfrCxAA3HbNGmAqfoPtPbdX/u1et5Fm74z7WX/mTiizRNDIkomJELaxb3eXKJUCIWQOhaxa+eqBxP4NgSIqcMU2NbhSwM3BvEiAWR1KTUeuD0pTAJXCFEXcadFjoCDYA4FtsC58fvyjyICCquIV07Nk0mg6Yv9pqiCH6MaDbirKwC3+0ADPQAMyG5kaRm1Rj0g4s/zLYNATEChvuq/4F3+m/L/ci6+AQ1iYlIpSLtcw/nH0yBOxFAK9ljQTp1bMULB58UVFQYYIfBlNsLAF02huZircG0RQLwg+2D3EAyCxmL9IiGvLhKO0uI8iQK6QjX+BrOEhCLEAHBygDYp936Mo6ImFzEFzZNrckF0Tm9yw/1LbVIzsj0Vpcm9zVtH2Syxph7MQW+iuAQp6v1LjSnnqYllER0sbR6XqioVmIGFxSgvBpOVhZhllS9NTxXPZYbo8hvpFwJNV73fG9R2uk31/dPL24aXZOcfs7hGzZ8cejPwovGHJd/S4kKsPFoqg5XLiep4sTSpbymWHy3A/kmNB8sTK71p8ScJSkDvtRESMCY9XKgA4nLRn6h0ae64l6uul/68eoj7Ce+w3l+up/oxgYK/G8ApNlIj6PSERlGF+UcYFx2f/FWQRyr+MHUR+on/Qqq/wE1bgF9fTPMzc6YoDBttd3YmSVlZkgK+xiF+JkM0EOOWPA/7yloeWCnhghrfO66oMBuUaYe6pAXcWjU73maPbwYuJJvyXoLaLY2yS5juln6WXniydZ+fcRPu6YaZmE/JyvD/oAkdgq5IQ9Y8Nwkfgm4MMWy8yTdLKfR04+trQ4GAVAIYah3a4xykDytjrDIhNhC3VLWU1a8UjVVNLk9L7J/rViiVZ94lpFGqz3k29+B02ITnjieGksMmBI1X7OBMeEvApeMpoS2ClSIXCUptEj7KaKbg1GKiPsHg6UE2/MQZQ164drih/JHIO+Et+uw1XNJO4IljAt5Jb8EnAiBLy8gIAD1s8iFbO5GOzldvGgegr832xfg3vDkjMQ1u/x8SA8DHlfqjlWmZ7OOAgpv70nNn3GG+XjHt7Ht75UwEcMzggKPputL2wCVXK+Klqkhp5gEIweO+gcJTC5pAC92we8CS0AuOQB/EdONxf0IxBShiI6CLWgKhgHVQ5PEEmgKO6Yb9DJYyfoCjQBDETIvMExPahOTNi2CnOEJ/ADtwJDmrN+bqTzQb34nba8h+UZLtQpWX/tkPjChVXJO2plYlIOEA7/Q+9J5hFp5w0HytOq+KgqKmlA8cFje8CHaKI/QHsANH0g7Xm8DPf6LZ+E4Stv04/qIke3yo8jID/SMUM23bFXLamlqVuPNIOMA7CuilEcMcfdqEg+brAoN5VbDdKGsobz4S1vIRwIv4EqcYUbHiEKe4uN7adFHp948qVscaj1nPqhzuIi2wZIdOF+mGs5+EcjFZNLxZLAA=') format('woff2'),
+  url('iconfont.woff?t=1605576180830') format('woff'),
+  url('iconfont.ttf?t=1605576180830') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1605576180830#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.iconquanquanb:before {
+  content: "\e6d4";
+}
+
+.icontriangle-bottom:before {
+  content: "\e62b";
+}
+
+.iconnotification:before {
+  content: "\e7da";
+}
+
+.iconUser:before {
+  content: "\e716";
+}
+
+.iconjiegou:before {
+  content: "\e6d3";
+}
+

src/css/iconfont/iconfont.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="quanquanb" unicode="&#59092;" d="M491.880777-74.394105c-237.529835 0-430.759721 193.240119-430.759721 430.759721 0 237.529835 193.229886 430.769954 430.759721 430.769954s430.759721-193.240119 430.759721-430.769954C922.640498 118.846014 729.410612-74.394105 491.880777-74.394105zM491.880777 726.786087c-204.250894 0-370.410238-166.168554-370.410238-370.419448 0-204.240661 166.159344-370.410238 370.410238-370.410238S862.289991 152.124955 862.289991 356.365616C862.289991 560.61651 696.131671 726.786087 491.880777 726.786087zM491.880777 171.279201c-102.056374 0-185.096648 83.030042-185.096648 185.087439s83.040275 185.087439 185.096648 185.087439 185.077206-83.030042 185.077206-185.087439S593.937151 171.279201 491.880777 171.279201zM491.880777 481.102548c-68.777433 0-124.747165-55.959499-124.747165-124.736932s55.968709-124.736932 124.747165-124.736932S616.607476 287.588183 616.607476 356.365616 560.65821 481.102548 491.880777 481.102548z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="triangle-bottom" unicode="&#58923;" d="M523.955 63.827l323.744 512c6.24 9.856 6.624 22.336 0.992 32.512-5.632 10.24-16.384 16.576-28.033 16.576h-647.328c-11.647 0-22.4-6.336-28.033-16.576-2.656-4.8-3.968-10.112-3.968-15.424 0-5.952 1.664-11.904 4.929-17.088l323.616-512c5.856-9.28 16.064-14.911 27.040-14.912s21.184 5.632 27.040 14.912z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="notification" unicode="&#59354;" d="M880 784c-3.8 0-7.7-0.7-11.6-2.3L292 550.1H128c-8.8 0-16-7.4-16-16.6v-299c0-9.2 7.2-16.6 16-16.6h101.7c-3.7-11.6-5.7-23.9-5.7-36.4 0-65.9 53.8-119.5 120-119.5 55.4 0 102.1 37.6 115.9 88.4l408.6-164.2c3.9-1.5 7.8-2.3 11.6-2.3 16.9 0 32 14.2 32 33.2V750.8C912 769.8 897 784 880 784zM344 133.7c-26.5 0-48 21.4-48 47.8 0 11.2 3.9 21.9 11 30.4l84.9-34.1c-2-24.6-22.7-44.1-47.9-44.1z m496-58.4L318.8 284.7l-12.9 5.2H184V478.1h121.9l12.9 5.2L840 692.7v-617.4z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="User" unicode="&#59158;" d="M512 384c52.8 0 96 43.2 96 96s-43.2 96-96 96c-52.768 0-96-43.2-96-96s43.232-96 96-96z m0 256a160.032 160.032 0 0 0 0-320c-88.32 0-160 71.68-160 160s71.68 160 160 160z m285.792-558.08A414.432 414.432 0 0 1 928 384c0 229.44-186.56 416-416 416S96 613.44 96 384c0-118.72 49.952-226.24 130.272-302.08 4.8 39.04 19.84 72 44.8 98.56C318.432 231.36 397.12 256 512 256c114.912 0 193.632-24.64 240.992-75.52 24.96-26.56 40-59.52 44.8-98.56z m-62.4-48.64v0.96c3.168 44.48-6.4 78.08-29.12 102.72C672 173.44 606.72 192 512 192c-94.72 0-160-18.56-194.208-55.04-22.72-24.64-32.352-58.24-29.12-102.72v-0.96A414.016 414.016 0 0 1 512-32c81.952 0 158.72 24 223.392 65.28zM512 864c264.672 0 480-215.36 480-480s-215.328-480-480-480C247.392-96 32 119.36 32 384S247.392 864 512 864z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="jiegou" unicode="&#59091;" d="M700.672 565.4016a38.4 38.4 0 0 0-38.8096-37.888h-299.1104a38.30784 38.30784 0 0 0-38.7072 37.888v98.304a38.22592 38.22592 0 0 0 38.7072 37.7856h299.1104a38.31808 38.31808 0 0 0 38.8096-37.7856v-98.304z m-384.9216-356.2496a38.2464 38.2464 0 0 1-38.7072 37.888H94.3616a38.33856 38.33856 0 0 1-38.8096-37.888v-104.8576a38.33856 38.33856 0 0 1 38.8096-37.888h182.6816a38.2464 38.2464 0 0 1 38.7072 37.888v104.8576z m326.3488 0a38.2464 38.2464 0 0 1-38.7072 37.888h-182.6816a38.33856 38.33856 0 0 1-38.8096-37.888v-104.8576a38.33856 38.33856 0 0 1 38.8096-37.888h182.6816a38.2464 38.2464 0 0 1 38.7072 37.888v104.8576z m326.4512 0a38.33856 38.33856 0 0 1-38.8096 37.888h-182.6816a38.2464 38.2464 0 0 1-38.7072-37.888v-104.8576a38.2464 38.2464 0 0 1 38.7072-37.888h182.6816a38.33856 38.33856 0 0 1 38.8096 37.888v104.8576z m-164.2496 191.8976h-273.5104v88.4736h-34.2016v-88.4736h-295.1168a51.82464 51.82464 0 0 1-52.4288-51.2v-74.0352h27.3408v74.0352a24.81152 24.81152 0 0 0 25.088 24.4736h295.1168v-98.5088h34.2016v98.5088h273.5104a24.81152 24.81152 0 0 0 25.088-24.4736v-74.0352h27.3408v74.0352a51.88608 51.88608 0 0 1-52.4288 51.2z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

src/service/contactApi.js

+const CONTACT_API = {
+  // 获取联系人列表
+  getContactList: {
+    method: 'get',
+    url: ''
+  }
+}
+export default CONTACT_API

src/service/http.js

+import axios from 'axios'
+import service from './contactApi'
+
+// service 循环遍历输出不同的请求方法
+const instance = axios.create({
+  baseURL: 'http://localhost:8080/api',
+  timeout: 1000
+})
+
+// 包裹请求
+const Http = {}
+
+for (const key in service) {
+  // url 请求相对路径
+  // method 请求方法
+  const { method, url } = service[key]
+  // async 作用：实在不想写回调地狱
+  // params 请求参数 get:url; put, post, patch(data); delete: url
+  // isFormData 是否是formData
+  // config 请求配置
+  Http[key] = async function (params, isFormData = false, config = {}) {
+    let newParams = {}
+    if (params && isFormData) {
+      newParams = new FormData()
+      for (const key in params) {
+        newParams.append(key, params[key])
+      }
+    } else {
+      newParams = params
+    }
+    // 请求返回值
+    let response = {}
+    // 不同请求的判断
+    if (method === 'put' || method === 'post' || method === 'patch') {
+      try {
+        response = await instance[method](url, newParams, config)
+      } catch (err) {
+        response = err
+      }
+    } else if (method === 'delete' || method === 'get') {
+      config.params = newParams
+      try {
+        response = await instance[method](url, newParams, config)
+      } catch (err) {
+        response = err
+      }
+    }
+    return response
+  }
+}
+
+// 请求拦截器
+instance.interceptors.request.use(config => {
+  return config
+}, err => {
+  return err
+})
+
+// 响应拦截器
+instance.interceptors.response.use(res => {
+  return res.data
+}, (err) => {
+  return err
+})
+
+export default Http

src/store/actions.js

+import * as TYPES from './types'
+const actions = {
+  [TYPES.SET_COUNT_ADD] (dispatch) {
+    console.log(dispatch)
+    dispatch.commit(TYPES.SET_COUNT_ADD, 1000)
+  },
+  [TYPES.SET_COUNT_REDUCE] (dispatch) {
+    dispatch.commit(TYPES.SET_COUNT_REDUCE, 100)
+  }
+}
+export default actions

src/store/getters.js

+const getters = {
+  docount: (state, getters) => {
+    return state.counts
+  }
+}
+export default getters

src/store/mutations.js

+import * as TYPES from './types'
+const mutations = {
+  [TYPES.SET_COUNT] (state, v) {
+    state.cout = v
+  },
+  [TYPES.SET_COUNT_ADD] (state, v) {
+    if (v) {
+      state.counts += v
+    } else {
+      state.counts++
+    }
+  },
+  [TYPES.SET_COUNT_REDUCE] (state, v) {
+    if (v) {
+      state.counts -= v
+    } else {
+      state.counts--
+    }
+  }
+}
+
+export default mutations

src/store/state.js

+const state = {
+  counts: 0
+}
+export default state

src/store/types.js

+export const SET_COUNT = 'SET_COUNT'
+export const SET_COUNT_ADD = 'SET_COUNT_ADD'
+export const SET_COUNT_REDUCE = 'SET_COUNT_REDUCE'

src/views/Admin.vue

+<template>
+    <RightNavSlot>
+      <p>管理员</p>
+    </RightNavSlot>
+</template>
+<script>
+import RightNavSlot from '../components/RightNavSlot'
+export default {
+  components: {
+    RightNavSlot
+  }
+}
+</script>

src/views/TraineeManage.vue

+<template>
+    <RightNavSlot>
+      <p>学员管理</p>
+    </RightNavSlot>
+</template>
+<script>
+import RightNavSlot from '../components/RightNavSlot'
+export default {
+  components: {
+    RightNavSlot
+  }
+}
+</script>

vue.config.js

+console.log(process.env.NODE_ENV)
+module.exports = {
+  productionSourceMap: process.env.NODE_ENV === 'dev',
+  css: {
+    extract: process.env.NODE_ENV === 'pro'
+  }
+}