vue+iview+vuex初探(1)

聽朋友推薦說iview結合vue做後臺管理系統很不錯，然後我就研究研究了。以下是我學習過程中的一些記錄：

沒有用官方推薦的iview-cli而是用的vue-cli

起步，一系列下載後在main.js 中有如下配置：

store配置如下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: { // 驅動應用的數據源
    menus: [
      {
        'menuId': '1',
        'name': '權限管理',
        'icon': 'ios-paper',
        'subMenus': [
          {
            'menuId': '1-1',
            'name': '首頁',
            'menuUrl': 'Hello'
          },
          {
            'menuId': '1-2',
            'name': '內容頁',
            'menuUrl': 'Hello'
          }
        ]
      }, {
        'menuId': '2',
        'name': '後臺管理',
        'icon': 'ios-people',
        'subMenus': [
          {
            'menuId': '2-1',
            'name': '列表',
            'menuUrl': 'menuList'
          },
          {
            'menuId': '2-2',
            'name': '用戶',
            'menuUrl': 'menuList'
          }
        ]
      }
    ]
  }
})

然後渲染成iview的menu菜單，如下

<template>
  <Row>
    <Col span="4">
    <i-menu :theme="theme3" :open-names="['1']" accordion>
      <Submenu v-for="(item, index) in menus" :key="index" :name="item.menuId">
        <template slot="title">
          <Icon :type="item.icon"></Icon>
          {{item.name}}
        </template>
        <MenuItem v-for="(list, i) in item.subMenus" :name="list.menuId">{{list.name}}</MenuItem>
      </Submenu>
    </i-menu>
    </Col>
  </Row>  
</template>

<script>
export default {
  data () {
    return {
      theme3: 'dark',
      menus: ''
    }
  },
  mounted () {
    this.menus = this.$store.state.menus
   // console.log(this.$store.state.menus)
  }
}
</script>