Vue를 사용하여 Zhihu Daily와 유사한 페이지 디자인을 구현하는 방법은 무엇입니까?

Vue.js는 MVVM 패턴을 기반으로 하는 프런트 엔드 프레임워크로, 데이터 바인딩 및 구성 요소화를 통해 데이터와 UI 페이지를 분리하여 웹 개발을 더욱 효율적이고 간단하게 만듭니다. Zhihu Daily는 아름다운 UI 디자인, 강력한 상호 작용성 및 콘텐츠 다양성을 갖춘 뉴스 클라이언트입니다. 이 기사에서는 Vue 기술을 사용하여 Zhihu Daily를 모방한 페이지 디자인을 구현해 보겠습니다.

1. 환경 구축

시작하기 전에 Node.js와 Vue-cli를 설치해야 합니다. Node.js를 설치한 후 명령줄 도구를 사용하여 터미널에서 다음 명령을 실행하여 Vue-cli를 설치하세요.

$ npm install -g vue-cli

설치가 완료된 후 Vue-cli를 사용하여 webpack 템플릿을 기반으로 프로젝트를 생성하세요.

$ vue init webpack vue-zhihudaily

이 시점에서 새 프로젝트를 생성하면 몇 가지 질문(프로젝트 이름, 설명, 작성자, eslint 코드 사양이 필요한지 여부 등)을 묻고 나면 vue-zhihudaily라는 폴더가 현재 디렉터리에 다음과 같이 생성됩니다. 프로젝트 루트 디렉터리.

2. 페이지 레이아웃

Zhihu Daily에서는 주로 홈페이지, 기사 목록 페이지, 기사 세부정보 페이지의 세 페이지로 나뉩니다. 여기서는 홈페이지를 예로 들어 보겠습니다. src 폴더에 인터페이스 파일을 저장할 views 폴더를 만듭니다. 다음 코드를 사용하여 Home.vue 파일을 만듭니다.

<template>
  <div class="home">
    <div class="banner"></div>
    <div class="daily-list"></div>
  </div>
</template>

<style scoped>
.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%;
}
</style>

여기에서는 플렉스 레이아웃을 사용하여 페이지를 세로로 가운데에 배치합니다. 그 중 배너는 캐러셀 이미지를 표시하는 데 사용되고 Daily-list는 기사 목록을 표시하는 데 사용됩니다.

3. 컴포넌트 사용

재사용 및 유지 관리를 용이하게 하기 위해 Vue 컴포넌트화를 사용하여 인터페이스를 구축합니다. src 폴더에 컴포넌트 파일을 저장할 컴포넌트 폴더를 생성합니다. 그 안에 DailyItem.vue라는 파일을 만듭니다.

<template>
  <div class="daily-item">
    <div class="thumbnail">
      <img :src="item.images[0]" alt="">
    </div>
    <div class="info">
      <div class="title">{{item.title}}</div>
      <div class="date">{{item.date}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['item']
}
</script>

<style scoped>
.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;
}
</style>

DailyItem.vue는 기사 썸네일, 제목, 날짜를 포함하여 기사 목록의 정보를 표시하는 데 사용됩니다. 여기서는 기사 정보를 구성 요소에 전달하기 위해 props 속성을 사용합니다. Home.vue에서 DailyItem.vue 구성 요소를 사용하고 daily-list를 다음으로 바꾸세요.

<div class="daily-list">
  <daily-item v-for="(item, index) in dailyList" :key="index" :item="item"></daily-item>
</div>

일일 보고서가 여러 개 있는 경우 이 구성 요소는 각 일일 보고서에 대해 DailyItem.vue를 자동으로 렌더링합니다. 상위 컴포넌트 홈에서 props를 통해 dailyList를 하위 컴포넌트 DailyItem.vue에 전달합니다.

4. 캐러셀 차트 구현

Zhihu Daily를 모방한 캐러셀 차트는 이 페이지의 중요한 부분입니다. src 폴더에서 Banner.vue라는 구성 요소를 만듭니다.

<template>
  <div class="banner">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item, index) in bannerList" :key="index">
        <img :src="item.image" alt="">
        <div class="text">{{item.title}}</div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
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
  }
}
</script>

<style scoped>
.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;
}
</style>

Banner.vue에서는 Swiper 타사 라이브러리를 사용하여 회전식 차트를 만듭니다. 마운트된 후크 함수에서 swiper.slideTo(0)를 호출하여 초기 페이지가 첫 번째 캐러셀 이미지임을 인식합니다.

Home.vue에서 Banner.vue 구성 요소를 사용하세요.

<div class="banner">
  <banner :bannerList="bannerList"></banner>
</div>

여기서 props를 사용하여 배너 목록을 Banner.vue 구성 요소에 전달하세요.

5. 데이터 수집

Zhihu Daily에서 홈페이지는 기사 목록과 캐러셀 이미지를 표시해야 합니다. 우리는 캐러셀 차트와 기사 목록의 데이터를 얻기 위해 Zhihu Daily API에 대한 GET 요청을 시작하기 위해 axios 라이브러리를 사용합니다. src 폴더 아래에 api라는 폴더를 만들고 그 안에 zhihudaily.js 파일을 만듭니다.

import axios from 'axios'

// 轮播图 API
const bannerApi = 'https://news-at.zhihu.com/api/4/news/latest'

// 文章列表 API
const articleListApi = 'https://news-at.zhihu.com/api/4/news/before/'

export default {
  // 获取轮播图
  async getBanner () {
    const { data } = await axios.get(bannerApi)
    return data.top_stories
  },

  // 获取文章列表
  async getArticleList (date) {
    const { data } = await axios.get(articleListApi + date)
    return data.stories
  }
}

Home.vue에서 api의 메서드를 호출하고 얻은 데이터를 해당 props에 전달합니다.

<script>
import api from '../api/zhihudaily'
import DailyItem from '../components/DailyItem.vue'
import Banner from '../components/Banner.vue'

export default {
  data () {
    return {
      bannerList: [],
      dailyList: []
    }
  },
  components: {
    DailyItem,
    Banner
  },
  async mounted () {
    this.bannerList = await api.getBanner()
    this.dailyList = await api.getArticleList('')
  }
}
</script>

Async를 통해 /await 구문을 사용하면 필요한 데이터를 비동기식으로 얻을 수 있어 페이지가 더 효율적으로 만들어집니다.

6. 결론

이 기사에서는 Vue 기술을 사용하여 구성 요소, 캐러셀 차트, 데이터 수집 및 기타 지식 포인트를 포함하는 Zhihu Daily와 유사한 페이지 디자인을 구현했습니다. 구성 요소 기반 개발을 통해 개발자는 코드를 더 효과적으로 유지 관리하고 확장할 수 있으며, 타사 라이브러리(예: Swiper, axios)를 사용하여 기능을 신속하게 구현하여 개발 효율성을 높일 수 있습니다.

지속적으로 지식 기반을 확장하고, 시야를 넓히고, 계속 탐색하여 웹 개발의 길로 더 나아갈 수 있습니다.

위 내용은 Vue를 사용하여 Zhihu Daily와 유사한 페이지 디자인을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!