简书

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情

通过 vue-cli 脚手架工具，初始化项目，命名为 jianshu；

（1） 、在 components 目录下创建 Header.vue 组件、List.vue 组件、Recommend.vue 组件；

(2） 、在 src 目录先新建 page 文件夹，在 page 文件夹下新建 Home.vue 组件；

(3） 、img 文件夹（提供）、api 文件夹（提供）、iconfont 文件夹（提供）放在 static 目录下；

编写头部组件 Header.vue，

                 <template>
   <div class="header">
<ul>
  <li><img src="../../public/images/logo.png" alt="" /></li>
  <li class="text">
    <p>
      <router-link class="blacks" exact-active-class="active" to="/first4"
        >首页</router-link
      >
    </p>
    <p>
      <router-link class="blacks" exact-active-class="active" to="/first3"
        >下载App</router-link
      >
    </p>
  </li>
  <li class="search">
    <input type="text" placeholder="搜索" />
    <span class="iconfont">&#xe60c;</span>
  </li>
  <li class="login">
    <router-link exact-active-class="active" class="huise" to="/first2">登录</router-link>
  </li>
  <li class="login_a"><span class="iconfont huise" >&#xe636;</span></li>
  <li class="registered">
    <!-- 注册 -->
    <p>
      <router-link  class="zhuce" exact-active-class="active" to="/first1"
        >注册</router-link
      >
    </p>
  </li>
  <li class="last">
    <p>
      <router-link class="iconfont" exact-active-class="active" to="//"
        >&#xe61b; 写文章</router-link
      >
    </p>
  </li>
</ul>
  </div>
    </template>

 <script>
  export default {};
  </script>

  <style scoped>
   
   ul {
   display: flex;
    border-bottom: 1px solid #eeeeee;
     width: 1160px;
  }
   ul > li:first-child {
    margin-left: 30px;
  }
   ul > li {
    height: 40px;
          line-height: 40px;
   margin-top: 5px;
  }
 ul > li > img {
   width: 60px;
   height: 36px;
   }
  ul > li > input {
    border: none;
   background: #eeeeee;
    padding: 4px 0 4px 10px;
    border-radius: 12px;
      outline: none;
  }
    .search {
     position: relative;
  }
  .search > span {
     position: absolute;
    right: 10px;
 }
  .header ul .login {
     font-size: 14px;
    margin-left: 370px;
    margin-right: 20px;
   }
   .login_a a {
     font-size: 14px;
     /* margin: 0 100px 0 30px; */
 }
      display: flex;
   font-size: 14px;
   margin-left: 110px;
  }
    .text > p:nth-of-type(2) {
   margin: 0 50px 0 50px;
  }
.registered,
   .last {
line-height: 26px;
    margin-top: 10px;
  }
  .registered {
   margin-left: 45px;
}
.registered > p {
       border: 1px solid tomato;
     padding: 0 12px;
      border-radius: 16px;
     font-size: 12px;
   }        
   .last > p {
    background: tomato;
   padding: 0 12px;
       border-radius: 12px;
    font-size: 12px;
    margin-left: 25px;
 }
   .last > p > span {
   font-size: 12px;
    }
  .last .iconfont{
     color: white;
   }
   .registered{
       color: #ccc;
   }
   .iconfont {
     font-size: 12px;
  }

  .zhuce{
   color: tomato;
    }
    .huise{
color: #ccc;
   }
    .blacks{
color: black;
    }
     .header a{
text-decoration: none;
   }
   a.active {
  color: tomato;
 }
   </style>
   

4.编写列表组件 List.vue

                     <template>
     <div class="main">
<div class="main_left">
  <div class="img">
    <img src="../../public/images/home.png" alt="" />
  </div>
  <ul>
    <li v-for="(item, index) in list" :key="item.id">
      <div class="left">
        <p>{{ item.title }}</p>
        <p>{{ item.desc }}</p>
      </div>
      <div>
        <img :src="item.imgUrl" alt="" />
      </div>
    </li>
  </ul>
</div>

</div>
   </template>

  <script>
  export default {
    name: "List",
      props: ["list"],
  };
   </script>

  <style scoped>

  .img {
   margin-left: 190px;
     margin-top: 30px;
   }
   .img > img {
width: 590px;
    border-radius: 10px;
 }
  ul > li {
    width: 590px;
   border-bottom: 1px solid #ccc;
  margin-left: 190px;
   display: flex;
   height: 94px;
     justify-content: space-between;
 }

 ul > li img {
   width: 130px;
     margin-top: 5px;
  }
             .left > p:nth-of-type(1) {
    font-size: 18px;
       font-weight: bolder;
     line-height: 44px;
   margin-left: 3px;
 }
  .left > p:last-child {
    font-size: 12px;
    color: rgb(131, 130, 130);
     margin-left: 3px;
    }

     </style> 
     
     

5.编写推荐组件 Recommend.vue

                    <template>
      <div class="main_right"> 
  <div><img src="../../public/images/recom01.png" alt=""></div>
    <div><img src="../../public/images/recom02.png" alt=""></div>
    <div><img src="../../public/images/recom03.png" alt=""></div>
    <div><img src="../../public/images/recom04.png" alt=""></div>
  </div>
    </template>

 <script>
 export default {};
      </script>

      <style>
 .main_right{
margin-left: 50px;
      margin-top: 30px;
  }
   .main_right img{
    width: 220px;
  }
   </style>