克隆 Netflix 以提升您的前端技能

作为一名主要专注于后端的开发人员，我一直觉得我的前端技能需要一些改进。为了测试这一点，我决定通过使用 vue.js 3 和 vite 构建 netflix 克隆来挑战自己。在这篇文章中，我将分解项目结构、关键组件，并分享我的学习经验。

项目概况

目标是创建一个模仿 netflix 用户界面核心功能的响应式 web 应用程序。这是我最初打算构建的：

• 主页有多行电影，按类型分类
• 电影行平滑水平滚动
• 延迟加载图像以获得更好的性能
• 查找电影的搜索功能

未来还会添加更多内容。

技术堆栈

对于这个项目，我选择了以下工具：

立即学习“前端免费学习笔记（深入）”；

• vue.js 3：其反应系统和基于组件的架构
• vite：作为快速构建工具和开发服务器
• vue router：用于处理导航
• pinia：用于状态管理
• axios：用于向 tmdb 发出 api 请求
• @vueuse/motion：用于添加平滑的动画

项目结构

以下是项目结构的概述：

netflix-clone/
├── src/
│   ├── components/
│   │   ├── moviecard.vue
│   │   ├── movielist.vue
│   │   ├── movierow.vue
│   │   └── navbar.vue
│   ├── views/
│   │   ├── homeview.vue
│   │   ├── moviedetailview.vue
│   │   └── searchview.vue
│   ├── router/
│   │   └── index.js
│   ├── services/
│   │   └── tmdb.js
│   ├── stores/
│   │   └── movies.js
│   ├── app.vue
│   └── main.js
├── .env.example
├── vite.config.js
└── package.json

关键部件分解

电影卡.vue

该组件代表一部单独的电影。它会显示电影海报，并在悬停时显示标题、评级和发行年份等附加信息。

主要学习内容：

• 使用派生数据的计算属性
• 使用 css 过渡实现悬停效果
• 延迟加载图像以获得更好的性能

movierow.vue

此组件创建一排可水平滚动的电影，通常按类型分组。

### tmdb.js (api service)

this service handles all api calls to the movie database (tmdb) using axios.

import axios from 'axios';

const api_key = import.meta.env.vite_tmdb_api_key;
const base_url = 'https://api.themoviedb.org/3';

const tmdbapi = axios.create({
  baseurl: base_url,
  params: { api_key: api_key },
});

export const gettrending = () => tmdbapi.get('/trending/all/week');
export const getmoviesbygenre = (genreid) => tmdbapi.get('/discover/movie', { params: { with_genres: genreid } });
export const searchmovies = (query) => tmdbapi.get('/search/movie', { params: { query } });

导航栏.vue

navbar 组件为应用程序提供导航，并包含用于查找电影的搜索输入。

homeview.vue

homeview 组件作为应用程序的主页，显示多个不同类型的 movierow 组件。

搜索视图.vue

searchview 组件根据用户的查询显示搜索结果。

您可以在 github 上找到该项目的完整源代码。