vue学习中的问题总结

1、使用vue ui界面创建vue项目

1.1、选择项目管理器，进入项目管理界面

1.2、点击创建新项目

1.3、编写项目名

 1.4、选择手动配置项目，进入下一步

1.5、选择功能，进入下一步

1.6、勾选历史模式、以vue2.0启动

 1.7、根据自己需求选择是否保存预设

 1.8、创建项目中，耐心等待

 1.9、启动项目

 1.10、访问项目

1.11、成功访问 

2、v-for遍历

在使用v-for遍历生成菜单时，每一个<el-submenu>都需要有一个key和index，如果没有key项目会启动失败，如果没有index，点击某一个一级菜单，其他一级菜单也会展开、关闭。

且key和index都是不建议重复的，所以在编写代码时一定要注意。

2.1、index.js代码

const routes = [
    {
        id: '1',
        path: '/',
        name: '导航一',
        component: PageOne,
        children: [
            {
                id: '1-1',
                path: '/pageOne',
                name: '页面一',
                component: PageOne
            },
            {
                id: '1-2',
                path: '/pageTwo',
                name: '页面二',
                component: PageTwo
            }
        ]
    },
    {
      id: '2',
      path: '/navigation',
        name: '导航二',
        component: PageThree,
        children: [
            {
                id: '2-1',
                path: '/pageThree',
                name: '页面三',
                component: PageThree
            }, {
                id: '2-2',
                path: '/pageFour',
                name: '页面四',
                component: PageFour
            }
        ]
    }
]

 2.2、App.vue代码

<el-menu>

          <el-submenu v-for="(item,index) in $router.options.routes" :key="item.id" :index="index+''">
              <template slot="title" ><i class="el-icon-message"></i>{{item.name}}</template>
              <el-menu-item v-for="(item2,index) in item.children" :key="item2.id" :index="index+'-'+index2">{{item2.name}}</el-menu-item>
          </el-submenu>

</el-menu>