调整

src/api/global/index.js

+import { Http } from '@/http'
+class Global extends Http {
+  getMenus (params) {
+    return this.get('getMenus', params)
+  }
+}
+
+export default new Global(true)

src/api/index.js

+import global from './global'
+
+export const globalApi = global

src/components/Header/index.vue

 <template lang="pug">
   el-container.header-container
-    nav.header-nav
+    nav.header-nav.clear
       ul.clear
-        li.nav-item.fl
+        li.nav-item.fl('@click'="handleShowMemus('show',$event)")
           a.link
             i.fa.fa-th-list
         li.nav-item.fl
@@ -24,6 +24,30 @@
         li.nav-item.fr
           a.link
             i.fa.fa-comments
+      el-row.meuns-nav
+        el-menu&attributes({
+          'default-active':"2",
+          'class':"el-menu-vertical",
+          '@open':"handleOpen",
+          '@close':"handleClose",
+        })
+          el-submenu.menus-body.clear(index="1")
+            el-menu-item-group.menus-groups.fl('v-for'="(item,index) in menus",':key'="index")
+              template(slot="title")
+                .main-menus
+                  i(class="fa",':class'="item.ico", style={'margin-right':'5px'})
+                  span.main-menus-title {{item.name}}
+              el-menu-item&attributes({
+                ':index':"idx | pipeString(index)",
+                'v-for':'(it,idx) in item.children',
+                ':key':"idx"
+              }) {{it.name}}
+                el-menu-item-group.menus-tags('v-for'="(i,inx) in it.children",':key'="inx")
+                  <!--template(slot="title") {{i.name}}-->
+                  el-menu-item&attributes({
+                    ':index':"inx | pipeString(index,idx)",
+                    ':key':"inx"
+                  }) {{i.name}}
 </template>
 <style lang="stylus">
   .header-container
@@ -32,11 +56,14 @@
     right 0
     top 0
     z-index 99
-    box-shadow 0px 1px 1px rgba(0,0,0,.2)
+    box-shadow 0 1px 1px rgba(0,0,0,.2)
   .header-nav
-    background #EDEDED
+    position relative
+    background #ededed
     width 100%
-    padding-left 70px
+    margin-left  70px
+    .el-submenu__title
+      display none
     .nav-item
       display inline-block
       position relative
@@ -57,6 +84,22 @@
     margin-left 15px
 </style>
 <style lang="stylus" scoped>
+  .meuns-nav
+    position absolute
+    left 0
+    right 0
+    bottom 0
+    top 70px
+    z-index 9
+  .menus-body
+    display flex
+  .menus-groups
+    width 200px
+  .main-menus
+    color #2a3f54
+    font-size 15px
+    font-weight bold
+    text-align left
   .history-item
     line-height 1.7
     border 1px solid #73879c
@@ -66,6 +109,7 @@
     & + &
       margin-left 15px
     &:hover
+      cursor pointer
       color inherit
       border-color inherit
       background-color inherit
@@ -80,8 +124,12 @@
     margin-right 5px
   i.fa.fa-angle-down
     font-size 15px
+  .el-menu-item
+    height auto
+    line-height 1.5
 </style>
 <script>
+import { mapGetters } from 'vuex'
 export default {
   name: 'headerNav',
   data () {
@@ -98,8 +146,10 @@ export default {
       if (num) {
         return array
       }
-      console.log(array.slice(0, num))
       return array.slice(0, num)
+    },
+    pipeString (...args) {
+      return args.join('-')
     }
   },
   props: ['icon', 'link', 'type', 'id', 'sort', 'name', 'pid', 'grade'],
@@ -111,11 +161,20 @@ export default {
       } else {
         return [...historys]
       }
-    }
+    },
+    ...mapGetters({menus: 'getMenus'})
   },
   methods: {
     clickItem () {
       console.log(this)
+    },
+    handleOpen () {},
+    handleClose () {},
+    handleShowMemus (type) {
+      this.$nextTick(() => {
+        let dom = document.querySelector('.el-submenu__title')
+        dom.click()
+      })
     }
   }
 }

