vue全家桶仿某鱼部分布局以及功能实现

前言

每次写文章时，总会以为比写代码难多了，可能这就是我表述方面的不足吧，然而写文章也是能够复盘一下本身的开发过程，对本身仍是受益良多的。在这里简单叙述一下我仿某鱼部分布局以及功能实现的过程，仅作学习用途。

Vue是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue 也彻底可以为复杂的SPA单页面应用提供驱动。

---

技术栈以及组件库

• vuex: 解决组件数据共享问题，增强组件数据持久化。
• vue-router: 主要实现spa单页面开发。
• axios: 异步请求数据。
• easymock: 假数据模拟接口。
• mint-ui: 一款移动端开发的框架。Mint UI
• stylus: css预处理器
• better-scroll: 一个移动端滚动的解决方案
• swiper: 一个强大的滑动特效插件
• lrz: 图片压缩插件

实现效果

搜索

分类

登陆

购买

发布

代码目录结构

●
┣━ src # 开发目录
 ┣━ api                  //axios获取假数据的统一js
  ┣━ data.js
 ┣━ assets                  //静态文件资源
  ┣━ images                 //图片
  ┣━ utils                  //通用js方法函数
 ┣━ common                 //通用的文件资源
  ┣━ stylus                 //stylus文件夹
 ┣━ component              //可复用的组件
  ┣━...
  ┣━...
  ┣━...
  ┣━...
  ┣━...
  ┣━...
 ┣━ pages                 //页面（页面组件）
  ┣━...
  ┣━...
  ┣━...
  ┣━...
  ┣━...
  ┣━...
 ┣━ router                 //路由
  ┣━ index.js
 ┣━ store                  //vuex数据状态管理
  ┣━ index.js
  ┣━ state.js
  ┣━ mutations.js
  ┣━ actions.js
  ┣━ getters.js
 ┣━ App.vue                //根组件
 ┗━ main.js

实现主要的几个功能

• 登陆退出

  用户在已登陆状态和未登陆状态的界面是不一样的，有些功能指定要在登陆状态下才会有，所以会产生状态的切换，咱们能够经过浏览器自带的window.localStorage来存储数据，也能够用vuex，若是状态多的状况下建议采用vuex

• 搜索功能

  这个没什么好说的，利用indexOf这个方法来验证假数据中是否有这个key，相应输出它的value，没有那就切换另外一个找不到的UI界面

• 分类功能

  这个也没有什么难度，取到假数据中的数据来for in循环输出，而后用better-scroll插件来实现滚动对应的高度效果

• 购买

  若是是在未登陆的状态下，那么进行一个router-link路由跳转到登陆login页面，若是是已登陆的状态下，会进入到一个商品详情页，点击我想要会进入到一个与卖家聊天交互的一个界面，这里面的卖家的数据都是模拟出来的假数据，所以它不能像真的卖家同样。其中每个表情emoji就是一个图片，用code的方式把它编译出来再进行一个swiper轮播来包裹他们的遍历循环。
  
  接着点击当即购买则会跳到付款页面，若是填过地址等信息的，那么能够选择，若是未填的，则会引导至输入相关信息页面，再点击购买就成功了，这个时候数据就会利用vuex保存到个人我的页面中的我买到的页面中。能够进行确认收货后删除订单。

• 发布

  同样，只有在已登陆的状态下才能够进入到发布的界面，发布就是充当着一个卖家的身份，须要填写商品详情的相关信息包括图片，价格等。经过验证才可发布成功，一样利用了vuex来保存发布的商品信息，再跳至个人页面中的我发布的页面进行数据输出。

• 设备适配

  我是用rem来实现的，也建议用rem来自适应布局，先本身封装一个自适应html的 font-size的js，再将其导入到main.js中

/**
    * Created by zhaolele on 2018/7/25.
    */
    (function(doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 32 * (clientWidth / 320) + 'px';
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    
    //10rem

• 移动端一像素

  众所周知，移动端因不一样的设备的分辨率致使一像素并非真正的统一的一像素，所以咱们须要封装一个stylus的mixin来引入

border-1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ' '
    
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)

• 图片上传

可使用input中type的file属性，而后用html5的新属性hidden来隐藏掉这个节点，经过点击其余的节点来触发这个input type=file的点击事件，再利用lrz的图片压缩将图片优美的输出到也页面中。拿里面的上传头像的代码贴一下。

html:
<div class="avatar" @click="addPic">
    <img :src="url" alt="">
    <span class="upavatar">上传帅照</span>
    <input type="file" hidden accept="image/jpeg,image/jpg,image/png" capture="camera" @change="fileInput" ref="file">
</div>

js 方法：

addPic() {
  this.$refs.file.click()
},              //点击触发fileInput事件

fileInput(e) {
  let files = e.target.files
  console.log(files)
  if(!files.length) return
  this.createImage(files, e)
},

createImage(files, e) {
  lrz(files[0], { width: 480 }).then(rst=> {
    this.url = rst.base64
  }).catch(err=> {
    console.log(err)
  }).always(()=> {
    e.tartget.value = null
  })
},

---

结语

**不少东西细节想聊出来，好比嵌套路由所踩的坑..等，可是最近忙于找工做，时间问题就写到这里，有兴趣或者正在学习vue的同窗能够查看个人github源码。fallow-fish若是对你有帮助，能够star个人项目给我一点点的鼓励，也但愿有志同道和的能够加入一块儿讨论，我也会第一时间帮你解答。**