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個人項目給我一點點的鼓勵，也但願有志同道和的能夠加入一塊兒討論，我也會第一時間幫你解答。**