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

vue工程化第三节

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

组件化开发（标题）

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

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

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

点击显示播放面板

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

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

方式：使用 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，未完。。

第一节