vue-element-admin项目实践（1）新增菜单

1.首先下载vue-element-admin，然后在idea导入项目，以下是项目源码结构
https://github.com/PanJiaChen/electron-vue-admin

2.配置路由
2.1在src/router/module下新建组件TestMenu.js

/** When your routing table is too long, you can split it into small modules **/

import Layout from '@/layout'

const TestMenuRouter = {
  path: '/Test',
  component: Layout,
  redirect: '/Test',
  name: 'Test',
  meta: {
    title: '测试',
    icon: 'table'
  },
  children: [
    {
      path: '/TestMenu1',
      component: () => import('@/views/TestMenu/menu1'),
      name: 'TestMenu1',
      meta: { title: '测试1', icon: 'edit' }
    },
    {
      path: '/TestMenu2',
      component: () => import('@/views/TestMenu/menu2'),
      name: 'TestMenu2',
      meta: { title: '测试2', icon: 'edit' }
    }
  ]
}
export default TestMenuRouter

2.2在src/router/index.js引入新建组件，并且在常量中配置相关的内容

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const constantRoutes = [
  {
    ...
  TestMenuRouter,
  }
]
export const asyncRoutes = [
  {
	}
]
const createRouter = () => new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})
const router = createRouter()
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}
export default router

3.新增页面：menu1.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，进行测试，能正常看见页面，新建菜单成功