iview中侧边菜单的使用

1首先下载iview并引入
$ npm install view-design --save
2，新建一个Vue文件，这里叫做Main.vue

<template>
<div class="layout">
   <Layout>
        <Sider hide-trigger>
            <common-aside ></common-aside>
        </Sider>
        <Layout>
            <Header>
              
            </Header>
            <Content>
                <router-view></router-view>//这个意思是根据路由显示对应vue文件
            </Content>
            <Footer>Footer</Footer>
        </Layout>
    </Layout>
</div>
</template>
<script>
    import CommonHeader from '../components/CommenHeader'
    import CommonAside from '../components/CommonAside'
    export default {
        components:{
            CommonHeader,
            CommonAside
        }
    }
</script>

3定义侧边栏的内容，在公共组件文件夹新建CommenHeader.vue和CommonAside.vue，

CommonAside.vue
<template>
    <div>
          <Menu :theme="theme2" mode="vertical" :width="width" accordion="true">
                
                <Submenu name="1">
                    <template slot="title">
                        <Icon type="ios-people" />
                        用户管理
                    </template>
                    <MenuItem name="/user/addUser" to="/user/addUser">新增用户{{width}}</MenuItem>
                  
                </Submenu>
                 <Submenu name="2">
                    <template slot="title">
                        <Icon type="ios-people" />
                        商品管理
                    </template>
                    <MenuItem name="/goods/GoodsList" to="/goods/GoodsList">商品列表</MenuItem>
                </Submenu>
               
            </Menu>
    </div>
</template>
<script>
export default {
    name:'CommonAside',
    props:{},
    data(){
        
        return{
            theme2:'dark'
        }
    },
    
    
}
</script>

4,在router.js里面

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/views/Main.vue'
import login from '@/views/login'
import AddUser from '@/views/User/AddUser.vue'
import GoodsList from '@/views/Goods/GoodsList.vue'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/login',
      name:'login',
      component:login
    },
    {
      path: '/',
      name: 'Main',
      component: Main,
      meta:{auth:true},//需要登陆才能访问
      children:[
        {
          path:'/user/addUser',
          component:AddUser
        }，
        {
          path:'/goods/AddGoods',
          component:AddGoods
        },
        {
          path:'goods/GoodsList',
          component:GoodsList,
          children:[
            {
              path:'/comment',
              name:'comment',
              component:comment
            },
            {
              path:'/Goods',
              name:'Goods',
              component:Goods
            },
            {
              path:'/shoper',
              name:'shoper',
              component:shoper
            },
            {
              path:'/update',
              name:'update',
              component:update
            }
          ]
        }
      ]
    },
    
    
  ]
})

5，新建文件夹Goods和User（要和Main.vue文件同级），Goods里新建GoodsList.vue,USer文件夹新建AddUSer.vue,