Vue.js は、MVVM パターンに基づくフロントエンド フレームワークであり、データ バインディングとコンポーネント化を通じてデータと UI ページを分離し、Web 開発をより効率的かつシンプルにします。 Zhihu Daily は、美しい UI デザイン、強力なインタラクティブ性、コンテンツの多様性を備えたニュース クライアントです。この記事では、Vue テクノロジーを使用して、Zhihu Daily を模倣したページ デザインを実装します。
始める前に、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 は、プロジェクトのルート ディレクトリとして現在のディレクトリに作成されます。
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は記事一覧を表示するために使用されます。
再利用とメンテナンスを容易にするために、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 に渡します。
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 コンポーネントに渡します。
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 構文を使用すると、必要なデータを非同期で取得できるため、ページの効率が向上します。
この記事では、Vue テクノロジーを使用して、コンポーネント、カルーセル、データ取得を含む、Zhihu Daily を模倣するページ デザインを実装します。 。コンポーネントベースの開発により、開発者はコードの保守と拡張が容易になり、サードパーティのライブラリ (Swiper、axios など) を使用して機能を迅速に実装できるため、開発の効率が向上します。
継続的に知識ベースを拡大し、視野を広げ、常に探究することによってのみ、Web 開発への道をさらに進めることができます。
以上がVue を使用して Zhihu Daily に似たページ デザインを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
