vue全家桶仿某魚部分布局以及功能實現(xiàn)

dreamGong 發(fā)布于2019-08-23 11:01 / 1342人閱讀

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

前言

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

Vue是一套用于構建用戶界面的漸進式框架，Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的SPA單頁面應用提供驅動。

技術棧以及組件庫

vuex: 解決組件數(shù)據(jù)共享問題，加強組件數(shù)據(jù)持久化。

vue-router: 主要實現(xiàn)spa單頁面開發(fā)。

axios: 異步請求數(shù)據(jù)。

easymock: 假數(shù)據(jù)模擬接口。

mint-ui: 一款移動端開發(fā)的框架。Mint UI

stylus: css預處理器

better-scroll: 一個移動端滾動的解決方案

swiper: 一個強大的滑動特效插件

lrz: 圖片壓縮插件

實現(xiàn)效果

搜索

分類

登錄

購買

發(fā)布

代碼目錄結構

●
┣━ src # 開發(fā)目錄
 ┣━ api                  //axios獲取假數(shù)據(jù)的統(tǒng)一js
  ┣━ data.js
 ┣━ assets                  //靜態(tài)文件資源
  ┣━ images                 //圖片
  ┣━ utils                  //通用js方法函數(shù)
 ┣━ common                 //通用的文件資源
  ┣━ stylus                 //stylus文件夾
 ┣━ component              //可復用的組件
  ┣━...
  ┣━...
  ┣━...
  ┣━...
  ┣━...
  ┣━...
 ┣━ pages                 //頁面（頁面組件）
  ┣━...
  ┣━...
  ┣━...
  ┣━...
  ┣━...
  ┣━...
 ┣━ router                 //路由
  ┣━ index.js
 ┣━ store                  //vuex數(shù)據(jù)狀態(tài)管理
  ┣━ index.js
  ┣━ state.js
  ┣━ mutations.js
  ┣━ actions.js
  ┣━ getters.js
 ┣━ App.vue                //根組件
 ┗━ main.js

實現(xiàn)主要的幾個功能

登錄退出

用戶在已登錄狀態(tài)和未登錄狀態(tài)的界面是不同的，有些功能指定要在登錄狀態(tài)下才會有，因此會產生狀態(tài)的切換，我們可以通過瀏覽器自帶的window.localStorage來存儲數(shù)據(jù)，也可以用vuex，如果狀態(tài)多的情況下建議采用vuex

搜索功能

這個沒什么好說的，利用indexOf這個方法來驗證假數(shù)據(jù)中是否有這個key，相應輸出它的value，沒有那就切換另一個找不到的UI界面

分類功能

這個也沒有什么難度，取到假數(shù)據(jù)中的數(shù)據(jù)來for in循環(huán)輸出，然后用better-scroll插件來實現(xiàn)滾動對應的高度效果

購買

如果是在未登錄的狀態(tài)下，那么進行一個router-link路由跳轉到登錄login頁面，如果是已登錄的狀態(tài)下，會進入到一個商品詳情頁，點擊我想要會進入到一個與賣家聊天交互的一個界面，這里面的賣家的數(shù)據(jù)都是模擬出來的假數(shù)據(jù)，因此它不能像真的賣家一樣。其中每一個表情emoji就是一個圖片，用code的方式把它編譯出來再進行一個swiper輪播來包裹他們的遍歷循環(huán)。

接著點擊立即購買則會跳到付款頁面，如果填過地址等信息的，那么可以選擇，如果未填的，則會引導至輸入相關信息頁面，再點擊購買就成功了，這個時候數(shù)據(jù)就會利用vuex保存到我的個人頁面中的我買到的頁面中?？梢赃M行確認收貨后刪除訂單。

發(fā)布

一樣，只有在已登錄的狀態(tài)下才可以進入到發(fā)布的界面，發(fā)布就是充當著一個賣家的身份，需要填寫商品詳情的相關信息包括圖片，價格等。通過驗證才可發(fā)布成功，同樣利用了vuex來保存發(fā)布的商品信息，再跳至我的頁面中的我發(fā)布的頁面進行數(shù)據(jù)輸出。

設備適配

我是用rem來實現(xiàn)的，也建議用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

移動端一像素

眾所周知，移動端因不同的設備的分辨率導致一像素并不是真正的統(tǒng)一的一像素，因此我們需要封裝一個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來隱藏掉這個節(jié)點，通過點擊其他的節(jié)點來觸發(fā)這個input type=file的點擊事件，再利用lrz的圖片壓縮將圖片優(yōu)美的輸出到也頁面中。拿里面的上傳頭像的代碼貼一下。

html:

    
    上傳帥照
    


js 方法：

addPic() {
  this.$refs.file.click()
},              //點擊觸發(fā)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
  })
},

結語

**很多東西細節(jié)想聊出來，比如嵌套路由所踩的坑..等，但是最近忙于找工作，時間問題就寫到這里，有興趣或者正在學習vue的同學可以查看我的github源碼。fallow-fish

如果對你有幫助，可以star我的項目給我一點點的鼓勵，也希望有志同道和的可以加入一起討論，我也會第一時間幫你解答。**

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

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

轉載請注明本文地址：http://systransis.cn/yun/96917.html

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

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

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

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

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

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

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

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