标签：npm vue name admin prop 菜单栏 label id

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

　　1、下载运行

# 克隆项目
git clone https://github.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

标签：npm,vue,name,admin,prop,菜单栏,label,id
来源： https://www.cnblogs.com/CNLuminous/p/14376513.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。