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.