基于 Vue3 的电影网站项目实战

🚀 安装与运行

环境要求

• Node.js >= 16.0.0
• npm >= 7.0.0

安装步骤

1. 克隆项目到本地

git clone https://github.com/iue2002/movie-hub.git
cd movie-hub

2. 安装项目依赖

npm install

3. 启动开发服务器

npm run dev

4. 构建生产版本

npm run build

5. 预览生产版本

npm run preview

💻 核心功能实现

首页轮播实现

首页使用 Element Plus 的 Carousel 组件实现电影轮播展示：

<template>
  <el-carousel :interval="4000" type="card">
    <el-carousel-item v-for="movie in carouselMovies" :key="movie.id">
      <img :src="movie.cover" :alt="movie.title">
      <div>
        <h3>{{ movie.title }}</h3>
        <p>{{ movie.description }}</p>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

电影卡片组件

MovieCard 组件是项目的核心 UI 组件，用于展示电影信息：

<template>
  <el-card @click="goToDetail(movie.id)">
    <img :src="movie.cover" :alt="movie.title">
    <div>
      <h3>{{ movie.title }}</h3>
      <div>
        <span>⭐ {{ movie.rating }}</span>
        <span>{{ movie.year }}</span>
      </div>
      <el-button 
        v-if="isAuthenticated" 
        @click.stop="toggleFavorite(movie)" 
        :type="isFavorite(movie.id) ? 'danger' : 'default'" 
        size="small"
      >
        {{ isFavorite(movie.id) ? '已收藏' : '收藏' }}
      </el-button>
    </div>
  </el-card>
</template>

状态管理

使用 Pinia 管理用户收藏状态：

import { defineStore } from 'pinia'

export const useFavoritesStore = defineStore('favorites', {
  state: () => ({
    favorites: []
  }),
  actions: {
    addToFavorites(movie) {
      if (!this.isFavorite(movie.id)) {
        this.favorites.push(movie)
        this.saveFavorites()
      }
    },
    removeFromFavorites(movieId) {
      this.favorites = this.favorites.filter(movie => movie.id !== movieId)
      this.saveFavorites()
    },
    isFavorite(movieId) {
      return this.favorites.some(movie => movie.id === movieId)
    },
    saveFavorites() {
      localStorage.setItem('favorites', JSON.stringify(this.favorites))
    },
    loadFavorites() {
      const saved = localStorage.getItem('favorites')
      if (saved) {
        this.favorites = JSON.parse(saved)
      }
    }
  }
})

🎨 设计亮点

渐变色彩设计

项目采用现代渐变色彩方案，营造视觉冲击力：

.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60px 0;
  color: white;
}
.movie-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

响应式布局

使用 CSS Grid 和 Flexbox 实现响应式布局：

.movies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}
@media (max-width: 768px) {
  .movies-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
  }
}

动画效果

精心设计的过渡和微交互效果：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

📸 项目展示

首页展示

• 精美的轮播图展示热门电影
• 电影推荐网格布局
• 搜索功能入口

电影列表页

• 分类浏览所有电影
• 高级搜索和筛选
• 电影卡片网格展示

电影详情页

• 详细的电影信息展示
• 演职员表
• 评分和收藏功能

用户系统

• 用户注册和登录界面
• 个人中心页面
• 收藏的电影列表管理

🎯 总结

Movie Hub 项目是一个功能完整、设计精美的电影信息展示平台。通过 Vue 3 的现代化开发方式和 Element Plus 的丰富组件，实现了优秀的用户体验。项目展示了前端开发的多个重要方面：

1. 组件化开发：合理拆分组件，提高代码复用性
2. 状态管理：使用 Pinia 进行集中式状态管理
3. 路由管理：使用 Vue Router 实现单页面应用导航
4. 响应式设计：适配不同设备屏幕尺寸
5. 用户体验：流畅的动画和交互效果

该项目适合作为 Vue 3 学习的实践案例，也可以作为实际项目的基础进行扩展开发。