从零搭建自己的Vue管理端框架（四）

Hello大家好，本章我们创建Home页侧边栏，中间显示区域 。有问题可以联系我mr_beany@163.com。另求各路大神指点，感谢

一：创建新页面用于跳转

创建static→css→common.css

h2{
  margin: 0;
}
li {
  list-style: none
}
.disFlex {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}
.padding{
  padding: 20px;
}


::-webkit-scrollbar
{
  width: 10px;
  height: 10px;
  background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #ccc;
}

修改main.js  引入css

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import router from './router'
//引入自己的通用css
import '../static/css/common.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
}) 

创建page→Index.vue

<template>
  <div>
    <div style="text-align: center;margin-bottom: 20px">
      <h2>欢迎使用MyVue</h2>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    created: function () {

    },
    methods: {},
    components:{
    }
  }
</script>
<style>
</style> 

创建page→user→user.vue

<template>
  <div>
    <div style="border-radius: 5px;padding: 5px;">
      <el-table
        :data="userData"
        stripe
        style="width: 100%">
        <el-table-column
          align="center"
          prop="name"
          label="姓名">
        </el-table-column>
        <el-table-column
          align="center"
          prop="sex"
          :formatter	="sexFilterFun"
          label="性别">
        </el-table-column>
        <el-table-column
          align="center"
          prop="age"
          label="年龄">
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small">详情</el-button>
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" style="color: #f56c6c">禁用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        userData: [
          {name: "张三", sex: 0, age: 23, address: "辽宁大连中山"},
          {name: "李四", sex: 0, age: 23, address: "辽宁大连中山"},
          {name: "王五", sex: 0, age: 23, address: "辽宁大连中山"}
        ]
      }
    },
    created: function () {
    },
    methods: {
      sexFilterFun(row, column, cellValue, index){
       return cellValue == 0 ? '男':'女';
      }
    }
  }
</script>

<style scoped>
</style>

其中el-table标签等为elementui表格的基础用法。

修改src→router→index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/page/Home'
import Login from '@/page/Login'
import Index from '@/page/Index'
import User from '@/page/user/user'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Login
    },
    {
      path: '/home',
      component: Home,
      //这里注意
      children: [
        {path: "", component: Index},
        {path:"/user", component:User}
      ]
    }
  ]
}) 

注意：其中设置路由时，需配置children属性，将路由设为Home页得子路由。

二：修改Home.vue

