奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > Element框架 >

element-ui2.0.0搭建的后台管理大框架

时间:2017-10-23 22:33来源:原创 作者:admin
技术战: vue+element+vue-router 使用element的布局和导航组件实现页面 使用vue-router实现菜单的跳转 全部源码: !DOCTYPE html html head meta charset=UTF-8 titleelement-ui2.0.0搭建的后台管理大框架/title !

技术战:
vue+element+vue-router
使用element的布局和导航组件实现页面
使用vue-router实现菜单的跳转




全部源码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>element-ui2.0.0搭建的后台管理大框架</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.0-alpha.2/theme-chalk/index.css">
  <style type="text/css">
    .hd_box{background-color:#545c64;line-height:60px; color:#fff;}
    .left_menu{height: 580px}
  </style>
</head>
<body>
  <div id="app">

  <el-container>
      <el-header class="hd_box">
        <el-row>
          <el-col :span="4"  :offset="1"><div class="grid-content " ><i class="el-icon-edit"></i> 小小后台管理</div></el-col>
          <el-col :span="14">
          <div class="grid-content ">
              <el-menu
              router="true"
              default-active="1"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
              <el-menu-item index="1" route="/user">用户管理</el-menu-item>
              <el-menu-item index="3" route="/order">订单管理</el-menu-item>
               <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">修改密码</el-menu-item>
                <el-menu-item index="2-2">退出后台</el-menu-item>
              </el-submenu>
            </el-menu>
            </div>
            </el-col>
        </el-row>

      </el-header>
      <el-container>
    <el-aside width="200px" class="left_menu">
           <el-menu
      default-active="1" router="true"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"  active-text-color="rgb(188, 140, 7)">
       
      <el-menu-item index="1" route="/user">
        <i class="el-icon-menu"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-menu-item index="2" v-for="i in 5" route="/order">
        <i class="el-icon-setting"></i>
        <span slot="title">商品管理</span>
      </el-menu-item>
    </el-menu>

    </el-aside>
      <el-main>
          <router-view>
          </router-view>
        </el-main>
    </el-container>
    </el-container>
    
  </div>

    <!-- 先引入 Vue -->
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <!-- 引入组件库 -->
  <script src="https://cdn.bootcss.com/element-ui/2.0.0-alpha.2/index.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
  <script>
  var router = new VueRouter({
      routes:[
              {
                  path:'/',
                  component:{
                      template:'<div>小小后台欢迎你</div>'
                  }
              },
              {
                  path:'/user',
                  component:{
                      template:'<div>用户管理</div>'
                  }
              },
              {
                  path:'/order',
                  component:{
                      template:'<div>订单管理</div>'
                  }
              }
      ]
  })
    new Vue({
        router,
      el: '#app',
      data: {
          },
        methods: {
          handleSelect(key, keyPath) {
            console.log(key, keyPath);
          },
           handleOpen(key, keyPath) {
            console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            console.log(key, keyPath);
          }
        }
    })
  </script>
</body>

</html> (责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-04-04 22:04