如何将HTML/CSS/JS代码转换为Vue3组件（基于Vite+Axios）

1. 项目准备 #

确保你的Vite Vue3项目已安装Axios：

npm install axios
# 或
yarn add axios

2. 创建组件（src/components/MovieSelector.vue） #

采用Vue3 <script setup> 语法，用响应式数据替代原生DOM操作，Vue指令按视图逻辑合理放置：

<template>
  <div class="movie-container">
    <h1 class="title">Choose a movie from the dropdown <br> menu and press Get for movies: </h1>

    <div class="selector">
      <!-- v-model绑定选中值，替代原生DOM获取 -->
      <select v-model="selectedMovie" name="Movies">
        <option value="">Choose a Movie:</option>
        <option value="divergent">Divergent</option>
        <option value="the adam project">The Adam Project</option>
        <option value="batman">Batman</option>
        <option value="superman">Superman</option>
        <option value="starwars">Starwars</option>
        <option value="hunger games">Hunger Games</option>
        <option value="the maze runner">The Maze Runner</option>
        <option value="spiderman">Spiderman</option>
        <option value="bird box">Bird Box</option>
        <option value="don't look up">Don't Look Up</option>
      </select>

      <!-- @click绑定方法，替代原生onclick -->
      <button class="button" @click="getMovies"> Get </button>

      <!-- v-if判断数据是否存在，有数据才渲染内容 -->
      <div v-if="currentMovie && trailerKey" id="movieInfo">
        <p>{{ currentMovie.title }} -- {{ currentMovie.overview }} -- {{ currentMovie.release_date }}</p>
        <img :src="`https://image.tmdb.org/t/p/w500${currentMovie.poster_path}`" alt="Movie Poster">
        <iframe :src="`https://www.youtube.com/embed/${trailerKey}`" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref } from 'vue'

// 定义响应式变量，存储选中值、电影数据、预告片key
const selectedMovie = ref('')
const currentMovie = ref(null)
const trailerKey = ref(null)

const API_KEY = "c6b2390c3ab4bfbd0e064d952df483c9"

// 封装请求方法
const fetchData = async (url, params) => {
  try {
    return await axios.get(url, { params })
  } catch (error) {
    console.error('请求失败:', error)
  }
}

const getMovies = async () => {
  // 清空旧数据
  currentMovie.value = null
  trailerKey.value = null

  if (!selectedMovie.value) return

  // 搜索电影
  const movieRes = await fetchData("https://api.themoviedb.org/3/search/movie", {
    api_key: API_KEY,
    query: selectedMovie.value
  })

  if (!movieRes?.data?.results?.length) return

  const targetMovie = movieRes.data.results[0]
  // 获取电影详情及预告片
  const detailRes = await fetchData(`https://api.themoviedb.org/3/movie/${targetMovie.id}`, {
    api_key: API_KEY,
    append_to_response: "videos"
  })

  // 筛选预告片
  const trailer = detailRes.data.videos.results.find(video => video.type === "Trailer")
  if (trailer) {
    currentMovie.value = targetMovie
    trailerKey.value = trailer.key
  }
}
</script>

<style scoped>
.title {
  color: black;
  text-align: center;
  font-size: 65px;
  font-family:'Times New Roman', Times, serif
}

.movie-container {
  background-color: lavender;
  min-height: 100vh;
  text-align: center;
  font-size: 20px;
}

p {
  color: black;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}  

img {
  width: 200px;
  aspect-ratio: 2 / 3;
}

iframe {
  aspect-ratio: 16 / 9;
  height: 300px;
}
</style>

3. 样式迁移说明 #

原CSS中的body样式被移到组件根容器.movie-container上，避免全局样式污染。如果需要全局背景色，也可以将background-color: lavender放到src/App.vue的