<template>
  <div style="height: 100%;background: #283542;background-size: 100%">
    <div class="header-div disFlex">
      <el-tooltip class="item" effect="light" content="返回首页" placement="right">
        <div class="header-div-left disFlex">
          <span class="user-name">MyVue</span>
        </div>
      </el-tooltip>
      <div class="disFlex header-div-right">
        <div style="padding: 0px 10px;">
          <img src="../images/userHeaderImg.png" style="width: 25px;"/>
        </div>
        <div>
          <span>{{userName}}</span>
        </div>
      </div>
    </div>
    <div class="disFlex" style="height: calc(100% - 90px);padding:0 15px;">
      <div class="menu-list-div">
        <div v-for="(menu,index) in menuList" :key="menu.id">
          <div @click="showMenu(index)" class="menu-list-bgc disFlex">
            <div style="width: 80%;">
              <span>{{menu.menuName}}</span>
            </div>
            <div style="width: 20%;text-align: right;">
              <i class="el-icon-arrow-right"
                 :class="[menu.isOpen == 1?'rotate':'rotate1']"
                 v-if="menu.adminMenuList.length > 0"></i>
            </div>
          </div>
          <el-collapse-transition>
            <div v-show="menu.isOpen==1">
              <!--router-link 类似于HTML中a标签，用于页面跳转  其中to属性为需要跳转的路径-->
              <router-link tag="li" :to="menuSon.query == undefined? menuSon.path : menuSon.path + menuSon.query"
                           v-for="(menuSon,index1) in menu.adminMenuList"
                           :key="menuSon.id">
                <div class="menuSon-list-bgc"
                     @click="showMenuSon(index,index1)"
                     :class="[menuSon.isOpen==1?'menuSon-list-color':'menuSon-list-color1']">
                  <span>{{menuSon.menuName}}</span>
                </div>
              </router-link>
            </div>
          </el-collapse-transition>
        </div>
      </div>
      <div style="width: 100%;margin-left: 20px;">
        <!--重点   类似于HTML中iframe 路由跳转页面在这里展示-->
        <router-view class="routerView" :key="$route.fullPath"></router-view>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //菜单列表
        menuList: [],
        //当前登陆的用户名称
        userName: '',
      }
    },
    created: function () {
      //模拟登陆成功获取当前用户权限菜单
      this.getMenuList();
      this.userName = "MyVue";
    },
    methods: {
      getMenuList(){
        this.menuList = [
          {
            menuName: "用户管理", isOpen: 0,
            adminMenuList: [
              {menuName: "查看用户", isOpen: 0, path: "/user"}
            ]
          }
        ];
      },
      showMenu(index) {
        this.menuList.forEach(function (item, i) {
          if (i === index) {
            return;
          }
          item.isOpen = 0;
        })
        this.menuList[index].isOpen = this.menuList[index].isOpen === 1 ? 0 : 1;
        var menu = this.menuList[index];
        menu.adminMenuList.forEach(function (item, i) {
          menu.adminMenuList[i].isOpen = 0;
        })
      },
      showMenuSon(index, index1) {
        var menu = this.menuList[index];
        menu.adminMenuList.forEach(function (item, i) {
          if (i != index1) {
            menu.adminMenuList[i].isOpen = 0;
          } else {
            menu.adminMenuList[i].isOpen = 1;
          }
        })
      },
      closeMenu() {
        this.menuList.forEach(function (item) {
          this.isOpen = 0;
        })
      },
    }
  }
</script>
<style>
  a {
    color: #fff;
  }

  .header-div {
    background-color: #2C3E50;
    color: #fff;
    height: 70px;
    align-items: center;
    box-shadow: 3px 0 3px rgba(0, 0, 0, .3);
    padding-left: 10px;
    margin-bottom: 20px;
  }

  .header-div-left {
    align-items: center;
  }

  .header-div-left:hover {
    cursor: pointer;
  }

  .header-div-right {
    align-items: center;
    width: calc(100% - 120px);
    justify-content: flex-end;
  }

  .header-div-right :hover {
    cursor: pointer;
  }

  .user-name {
    margin-left: 10px;
    font-weight: bold;
    font-size: 20px
  }

  .menu-list-div {
    width: 12%;
    max-width: 190px;
    height: calc(100% - 30px);
    background-color: #2C3E50;
    font-size: 16px;
    border-radius: 5px;
    padding: 5px;
    overflow-y: auto;
  }

  .menu-list-bgc {
    background-color: #2C3E50;
    color: #fff;
    align-items: center;
    padding: 15px;
    cursor: pointer;
  }

  .menuSon-list-bgc {
    margin-top: 5px;
    background-color: #2C3E50;
    padding: 10px 15px 10px 30px;
    border-radius: 5px;
  }

  .menuSon-list-color {
    background-color: #21598f;
    color: #fff;
    border-left: 4px solid;
    cursor: pointer;
  }

  .menuSon-list-color1 {
    margin-top: 5px;
    color: #fff;
    padding: 10px 15px 10px 34px;
    cursor: pointer;
  }

  .routerView {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    height: calc(100% - 20px);
    border: 0;
  }
</style> 

三：启动项目，测试

cmd进到项目根目录下，执行npm run dev

浏览器输入localhost:8080，输入任意账号密码登陆

项目地址

gitee.com/beany/myVue

github.com/MyBeany/myV…

写文章不易，如对您有帮助，请帮忙点下star

结尾

搭建创建Home页侧边栏，中间显示区域已完成，后续功能接下来陆续更新，有问题可以联系我mr_beany@163.com。另求各路大神指点，感谢大家。