Vue全家桶模仿闲鱼移动端App

官方文档介绍：Vue.js，一套渐进式的JavaScript框架，拥有简单小巧的核心，却足以应付任何规模的应用。所以，想经过模仿闲鱼移动端App来感觉一下vue的灵活与轻盈，项目仅以我的学习为目的。

话很少说，来看看效果吧（请自动忽略渣像素O(∩_∩)O）

登陆与注销

购买闲置

发布闲置

搜索功能

在线预览

线上体验： demo (ps： 浏览器f12切换移动端查看效果更佳)

源码： 源码

技术栈

• vue 页面显示
• vue-router实现spa
• vuex 组件状态共享
• axios 解决异步请求
• esay-mock 提供数据接口，使用它不会出现跨域的麻烦
• es6 代码书写优雅美观
• lrz localResizeIMG图片先压缩再上传
• webpack 文件打包
• html5 css3 内容与装饰

组件库

• mint-ui element-ui下的一款产品，打理移动端的UI特别好用，提供丰富的组件
• vue-awesome-swiper 轮播图插件，虽然mint-ui也提供了轮播图插件，可是忽然想玩一下swiper，因此我们借用一下swiper组件
• vue-region-picker china-area-data 咱们国家城市选择器组件，便于地址的管理

实现功能

• 登陆与注销
  用户进入App会有两种状态，登陆和未登陆。当你未登陆的时候，你查看的界面是有效的，在必要的时候，会提醒你进行登陆，因此，这就会产生状态的切换，那咱们要怎样来登记这个状态呢？Localstorage?能够。可是这里我使用了vuex来实现状态的共享，由于我须要保存的状态有太多了，当你的页面超过了十几个，你就能够考虑使用vuex.
• 发布闲置
  用户能够发布想要卖掉的东西，这里的核心就是在移动端设备上调用相机，调用相册，如今科技发展的太快，移动设备像素愈来愈高，随便一张照片2M+，所以解决移动端图片上传问题，能够借助lrz插件将图片按设定的的宽高压缩成base64的文件，而后经过ajax请求将图片发送给后端，进行保存。用户能够进行屡次发布，固然这也是用vuex实现的，在state里设置一个数组变量，经过数组的push方法将你发布的数据添加进去。
• 删除发布
  删除发布的难点在于咱们怎么去实现绑定在v-for渲染出来的模板上的方法，这么说可能有点绕口，简单的说，怎么知道你就是要删除某个发布。其实，解决这个疑惑，咱们就要用好v-for这个指令，它能够有index这个参数来标识当前的索引，而刚恰好，这个标识就是咱们用户选中项的索引值，因此，只要咱们把v-for指令等其余能够配合的指令用灵活，就没有什么问题解决不了。
• 购买商品
  其实购买商品跟发布闲置的思想差很少，甚至比发布还要简单，由于它没用图片上传问题，这里会有一个城市三金联动插件会用到，这也带来了不少遍历。补充一点，发布闲置和购买商品后，相应的数量值也会-1，这个也是用vuex实现的。
• 删除订单
  删除订单对应删除发布，删除以后相应的数量会减小，固然，以上些都基于你已经登陆，若是是位登陆状态是没法进行操做的。
• 撩客服
  若是你有看demo的话，那么你会注意到这里能够发送消息，并且也能够发送表情。表情的实现是个难点，我是学着GitHub上一位大佬老作的，其实每个emoji就是一张图片，只是以code的形式展示，经过正则表达式以及数组的切割方法将它以<img src=""/>的格式输出。此处实现的确有点难，可是想明白后也就理解了，若是感兴趣的话，能够看源码。

• 搜索商品
  用户输入关键字，经过ajax发送到后台数据，这里利用了字符串的indexOf()方法来判断用户输入的关键字有没有在后台返回的数据里，有的话就输出数据，没有就输出提示。

  this.axios.get('https://easy-mock.com/mock/593f72288ac26d795ff1e570/search/results')
            .then((res) => {
                let result = res.data
                console.log(result)
                for( let i in result){
                    let item = i
                    console.log(item.indexOf(this.keywords))
                    if(item.indexOf(this.keywords) !== -1){
                        this.items = result[item]
                    }
                }

• div、css3打造自定义数字键盘
  相似支付宝、银行等App都有自带的数字键盘提供给用户使用，这是怎么实现的呢？其实，div+css3+js就能帮你实现，这里不须要用input标签，由于它会带来副作用，在移动端它会唤醒你手机的自带输入法键盘，而在PC端则会容许用户输入任意的东西，显然这不是咱们想要的效果。因此，咱们就使用一个div好了，而闪烁光标用css3的animation来模拟就行啦,这样不就很像一个输入框了，剩下的逻辑控制就交给js了。一个流程下来，数字键盘的表现和功能就完成了。
• 跟随导航
  什么是跟随导航？就是随着你的滚动或滑动到某一个位置固定住的导航栏，在不少应用里都有这个需求。它的实现并非很难，就是经过window的scroll事件判断来判断滚动的距离是否大于某一个值，若是大于，就把导航元素固定在某一位置。
• 返回顶部
  这里的需求就是，用户浏览了很长的页面，但愿一键就能跑到顶部去，这个时候，就须要用到返回顶部这个事件了，它的实现跟上面原理相似，都是判断滚轮滑动的位置，若是大于某一个值，我们就把这个值慢慢的变小，直到为0。
• 图片轮播
  借助mint-ui组件里的mt-swiper,配置一些相关的变量便可轻松实现，赠上mint-ui文档

入过的坑

• 跨域操做
  在实现搜索功能的时候，我企图调用闲鱼官网的接口来获取数据，可是很不幸，他告诉我跨域。可是不要紧，CORS来应付，咱们只需在后端领域里配置一下响应头就行，header("Access-Control-Allow-Origin：*") 固然这种方法必须开启cors才能成功。还有另一种方法就是在config文件夹的index.js中设置代理来解决跨域问题。形如：

  proxyTable: {
        '/api': {
              target: 'https://s.2.taobao.com/list/list.htm?q=',
              changeOrigin: true,
              pathRewrite: { //须要rewrite重写的, 若是在服务器端作了处理则能够不要这段
               '^/api': ''
              }
        }

• 设备适配
  市面上充斥着各式各样的手机，设备适配问题成了web开发的一个大挑战，如今也提出了各类解决方案，我采用的是css3的rem单位来解决适配问题，rem就是将根节点html的font-size的值做为整个页面的基准尺寸，默认html的font-size是16px，即1rem=16px，在将来的css样式里将你全部的px都按这样的比例换算成rem(字体的大小除外)，若是选择了这种方式，请rem一路到底，否则页面就会炸。
• 移动端图片上传
  上面有提到使用lrz图片压缩插件来实现，可是在适配手机时，发现有些手机不可以调用手机的相机以及本地文件，我猜测是用户的权限问题，你须要在设置里授予这个权限，否则也就不能传图片了。

• vue组件通讯
  vue由许多的组件组成，那么各组件之间的通讯就成了一个问题。vue中组件之间传值有这么几种方式。若是是页面较少，就能够考虑使用props传值，父传子，子传孙，一直传下去···可是，使用Props，会有些麻烦，状态的改变要往回传，页面一多就有些烦人。因此若是你的页面超过了10个以上，就要考虑vuex了，vuex就是专门为vue.js开发的状态管理模式，可以实现组件之间的组件共享。

  使用手则
  
  Build Setup

  # install dependencies
    npm install
  
    # serve with hot reload at localhost:8081
    npm run dev
  
    # build for production with minification
    npm run build
  
    # build for production and view the bundle analyzer report
    npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue- loader.