Vue主页面的创建

1、搭建组件面，引入Layout.vue页面

在app.vue里面渲染页面

在layOut里面加入（上，左，中）组件

<template>
  <div>
      <!-- 这里不使用驼峰，而使用横杠方便观看 -->
      <!-- 注意：AppHeader可以改写成 app-header,但是Appheader不能改写成 app-header-->
    <app-header></app-header>
    <app-navber></app-navber>
    <app-main></app-main>
   
  </div>
</template>

<script>
import AppHeader from "./Appheader";
import AppNavber from "./Appnavber";
import AppMain from "./Appmain";
export default {
  data() {
    return {};
  },

  components: {
    AppHeader,
    AppNavber,
    AppMain
  },

  methods: {}
};
</script>

<style >
.header {
  position: absolute;
  line-height: 50px;
  background-color: #2d3a6b;
  top: 0px;
  left: 0px;
  right: 0px;
}
.navber {
  position: absolute;
  background-color: #545c64;
  top: 50px;
  left: 0px;
  bottom: 0px;
  width: 200px;
  /* 滚动条自动 */
  overflow-y: auto;
}
.main {
  position: absolute;
  left: 200px;
  /* 内部框框距离 */
  top: 50px;
  padding: 10px;
  right: 0px;
  overflow-y: auto;
  bottom: 0px;
  /* background-color: rebeccapurple; */
}
</style>

header下面创建的index.vue

<template>
  <div class="header">
    <a href>
      <img class="logo" src="@/assets/logo.png" alt width="30px" />
      <span class="company">会员管理系统</span>
    </a>
    <!-- 出发时间   -->
    <el-dropdown  @command="handleCommand">
      <span class="el-dropdown-link">
        下拉菜单
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-edit"  command="a">修改密码</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-check" command="b">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {},

  methods: {
    handleCommand(command){
      alert(command)
    }
  }
};
</script>


<style scoped>
.logo {
  vertical-align: middle;
  padding: 0px 10px 0 40px;
}
.company {
  position: absolute;
  color: aliceblue;
}
/* 下拉菜单展示效果 */
.el-dropdown {
  float: right;
  /* color: aliceblue; */
  margin-right: 20px;
}
.el-dropdown-link {
  color: white;
  /* 定义放上去手的形状 */
  cursor: pointer;
}
</style>

其中右边的是饿了么组件

 <el-dropdown  @command="handleCommand">
      <span class="el-dropdown-link">
        下拉菜单
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-edit"  command="a">修改密码</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-check" command="b">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

 @command="handleCommand"是绑定下面的方法

创建Appnavber文件夹，里面创建index.vue文件

注意：之所以创建的都是index.vue，因为引入vue的时候会自动识别 import AppNavber from "./Appnavber";自动识别下面的index.vue

<template>
  <div class="navber">
    <!--  default-active="2"默认选中2-->
    <!--  
      :router="true"表示开启路由，当开启路由后 index指向路由地址 
    
    -->
    <el-menu
      default-active="/"
      class="el-menu-vertical-demo"
      
      :router="true"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="/home">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="/member/">
        <i class="el-icon-menu"></i>
        <span slot="title">会员管理</span>
      </el-menu-item>
      <el-menu-item index="/supplier/">
        <i class="el-icon-menu"></i>
        <span slot="title">供应商管理</span>
      </el-menu-item>
      <el-menu-item index="/goods/">
        <i class="el-icon-menu"></i>
        <span slot="title">商品管理</span>
      </el-menu-item>
      <el-menu-item index="/staff/">
        <i class="el-icon-menu"></i>
        <span slot="title">员工管理</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},
  methods: {
   
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
     
  }
};
</script>

<style scoped>
/* border:none表示边框没有 */
.el-menu{
  border: none;
}
</style>

左边的菜单栏也是采用的element UI
注意几个

  :router="true"这个是打开路由

index="/home"这个就是跳转的路由，当点击首页时候，页面转到

      <el-menu-item index="/home">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>

接下来在views下面创建路由页面（首页,商品管理，供应商管理。。。）

在appmain也就是中间的大框框下面渲染页面（）

现在的效果如下

实现人员路由效果和边框

样式说明

这个是饿了么UI带阴影的框框

  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

边框圆弧

 border-radius: 4px;

内边距20px

  /* padding是内边距 */
  padding: 20px;

这个如果路由地址是/home，则不显示v-show不显示

 v-show="$route.path!=='/home'" 

拿到路由中的meta中title的内容

$route.meta.title

将上面导航栏的组件抽取出来，独立一个组件

<template>
  <div>
          <!-- v-show="$route.path!=='/home'"表示首页没有这些 -->
    <el-breadcrumb   v-show="$route.path!=='/home'"         separator="/">
    <!-- $route.meta.title这个是拿到路由的meta -->
    <!-- :to="{ path:$route.path }"跳转的路由 -->
        <el-breadcrumb-item  class="line"     :to="{ path:$route.path }">{{$route.meta.title}}</el-breadcrumb-item>
       
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },

  components: {},

  methods: {}
}
</script>

<style scoped>
.el-breadcrumb{
  height: 10px;
  /* padding是内边距 */
  padding: 20px;
  /* 圆滑度  */
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
.line{
  border-left: 3px solid green;
  padding-left: 10px;
}
</style>