vue+element+admin搭建自己的菜单栏

　　基于https://github.com/PanJiaChen/electron-vue-admin框架

　　1、下载运行# 克隆项目

#克隆项目
git clone https://gitee.com/panjiachen/vue-element-admin.git

#进入项目目录
cd vue-element-admin

# 安装依赖
npm install

# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 本地开发 启动项目
npm run dev

　　

　　2、配置路由

　　当用户登录成功会，会根据用户权限role算出其能具有的路由，然后动态挂载路由。这里我们我们不用管那么多，只要在他路由队列里添上我们的即可。

　　在src/router/index.js中添上自己的组件

export const asyncRoutes = [
  {

    path: '/ceshi',
    component: Layout,
    redirect: '/ceshi/biaodan',
    name: 'Ceshi',
    alwaysShow: true,//即使有一个子树，也显示根目录
    meta: {
      title: '测试',
      icon: 'table'
    },
    children: [
      {
        path: 'biaodan',
        component: () => import('@/views/ceshi/biaodan'),
        name: 'Biaodan',
        meta: { title: '表单', icon: 'edit' }
      }
    ]
  },
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/page',
    alwaysShow: true, // will always show the root menu
    name: 'Permission',//权限测试
    meta: { //页面需要的权限
      title: 'Permission',
      icon: 'lock',
      roles: ['admin', 'editor'] // you can set roles in root nav
    },

　　3、增加页面

　　目录位置(新建ceshi文件夹，新建biaodan.vue)

       src->views->ceshi->biaodan.vue

　　为了测试这段代码是摘自网上博主

<template>
  <div class="app-container documentation-container">
    <el-main>
      <el-row>
        <el-col :span='4'>
        </el-col>
        <el-col :span='20'>
          <!--设置默认打开的tab页，1.绑定v-model；2.在生命周期中设置该v-model的数据为tab页的name-->
          <!--设置type为border-card时，tab页为卡片化tab页-->
          <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane label='数据源结构' name="first">
              <!--设置tree-props，即可将表格变成树形表格，注意一点一定要设置row-key-->
              <el-table
                border
                style="width: 100%;margin-bottom: 20px;"
                :tree-props="{ hasChildren: 'hasChildren', children: 'children' }"
                :data="tableData"
                default-expand-all
                row-key="id"
              >
                <template v-for="(item,index) in tableLabel">
                  <el-table-column
                    :label='item.label'
                    :prop="item.prop"
                    align="center"
                  >
                  </el-table-column>
                </template>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="规则" name="second" >
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>
<script>
export default {
  name: 'TestMenu1',
  components: { },
  data() {
    return {
      activeName: "second",
      tableLabel:[],
      tableData:[]
    }
  },
  created(){
/*    this.activeName="second"*/
    this.getTableLabel()
    this.getTableData()
    /*通过this.$route.query来获取跳转界面的参数*/
    this.activeName=this.$route.query.pageActiveName
  },
  methods:{
    getTableData(){
      this.tableData = [
        { id: 1,
          date: "个人",
          children: [
            {
              id: 11,
              name: "*****",
              alias: "****",
              operator: "****",
              state: "****"
            }
          ]
        },
        { id: 2,
          date: "科室",
          children: []
        },
        { id: 3,
          date: "全院",
          children: [
            {
              id: 31,
              name: ".*****",
              alias: "*****",
              operator: "****",
              state: "****"
            },
            {
              id: 41,
              name: "*****",
              alias: "*****",
              operator: "******",
              state: "*****"
            }
          ]
        }
      ]
    },
    getTableLabel(){
      this.tableLabel=[
        {
          label: "级别",
          prop: "date"
        },
        {
          label: "名称",
          prop: "name"
        },
        {
          label: "别名",
          prop: "alias"
        },
        {
          label: "操作员",
          prop: "operator"
        },
        {
          label: "状态",
          prop: "state"
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.documentation-container {
  margin: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;}
  .document-btn {
    flex-shrink: 0;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    padding: 0 16px;
    margin: 16px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
</style>

　　4、运行

　　npm run dev