Vue系列-创建博客首页布局-step by step

学习完Vue前端的知识后，我们就来创建一个通用的博客网站框架页面，里面所用的知识点有：

• CSS
• Vue的menu组件
• Router
  博客的框架页面如下图：
  

1.创建基本布局

首先将页面分为两个部分，左边20%，右边80%；主要用el-aside组件与el-main组件，具体组件导入请查阅Vue官网。

对应的html如下：

<template>
<!-- 总容器 -->
<el-container class="home-container" >
  <!-- 左边栏 -->
  <el-aside >
	<font color="white">aside</font>
  </el-aside>
   <!-- 内容栏 -->
  <el-main>
    main
  </el-main>

</el-container>
</template>
<script>
export default {
  name: "header",
  components: {
  },
  data(){
     return{
     }
  }
};
</script>
<style scoped>
  .home-container {
    height: 100%;
    display: flex;
  }
 .el-aside {
   background-color: 	#282b33;
   width: 20%  ! important;
  }
</style>

2. 创建头像

el-side组件中插入相关图片处理div

<template>
<!-- 总容器 -->
<el-container class="home-container" >
  <!-- 左边栏 -->
  <!-- 左边栏 -->
  <el-aside >
    <!-- logo区域 -->
    <div class="logo-postion">
      <img src="@/assets/mylogo.jpg" />
    </div>
  </el-aside>
...省略
</template>

对应的logo-postion、img样式部分定义：

  .logo-postion{
    width: 100% ;
    height: 200px;
    margin-top: 20px;
    /* 弹性布局设置元素在中心 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px; 
  }

    img {
      width: 150px;  
      height: 150px; 
      /* 设置圆角 */
      border-radius: 50%;
    }

3. 创建name

用p标签定义两段文字

  <el-aside >
    <!-- logo区域 -->
    <div class="logo-postion">
      <img src="@/assets/mylogo.jpg" />
    </div>

    <!-- 姓名部分 -->
    <p class="name-content">star</p>
    <p class="web-content">WEB DEVELOPER</p>
  </el-aside>

对应的name-content、web-content样式写在style中

  .name-content{
    font-family:'微软雅黑';
      font-weight:bolder;
    color:white;
    /* 文字居中 */
    text-align: center; 
    /* 文字大小 */  
    font-size: 40px;
    /* 与图片div距离  ！important 表时优选级最高 */
    margin-top: 5px ! important;
    margin-bottom: 0px ;
  }

  .web-content{
    font-size:10px;
    color: white;
    text-align: center;
    margin-top: 0px;
  }

3. 创建menu

首先定义menuList数组，主要存放路由，图标，菜单名，id，同时定义变量checkPath存放选中的路由

  data(){
    return{
      //左侧菜单数据
       menuList:[
            {'path':'/welcome','icon':'el-icon-user','name':'首页','id':0},
            {'path':'/about','icon':'el-icon-edit-outline','name':'文章分类','id':2},
            {'path':'/header','icon':'el-icon-share','name':'标签','id':3},
            {'path':'/789','icon':'el-icon-s-cooperation','name':'文章归档','id':4},
            {'path':'/111','icon':'el-icon-s-marketing','name':'日志','id':5}
      ],
      checkPath:'',
    }
  },

然后定义el-menu组件，用v-for循环的方式遍历创建el-menu-item组件

    <!-- 姓名部分 -->
    <p class="name-content">star</p>
    <p class="web-content">WEB DEVELOPER</p>

    <!-- menu区域 -->
    <div class="menu-postion">
      <el-menu :router=true menu-trigger="click" background-color="#282b33" active-text-color="#ffbf00" :default-active="checkPath" mode="vertical">
        <el-menu-item v-for="item in menuList" :index="item.path" :key = "item.id">
          <!-- 图标 -->
          <i :class = "item.icon"></i>
          <!-- 文本 -->
          <span >{{item.name}}</span>
        </el-menu-item>
      </el-menu>
    </div>

menu区域对应的css样式如下：

  .menu-postion{
    margin-top: 10px;
    width: 100%;
    height: 50%;
   
  }
  .el-menu{
   /* 这里一定要设置为none，不然menu边缘会有折皱 */
    border-right: none;
  }
  .el-menu-item{
    color: rgb(246, 247, 242);
    font-size: 15px;
    padding-left: 35% ! important;
    margin-top: 2px;

  }

这里会有element ui 图标无法显示问题，对应的解决办法是main.js中引入element ui 中对应图标样式，如下

//引入element ui中的字体图标
import 'element-ui/lib/theme-chalk/index.css'

会出现menu边缘不平的问题，如下图

所以一定要在menu中进行处理，将右边的border的边框大小去掉

4. 添加点击特效

为了让menu效果更突出，我们创建一个特效，就是点击菜单项，相应的字体会变大，如图选中"文章分类”，字体变大变粗

首先定义一个css特效

  .fontBigger{
    font-size: 22px;
    font-weight:bolder;
  }

再添加一个@select事件保存选中的路由到checkPath，在el-menu中定义@select=“chooseItem”

 <el-menu :router=true menu-trigger="click" background-color="#282b33" active-text-color="#ffbf00" :default-active="checkPath"
                mode="vertical" @select="chooseItem">

再定义@select事件对应的函数chooseItem，@select传参可以查看vue官网

  methods:{
    chooseItem( keyPath){
      console.log(keyPath);
      this.checkPath=keyPath;
    }
  }

对选中的el-menu-item进行判断，如果路由等于checkPath就激活特效。

<el-menu-item v-for="item in menuList" :index="item.path" :key = "item.id">
	   <!-- 图标 -->
	  <i :class = "item.icon"></i>
	  <!-- 文本 在此处添加一个判断，如果选中就使fontBigger生效 -->
	  <span :class="{'fontBigger':item.path==checkPath}" >{{item.name}}</span>
 </el-menu-item>

5. 添加路由

注意把菜单路由添加到主路由的子路由中，如下

  {
    path: "/",
    name: "Home",
    component: Home,
    children:[
      {path:'/about',component:About},
      {path:'/welcome',component:Welcome},
      
    ]
  },

最终成形效果如下：

布局完成了，后面只需要在特定子组件上编辑，然后通过路由添加到这个布局即可，希望能帮到你。如果喜欢这个布局创建方式请点赞，如果遇到问题欢迎一起讨论交流，别忘了点赞，谢谢！