【vue项目实战】Vue工程化项目--猫眼电影移动端（二）

最新推荐文章于 2025-07-02 09:04:56 发布

原创

最新推荐文章于 2025-07-02 09:04:56 发布 · 1.3w 阅读

96 ·

CC 4.0 BY-SA版权

文章标签：

#vue项目实战 #vue项目工程化 #猫眼移动端 #axios #vue-router

本文是Vue工程化的第二节，主要介绍如何提高代码可复用性，实现电影详情页的跳转，以及组件化开发。通过组件化减少代码量，使用axios请求数据，通过vue-router进行路由传值。详细展示了movieList组件的创建和电影详情页的实现，以及后续章节将要涵盖的功能扩展。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue工程化第二节

添加内容和样式

使用axios请求数据，参考这里

添加局部左右滑动（即将上映页），参考（左右滑动也可使用插件）

组件化开发，相同代码可以提取出来作为一个组件来调用，减少代码量，提高代码可复用性

路由传值跳转电影详情页，参考

本节完整demo参考

第三节传送

提高代码可复用性

相同代码单独作为一个组件，提高代码可复用性。

下面两个界面的红色框框，样式和内容都差不多，可以单独作为一个组件来写。
相同部分截图

步骤：

首先在 components 下新建文件 movieList.vue ，然后写入以下代码

<template>
  <div>
    <div @click="$router.push({name:'movieDetail'})" class="movie-list">
      <div class="movie-img">
        <img :src="mitem.img.replace('w.h','128.180')" alt>
      </div>
      <div class="right-info">
        <ul class="movie-info">
          <li class="name">{
    
    {mitem.nm}}</li>
          <li v-if="mitem.globalReleased && mitem.sc!==0" class="score">
            观众评
            <span>{
    
    {mitem.sc}}</span>
          </li>
          <li style="font-size: 14px;color: #888" v-if="mitem.globalReleased && mitem.sc==0">暂无评分</li>
          <li v-if="!mitem.globalReleased" class="score">
            <span>{
    
    {mitem.wish}}</span> 想看
          </li>
          <li class="actor">{
    
    {mitem.star}}</li>
          <li class="showinfo">{
    
    {mitem.showInfo}}</li>
        </ul>
        <div class="btn">
          <</