Vue を使用して Zhihu Daily に似たページ デザインを実装するにはどうすればよいですか?

Vue.js は、MVVM パターンに基づくフロントエンド フレームワークであり、データ バインディングとコンポーネント化を通じてデータと UI ページを分離し、Web 開発をより効率的かつシンプルにします。 Zhihu Daily は、美しい UI デザイン、強力なインタラクティブ性、コンテンツの多様性を備えたニュース クライアントです。この記事では、Vue テクノロジーを使用して、Zhihu Daily を模倣したページ デザインを実装します。

1. 環境の構築

始める前に、Node.js と Vue-cli をインストールする必要があります。 Node.js をインストールした後、コマンド ライン ツールを使用してターミナルで次のコマンドを実行し、Vue-cli をインストールします:

$ npm install -g vue-cli

インストールが完了したら、Vue-cli を使用して Webpack に基づいてプロジェクトを作成しますtemplate:

$ vue init webpack vue-zhihudaily

この時点で、新しいプロジェクトを作成すると、いくつかの質問 (プロジェクト名、説明、作成者、eslint コードの仕様が必要かどうかなど) が尋ねられ、vue- という名前のフォルダーが作成されることがわかります。 zhihudaily は、プロジェクトのルート ディレクトリとして現在のディレクトリに作成されます。

2. ページレイアウト

Zhihu Dailyでは、主にトップページ、記事一覧ページ、記事詳細ページの3つのページに分かれており、ここではトップページを例に挙げます。 。 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>

ここでは、フレックス レイアウトを使用してページを垂直方向に中央揃えにします。このうち、bannerはカルーセル画像を表示するために使用され、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 を使用して、bannerList を Banner.vue コンポーネントに渡します。

5. データ取得

Zhihu Dailyでは、トップページに記事リストとカルーセル画像を表示する必要があります。 axios ライブラリを使用して Zhihu Daily API への GET リクエストを開始し、カルーセル チャートと記事リストのデータを取得します。 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 など) を使用して機能を迅速に実装できるため、開発の効率が向上します。

継続的に知識ベースを拡大し、視野を広げ、常に探究することによってのみ、Web 開発への道をさらに進めることができます。

以上がVue を使用して Zhihu Daily に似たページ デザインを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。