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

vue工程化第三节

• 组件化开发，标题部分
• 多处用到的代码就在全局进行注册
• 优化用户体验：当网速过慢时，显示加载动画。
• 播放宣传片
• 保留组件状态，避免重新渲染 keep-alive
• 图片懒加载
• 本节完整demo

第一节

组件化开发（标题）

思想：不同种类的组件，划分不同模块

从首页进入详情页，标题文字会改变，也会多出一个返回按钮，但样式还是不变的，所以这里也可以拆分为一个组件（我不会告诉你们，是我在上一节玩忘记拆分了[/坏笑]），标题文字可以用占位符 <slot> 来解决，返回按钮的显示可以使用 v-if

搞起！

在 components 文件夹下新建组件 pageTitle.vue ，然后把标题部分拆分出来：

<template>
  <div class="pageTitle">
    <div class="goback" v-if='showBack'  @click="$router.back()">
      <img src="@/assets/img/back.png" >
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
    name: 'pageTitle',
    props: ['showBack'] // 通过这个属性确定是否显示返回图标
}
</script>

<style lang="scss" scoped>
.pageTitle {
    height: 51px;
    width: 100%;
    background-color: rgb(229, 72, 71);
    text-align: center;
    line-height: 51px;
    color: #fff;
    font-size: 1.1em;
    >.goback {
        position: absolute;
        left: 12px;
        top: 8px;
        >img {
            width: 35px;
        }
    }
}
</style>

而这个组件会被多个页面使用，所以进行全局注册

在 main.js 中：

// ...
import pageTitle from './components/pageTitle'
// 注册全局组件
Vue.component('pageTitle',pageTitle)
// ...

然后就可以在其它页面使用啦

在 index.vue 中进行如下修改，不会显示返回按钮：

在 movieDetail.vue 中加入以下代码，参数不懂的看前两节

到这里，这个标题组件已经拆分完成。

加载动画组件

加载动画也算是一个单独的组件，但它不属于页面中的某一板块，这种组件可以再划分成一个组件模块，为这些组件也创建一个文件夹（因为这个项目不大，也可以不用划分的这么细，直接把他写到 components 里面，但这里主要介绍做项目的一个思想，这可能也与个人习惯有关） 。 如下：

然后，写代码：

<template>
  <div>
    <div class="loading-bg">
      <img class="loading" src="../assets/img/loading.gif">
    </div>
  </div>
</template>
<script>
export default {
  name: "loading"
};
</script>
<style lang='scss' scoped>
// ...样式参考demo
</style>

因为它也会在多个页面中使用，所以把它也在 main.js 中注册为全局组件，然后就可以在其它页面中使用了。现在是不是已经对组件和组件化开发清晰了很多。

把它放在热映页，看一下效果：

emm，虽然不是那么精致，但效果还是实现了。但它一直在转圈圈啊，所以，要控制它一下。

（其实我觉得上面这个动图做loading样式也不错 [/斜眼笑] ）

然后，代码搞起：

// 在需要使用这个组件的页面中加入一个标记，这里以hoting为例
<template>
  <div>
      <!-- isReady: 数据加载好了就不显示loading动画 -->
     <loading v-if="!isReady"></loading>
    <div class="hoting">
      <movie-list v-for="(h_item,index) in hotList" :key="index" :mitem="h_item"></movie-list>
    </div>
  </div>
</template>

<script>
import movieList from "./movieList"
import axios from 'axios'

export default {
   name: "hoting",
   data() {
      return {
         isReady:false, // 记录数据是否加载完毕
         hotList: []
      };
   },
   created() {
      axios
         .get("http://www.softeem.xin/maoyanApi/ajax/movieOnInfoList")
         .then(res => {
            this.hotList = res.data.movieList;
            this.isReady=true; //数据加载完毕
         });
   },
   components: {
      movieList
   }
};

</script>

<style scoped>
</style>

这个时候把网络换成 Slow 3G 刷新页面进行测试：

ok，完成了。效果还可以呢，[🤩]

播放宣传片

这里主要用到 video 标签，通过自定义属性 showPlayVD 来控制显示播放面板。样式参考demo

<!-- 写在movieDetail.vue -->
<div class="play-vd" v-if="showPlayVD" @click="showPlayVD=false">
    <video controls autoplay :src="movieDetail.vd" width="100%"> </video>
</div>

点击显示播放面板

保留组件状态，避免重新渲染

在开发Vue项目的时候，有一部分组件是没必要多次渲染的

方式：使用 keep-alive 包裹路由组件。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。而且它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 keep-alive参考

• 首先看一下没有使用 keep-alive ，先进入详情页，然后把所有请求清空

• 然后点击返回，看一下请求回来的数据，有很多

• 现在使用 keep-alive (在App.vue文件中使用)

  <template>
    <div id="app">
      <keep-alive>
        <!-- 当前路由会被缓存 -->
        <router-view v-if="$route.meta.keepAlive"/>
      </keep-alive>
  
      <router-view v-if="!$route.meta.keepAlive"/>
    </div>
  </template>

  然后更改路由配置：

  // 路径：router/index.js
  routes: [{
              path: '/',
              name: 'index',
              component: index,
              meta:{
                  keepAlive:true // 在meta属性中设置自定义属性，为true则保留路组件状态
              }
          }
           // ...
        ]

• 这个时候随便点击一个电影的详情页，然后清空所有请求，再点击返回看一下。（我点的是调音师）

  

图片懒加载

不使用图片懒加载的情况下，会在页面第一次加载时，将所有图片资源进行加载。假设有大量图片资源需要加载，则等待加载完成会需要很长时间，极其影响用户体验。这个时候使用图片懒加载就很有必要性，它会只加载你当前屏幕中的图片资源。

需要安装 vue-lazyload 参考

npm install vue-lazyload -D

使用：

• 首先在main.js 文件中引入并使用

  // 图片懒加载
  import VueLazyload from 'vue-lazyload'
  import errorImg from '../src/assets/img/error.png'
  import loadingImg from '../src/assets/img/loading.gif'
  
  // 加载懒加载插件
  Vue.use(VueLazyload,{
    error: errorImg,
    loading: loadingImg
  })

• 然后在需要使用图片懒加载的地方，将 :src 修改为 v-lazy 即可，（这里是 movieList.vue 文件）

  

• 看一下效果

• 本节完整 demo
• 还有底部菜单，vuex，未完。。

---

第一节