vue工程化第三节

组件化开发，标题部分

多处用到的代码就在全局进行注册

优化用户体验：当网速过慢时，显示加载动画。

播放宣传片

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

图片懒加载

本节完整demo

第一节

组件化开发（标题）

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

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

搞起！

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

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

在 main.js 中：

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

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

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

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

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

加载动画组件

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

然后，写代码：

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

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

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

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

然后，代码搞起：

// 在需要使用这个组件的页面中加入一个标记，这里以hoting为例

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

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

播放宣传片

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

点击显示播放面板

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

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

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

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

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

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

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

然后更改路由配置：

// 路径：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，未完。。

第一节

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