element plus 封装 request vue element封装组件

组件封装的步骤

1、确定组件结构
2、新增组件页面
3、修改新增的组件页面和HOME页面
4、HOME文件引入模块
5、测试

【注】完成之前没做完的准备工作
因为以前写文件名都是采用驼峰法写，采用的是小写开头，但据观察VUE文件普遍采用的是大写开头，所以要把所有vue文件的文件名都改成大写开头，并在router/index.js中修改

组件结构

【注】你也可以不将Home文件另存为，个人习惯问题

新增文件并修改页面

Header.vue

1、将原来homePage/Home.vue页面中的

复制到Header.vue中。

2、将涉及参数和方法复制到Header.vue中：

<script>
import mock from '@/mock/index.js';

export default {
  data () {
    return {
     user: {
        name: "penghl",
        avatar: "/static/user_avatar_default.png", //用户默认头像地址
        role: "超级管理员"
      }, //用户名
      // userAvatUrl: "/static/user_avatar_default.png", 
      isCollapse: false
    }
  },
  mounted(){
    var user = sessionStorage.getItem("user"); //用户信息加载
    if (user) {
       = user;
      this.user.avatar = require("@/assets/img/penghl.jpg"); //可否修改成本地目录？
    }
  },

  methods: {
     // 侧边栏折叠
    collapseChage() {
      this.isCollapse = !this.isCollapse;
    },

    // 用户退出登录
    logout: function() {
      this.$confirm ("确认退出吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          sessionStorage.removeItem("user");
          this.$router.push("/login");
        })
        .catch(() => {});
    }


  }
}
</script>

3、将涉及到的scss复制到Header.vue中或者复制到对应的scss，并引入：

<style src="./Header.scss"  lang="scss"></style>

Header.scss

/* 各种变量  */
@import "./src/assets/layout"; 

/* 各种宽高 */
$--header-height: 48px !default; //顶部的高度


/* 顶部 */
.el-header {
    background-color: $--color-white;
    // height: $--header-height !important;
    line-height: $--header-height;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .05);
    overflow: hidden;
    padding: 0 $--lenght-xll;
    
    .asibe-btn {
        font-size: $--font-size-extra-large;

        &:hover {
            color: $--color-primary;
        }
    }

    .user-info {
        float: right;
        padding-right: $--lenght-xs;

        .el-avatar {
            position: relative;
            top: 8px;
            margin-right: $--lenght-s;
        }
    }
}

采用相同的方法完成SideBar.vue, Main.vue。

4、 将原来homePage/Home.vue页面另存为,存到view目录下，并修改页面代码为：

<template>
  <el-container :style="{ height: clientHeight + 'px' }">
     <!-- 侧边栏 -->
      <SideBar></SideBar>
    <el-container :direction ="conDirection">
       <!-- 头部区域 -->
      <Header></Header>
      <!-- 主内容区域 -->
      <Main></Main>

    </el-container>
  </el-container>
</template>

在 引入之前做好的模块，并删除与当前页面无关的代码

import SideBar from "./common/sideBar/SideBar"
import Header from "./common/header/Header"
import Main from "./common/main/Main"

export default {
  name: 'Home',
  components:{
        SideBar,
        Header,
        Main
  },

  data () {
    return {
      clientHeight:'', //el-container 的高度
      conDirection: 'vertical' //el-container对齐方式,不设置这个页面布局会出错
    }
  },

  mounted(){
    this.initHeight(); // 计算el-container 的高度
  },

  methods: {
    //获取高度
    initHeight(){  
        //获取浏览器可视区域高度
        this.clientHeight =  window.innerHeight;
        // console.log(this.clientHeight);

        window.onresize = () => {  //当窗口或框架发生改变时触发
          this.clientHeight =  window.innerHeight;
          // console.log(this.clientHeight);
        };
    }
  }

}
</script>

<style lang="scss"></style>

因为我们修改了Home.vue文件的存放目录，所以需要在router/index.js进行修改。若没有修改，则无需调整。

5、 封装面包屑

在views/common/中新建一个文件夹，用于存放面包屑组件：

打开views/common/mian/Main.vue文件，复制内容到面包屑组件中

<template>
    <el-breadcrumb separator="/" style="margin-bottom: 24px">
      <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
      <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
      {{item.name}}</el-breadcrumb-item>
    </el-breadcrumb>

</template>

<script>

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

<style  lang="scss">

</style>

修改Main.vue，引入面包屑组件

6、 封装主体路由

用同样的方法封装路由，并修改Main.vue

测试

重启项目，测试是否和原来一样。