src/components/Sidebar/index.vue

@@ -4,7 +4,7 @@
     .sidebar('@mouseover'="showUnfoldBtn()",'@mouseout'="hiddenUnfoldBtn()")
       .logo
         img(':src'="logo")
-      .item('v-for'="(item,itemIndex) in menuList" ,':key'="item.id",'@click'='choseMenu(item,itemIndex)',':class'="{active:currentMenusIndex === itemIndex}")
+      .item('v-if'="menus.length",'v-for'="(item,itemIndex) in menus" ,':key'="item.id",'@click'='choseMenu(item,itemIndex)',':class'="{active:currentMenusIndex === itemIndex}")
         sidebar-item&attributes({
           ':icon':'item.ico',
           ':link':'item.link',
@@ -37,6 +37,7 @@
         img(class='icon-arrow',':class'="{right:!unfold}","src"='@/assets/images/sidebar/left-arrow-gray.png')
 </template>
 <script>
+import { mapGetters } from 'vuex'
 import sidebarItem from '../sidebarItem'
 const logo = require('@/assets/images/sidebar/logo-blue.png')
 export default {
@@ -46,11 +47,8 @@ export default {
       currentRouteIndex: 0,
       logo,
       unfold: false, // 水平展开
-      menus: [],
       unfoldBtn: false, // 展开按钮
-      currentMenus: null,
-      currentMenusIndex: -1,
-      menuList: []
+      currentMenusIndex: -1
     }
   },
   filters: {
@@ -64,14 +62,15 @@ export default {
   components: {
     sidebarItem
   },
-  mounted () {
-    this.axios.get('http://rap2api.taobao.org/app/mock/115626/getMenus').then(res => {
-      this.menuList = res.data.data
-      this.currentMenus = this.menuList[0]
-    })
-  },
+  mounted () {},
   computed: {
-
+    ...mapGetters({menus: 'getMenus'}),
+    currentMenus: {
+      get () {
+        const currentIndex = this.currentMenusIndex
+        return currentIndex === -1 ? this.getCurrentMenus(0) : this.getCurrentMenus(currentIndex)
+      }
+    }
   },
   created () {
   },
@@ -80,7 +79,6 @@ export default {
      * 选择边测菜单主菜单
      */
     choseMenu (selectItem, selectItemIndex) {
-      this.currentMenus = selectItem
       this.currentMenusIndex = selectItemIndex
       if (!this.unfold) {
         this.toggleUnfold(true)
@@ -114,6 +112,9 @@ export default {
     },
     choseSubChildren (...args) {
       console.log(args)
+    },
+    getCurrentMenus (index) {
+      return this.menus[index]
     }
   }
 }

src/plugin/http/baseHttp.js → src/http/index.js

 import axios from 'axios'
 // import qs from 'qs'
 import store from '@/store'
-import config from '../../config/index'
+import config from '../config/index'
 // Add a request interceptor
 axios.interceptors.request.use(function (config) {
   // Do something before request is sent
@@ -33,7 +33,7 @@ const api = axios.create({
 })
 
 const mockApi = axios.create({
-  baseURL: 'http://rap2api.taobao.org/app/mock/115626'
+  baseURL: 'http://rap2api.taobao.org/app/mock/115626/'
 })
 
 api.interceptors.request.use(function (config) {

src/main.js

@@ -7,14 +7,13 @@ import ElementUI from 'element-ui'
 import './assets/styles/reset.css'
 import './assets/styles/common.css'
 import 'element-ui/lib/theme-chalk/index.css'
+import store from './store'
 import Axios from 'axios'
 import * as filters from './filters'
-import { http } from './plugin'
 // 引入echarts
 import echarts from 'echarts'
 
 Vue.use(ElementUI)
-Vue.use(http)
 Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
 })
@@ -27,6 +26,7 @@ Vue.prototype.$echarts = echarts
 new Vue({
   el: '#app',
   router,
+  store,
   components: { App },
   template: '<App/>'
 })

src/mixin/common/index.js

+export const stringFilter = {
+  filter: {
+    pipeString (...args) {
+      return args.join('-')
+    }
+  }
+}

src/mixin/index.js

+import { stringFilter } from './common'
+
+export const stringFilterMixin = stringFilter

src/pages/home/index.vue

@@ -14,12 +14,21 @@
   </div>
 </template>
 <script>
+import { mapActions } from 'vuex'
 import HomeSidebar from 'components/Sidebar'
 import HomeHeader from 'components/Header'
 export default {
   components: {
     HomeSidebar,
     HomeHeader
+  },
+  created () {
+    this.getMenus()
+  },
+  methods: {
+    ...mapActions([
+      'getMenus'
+    ])
   }
 }
 </script>

src/plugin/http/index.js

-import { Http } from './baseHttp'
-
-class HttpService {
-  install (Vue, options) {
-    // 4. 添加实例方法
-    Vue.prototype.$Http = Http
-  }
-}
-
-export default new HttpService()

src/plugin/index.js

 import momentPlugin from './moment'
 import utils from './underscore'
-import http from './http'
+import http from '../http'
 export {
   momentPlugin,
   utils,

src/store/global/actions.js

-import * as types from './mutations_types'
-
-export default {
-  show_loading: ({
-    commit
-  }) => {
-    return new Promise((resolve, reject) => {
-      commit(types.SHOW_LOADING)
-      resolve()
-    })
-  },
-
-  hide_loading: ({
-    commit
-  }) => {
-    return new Promise((resolve, reject) => {
-      commit(types.HIDE_LOADING)
-      resolve()
-    })
-  }
-}

src/store/global/getters.js

-export default {
-  getLoadStatus (state) {
-    return state.ajax_loading
-  }
-}

src/store/global/index.js

-import state from './state'
-import mutations from './mutations'
-import getters from './getters'
-import actions from './actions'
+import { globalApi } from '@/api'
+
+// 获取菜单数据
+const GET_MEUMS = 'GET_MEUMS'
+
+const state = {
+  menus: []
+}
+
+const actions = {
+  async getMenus ({
+    commit, dispatch
+  }, parmas) {
+    let res = await globalApi.getMenus(parmas)
+    let menus = res.data.data
+    commit(GET_MEUMS, menus)
+  }
+}
+
+const getters = {
+  getMenus (state) {
+    return state.menus
+  }
+}
+
+const mutations = {
+  [GET_MEUMS] (state, menus) {
+    state.menus = menus
+  }
+}
 
 export default {
   state,
   mutations,
-  getters,
-  actions
+  actions,
+  getters
 }

src/store/global/mutations.js

-import * as types from './mutations_types'
-
-// import { store } from 'utils/'
-
-export default {
-  [types.SHOW_LOADING] (state) {
-    state.ajax_loading = true
-  },
-
-  [types.HIDE_LOADING] (state) {
-    state.ajax_loading = false
-  }
-}

src/store/global/mutations_types.js

-// 显示加载
-export const SHOW_LOADING = 'SHOW_LOADING'
-
-// 关闭加载
-export const HIDE_LOADING = 'HIDE_LOADING'

src/store/global/state.js

-export default {
-  ajax_loading: false
-}

src/store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
-import * as actions from './actions'
-import * as getters from './getters'
-import state from './state'
-import mutations from './mutations'
-import createLogger from 'vuex/dist/logger'
 
+import createLogger from 'vuex/dist/logger'
+import global from './global'
 Vue.use(Vuex)
 
 const debug = process.env.NODE_ENV !== 'production'
 
 export default new Vuex.Store({
-  actions,
-  getters,
-  state,
-  mutations,
+  modules: {
+    global
+  },
   strict: debug,
   plugins: debug ? [createLogger()] : []
 })