vue全家桶仿某魚部分布局以及功能實現

dreamGong 發布于2019-08-23 11:01 / 1341人閱讀

摘要：在這里簡單敘述一下我仿某魚部分布局以及功能實現的過程，僅做學習用途。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，也完全能夠為復雜的單頁面應用提供驅動。可以進行確認收貨后刪除訂單。

前言

每次寫文章時，總會覺得比寫代碼難多了，可能這就是我表述方面的不足吧，然而寫文章也是可以復盤一下自己的開發過程，對自己還是受益良多的。在這里簡單敘述一下我仿某魚部分布局以及功能實現的過程，僅做學習用途。

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:

    
    上傳帥照
    


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我的項目給我一點點的鼓勵，也希望有志同道和的可以加入一起討論，我也會第一時間幫你解答。**

GPU云服務器云服務器桶仿某魚 VUE實現webrtc Vue實現分頁自定義布局怎么實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96917.html

Vue2 全家桶仿微信App 項目，支持多人在線聊天和機器人聊天

摘要：前言這個項目是利用工作之余寫的一個模仿微信的單頁面應用，整個項目包含個頁面，涉及實時群聊，機器人聊天，同學錄，朋友圈等等，后續頁面還是開發中。前言這個項目是利用工作之余寫的一個模仿微信app的單頁面應用，整個項目包含27個頁面，涉及實時群聊，機器人聊天，同學錄，朋友圈等等，后續頁面還是開發中。寫這個項目主要目的是練習和熟悉vue和vuex的配合使用，利用socket.io實現實時聊...

iliyaku 2019-08-20 17:21 評論0 收藏0
Vue2.0全家桶仿騰訊課堂（移動端）

摘要：最近在學習覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正持續更新中。的使用的狀態存儲是響應式的。需要注意類似于，不同在于提交的是，而不是直接變更狀態。最近在學習vue,覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正（持續更新中）。效果預覽 ?在線預覽：點我！！！在線預覽，手機瀏覽或切換瀏覽器移動調試 ?源碼地址：Github??求你的小星星～...

zorro 2019-08-29 12:48 評論0 收藏0
Vue2.0全家桶仿騰訊課堂（移動端）

摘要：最近在學習覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正持續更新中。的使用的狀態存儲是響應式的。需要注意類似于，不同在于提交的是，而不是直接變更狀態。最近在學習vue,覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正（持續更新中）。效果預覽 ?在線預覽：點我！！！在線預覽，手機瀏覽或切換瀏覽器移動調試 ?源碼地址：Github??求你的小星星～...

anquan 2019-08-01 17:01 評論0 收藏0
React-全家桶仿簡書部分功能

摘要：全家桶仿簡書部分功能前言前段時間接觸了下，一直想要自己寫一個小練手。在眾多應用中，考慮之后選擇了簡書來模仿，這段時間就利用了工作之余的時間進行開發。在這里簡單敘述一下我仿簡書部分布局以及功能實現的過程，僅做學習用途。 React-全家桶仿簡書部分功能前言前段時間接觸了下React，一直想要自己寫一個小Demo練手。在眾多應用中，考慮之后選擇了簡書來模仿，這段時間就利用了工作之余的時...

Jinkey 2019-08-23 13:40 評論0 收藏0
Vue2.0全家桶仿騰訊體育APP（Web版）

摘要：全家桶仿騰訊體育一年一度的總決賽，相信球迷用的最多的就是騰訊體育這款，剛好上手，當練手就把這個仿下來。這樣剛進去的時候頁面加載時間明顯減短。可以包含任意異步操作。 Vue2.0全家桶仿騰訊體育APP 一年一度的NBA總決賽，相信球迷用的最多的就是騰訊體育這款APP，剛好上手Vue，當練手就把這個APP仿下來。 showImg(https://segmentfault.com/img/r...

fnngj 2019-08-20 17:04 評論0 收藏0