完成“电影排行”vue组件的编写。 2. 在app.vue中导入并注册“电影排行”vue组件。按给定效果图完成 “热播”和“经典”选项卡，应用props参数显示“热播”和“经典”电影及其排行。 4. 完成选项卡切换效果。

非常抱歉，我作为一个AI语言模型，无法在屏幕上进行编程操作。但是，我可以为您提供一些指导，帮助您完成这个任务。

首先，您需要创建一个名为"电影排行"的Vue组件，该组件将渲染"热播"和"经典"选项卡，并显示相应的电影排名。您可以在组件中使用props来接受"热播"和"经典"电影列表，以及它们的排名。例如：

<template>
  <div>
    <div class="tab">
      <button class="tablinks" @click="openTab('hot')">热播</button>
      <button class="tablinks" @click="openTab('classic')">经典</button>
    </div>

    <div v-show="activeTab === 'hot'">
      <h2>热播电影排行：</h2>
      <ul>
        <li v-for="(movie, index) in hotList" :key="movie.name">
          {{ index + 1 }}. {{ movie.name }} - {{ movie.rank }}
        </li>
      </ul>
    </div>

    <div v-show="activeTab === 'classic'">
      <h2>经典电影排行：</h2>
      <ul>
        <li v-for="(movie, index) in classicList" :key="movie.name">
          {{ index + 1 }}. {{ movie.name }} - {{ movie.rank }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MovieRanking',
  props: {
    hotList: {
      type: Array,
      required: true
    },
    classicList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeTab: 'hot'
    }
  },
  methods: {
    openTab(tabName) {
      this.activeTab = tabName;
    }
  }
}
</script>

然后，您需要在app.vue文件中导入并注册这个组件。例如：

<template>
  <div>
    <movie-ranking :hot-list="hotMovies" :classic-list="classicMovies"></movie-ranking>
  </div>
</template>

<script>
import MovieRanking from './components/MovieRanking.vue'

export default {
  name: 'App',
  components: {
    'movie-ranking': MovieRanking
  },
  data() {
    return {
      hotMovies: [
        { name: '电影A', rank: 1 },
        { name: '电影B', rank: 2 },
        { name: '电影C', rank: 3 }
      ],
      classicMovies: [
        { name: '电影X', rank: 1 },
        { name: '电影Y', rank: 2 },
        { name: '电影Z', rank: 3 }
      ]
    }
  }
}
</script>

最后，您需要完成选项卡切换效果。您可以使用Vue的条件渲染来实现这一点。例如，在组件的模板中使用v-show指令来显示或隐藏选项卡内容。在组件的data中添加一个activeTab属性来跟踪当前选项卡，然后在openTab方法中更新它。例如：

data() {
  return {
    activeTab: 'hot'
  }
},
methods: {
  openTab(tabName) {
    this.activeTab = tabName;
  }
}

然后，在模板中使用v-show指令根据选项卡的值来显示或隐藏内容。例如：

<div v-show="activeTab === 'hot'">
  <!-- 热播电影排行 -->
</div>

<div v-show="activeTab === 'classic'">
  <!-- 经典电影排行 -->
</div>

这样就完成了Vue组件的编写和选项卡切换效果的实现。希望能帮到您！