仿喵喵电影总结一：封装公用组件

前言

本次记录的是一个使用技术栈vue的一个仿喵喵电影，我首先大概的介绍一下本次项目实现的功能模块有登录注册，搜索模块，城市切换模块，电影模块，详情模块，定位模块，使用better-scroll来做上拉刷新的功能。主要使用到的存储方法有本地存储和使用vuex来存储数据，和使用keep-alive缓存，减轻服务的负担，当然这个也是，性能优化的其中之一，这也是非常受面试官青睐的，本次最大的难点在我看来是切换城市显示对应的电影及定位问题。

关于接口

现在前后端分离，脱离后端服务的话前端数据是显示不出来的，会出现跨域的现象，在显示开发中，跨域问题大部分都是后端来解决，后端解决起来比较方便，面试的时候有些面试官会纠结于如何解决跨域，前端解决跨域的方法我遇到最多的是使用代理的方法

创建如下文件然后这是在喵喵电影中使用代理解决跨域的

代码如下：

module.exports = {
    devServer : {
        proxy : {
            '/api2' : {
                target : 'http://localhost:3000',
                changeOrigin : true
            },
            '/api' : {
                target : 'http://39.97.33.178',
                changeOrigin : true
            }
        }
    }
}

代码解析如下（代写）：

设置全局过滤器的方法

Vue.filter('setWH',(url , arg)=>{
    return url.replace(/w\.h/,arg);
});

使用全局过滤器的方法

<img :src="item.img | setWH('128.180')">

如何设置全局组件及使用方法如下:

全局组件一：封装better-scorll

在真实的开发中组价的复用的使用时非常常见的，比如说多个地方用到Better-scroll，这个时候不需要每个文件都复制相同的代码，可以将better-scorll封装一个组件或者全局组件，在使用的时候直接使用即可，增加代码的可读性。

 

<template>
    <div class="wrapper" ref="wrapper">
        <slot></slot>
    </div>
</template>

<script>
import BScroll from 'better-scroll';
export default {