从零开始，教你用Vue.js打造像知乎日报一样好看的网页

哈喽，想学做像知乎日报那样好看又好用的网页吗？告诉你，现在前端开发工具有很多，比如那个叫Vue.js的框架，简直是做网页的神器！它可以让网页的数据和样式分开，页面看起来干净整齐，而且还很漂亮。就拿知乎日报来说，大家都喜欢用它来看新闻，不就是因为好看吗？互动性也好，信息量大。那就让我来教你们如何使用Vue技术制作出这样的网页。首先安装好Node.js和Vue-cli，按照步骤操作，很快就能学会创建项目、设计界面、做组件化、搞轮播图，甚至还能学到怎么获取数据！

安装Node.js和Vue-cli

$ npm install -g vue-cli

首先要安装Node.js和Vue-cli，装好Node.js后，在控制台输个命令就可以顺便也把Vue-cli装上了。这东西对做Vue项目挺有帮助的，自带好多模板，能让你快速搞定webpack模板的项目结构。

$ vue init webpack vue-zhihudaily

创建项目结构

首先，用Vue-cli快速搭建一个Webpack模板项目，找到一个名叫’vue-zhihudaily’的文件夹作为你的基地。然后，分成首页、文章列表页和文章详情页这三部分，搞定之后就跟知乎日报差不多！

首页设计

  

    

    

  


.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.banner {
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, #ffffff, #f5f5f5);
}
.daily-list {
  width: 100%;
  height: 100%;
}

首先得搞个views文件夹放页面设计文件。在这儿再建个叫做Home的vue文件就行了。用flex调下页边距，保证页面看起来上下居中合适。页面里有俩重要的部分，banner用来show轮播图，daily-list就是文章列表。用Vue组件把它们弄漂亮点，以后维护更新也方便多了哟~

组件化开发

首先，你得在我们的源代码目录（就那个叫src的文件夹）里，建立一个叫”components”的文件夹，然后在这个文件夹里新建一个名叫”DailyItem.vue”的新东西。那这个有什么作用？它可以让我们在文章列表加载完成后，清晰地展示其中的缩略图、标题和日期等信息。而且，它还有一招绝活，就是利用类似props的方式，毫不费力地将文章的详细信息传输到组件中，这样在数据更新时，这些信息也会自动变化，真的很实用！

  

    

      
    
    

      
{{item.title}}
      
{{item.date}}
    
  


export default {
  props: ['item']
}


.daily-item {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 0 10px;
  box-sizing: border-box;
  background: #ffffff;
}
.daily-item:hover {
  cursor: pointer;
}
.thumbnail {
  width: 80px;
  height: 60px;
  margin-right: 10px;
  overflow: hidden;
}
.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.title {
  font-size: 16px;
  color: #444444;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.date {
  font-size: 12px;
  color: #999999;
}

就是说你得先给我们的DailyItem.vue小部件塞进Home.vue里头去。别忘了再用props传个名儿叫dailyList的东西过去。这样的话，dailyList就可以控制DailyItem.vue显示多少天的日报了！

轮播图实现

首先，你就把src文件夹里的Banner.vue组件弄好，然后装上Swiper插件试试看能否搞出滑动轮播效果。记得在mounted钩子函数那儿，让第一张轮播图一开始就能看到

我们把Banner.vue组件直接搬到Home.vue里，再用prop给它个bannerList，这个轮播图就搞定！

数据获取

想弄个像知乎那样的页面，能显示文章列表和动图？别急，抄知乎日报API的代码就对了！把原来的代码换个地方，放在新的api文件夹里，然后新建一个叫做zhihudaily.js的文件，这就是我们的小窝。

  

    
      
        
        
{{item.title}}
      
      

    
  


import { Swiper, SwiperSlide, Pagination } from 'swiper/dist/js/swiper.esm.js'
import 'swiper/dist/css/swiper.css'
export default {
  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        autoplay: {
          delay: 3000
        }
      }
    }
  },
  props: ['bannerList'],
  mounted () {
    Swiper.use([Pagination])
    this.$refs.mySwiper.swiper.slideTo(0)
  },
  components: {
    Swiper,
    SwiperSlide,
    Pagination
  }
}


.banner {
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, #ffffff, #f5f5f5);
}
.swiper-pagination-bullet-active {
  background-color: #ffffff;
}
.text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 16px;
  color: #ffffff;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

用async/await来处理下微博数据呗，搞定了后在Vue主页上用vue-router把这些数据变成prop，那我们就可以随时随地看更新了！

这儿，咱们就用Vue搭了个像知乎日报那种的网站，就是把功能拆成一个个小模块，比如轮播图，抓取数据什么的。这样子，想怎么改就怎么改，还能加上新的功能，而且还有Swiper、axios这种好用的工具库帮忙，干活儿速度快多了！

哥们儿，记得多学点新技术，不光要看得远，还要善于发觉新鲜事！别忘了学习这事儿，这样你在Web开发这条路上就能稳步前进！