vue全家桶實現移動端電商web-app

rosenWang發表於2018-11-29
VueWebAPP

前言

學習vue也有大半年的時間了，由於最近工作不是太忙，就想用vue對之前的電商專案進行一個重構，寫了一個移動端的版本，主要包括：使用者模組 商品模組 購物車模組 訂單模組。

 專案地址：[github地址]

技術棧

vue2 + vuex + vue-router + webpack + ES6/7 + axios + sass

框架：使用了vue全家桶進行開發，路由跳轉使用的是vue-router，資料請求使用了官方推薦的axios外掛,使用es6/7進行開發。

移動端適配： 由於是web-app，因此需要相容不同裝置的螢幕的大小，在這裡使用的手淘推薦的flexible方案，通過動態的設定根元素的font-size大小，使用rem來進行移動端適配。在這裡由於使用rem進行佈局，而通常給我們的設計稿是640px,750px為標準的，在編寫的時候把px大小轉換為rem也比較麻煩，因此這裡使用了postcss-px2rem，在編譯的時候會將px自動轉換為rem。

css前處理器：目前流行的css預處理主要是stylus，less，sass，個人感覺less和sass差別不大，stylus縮排式語法有點不太習慣，綜上選擇了sass進行樣式的編寫，通過前處理器可以以程式設計的方式書寫css程式碼，新增變數，函式，樣式繼承等。

後臺介面：在這裡使用的是慕課網提供的介面：介面文件，相關的教程推薦：電商專案實戰

跨域處理：由於使用的外部介面，前端專案執行地址與介面訪問地址不同，瀏覽器的同源策略使得我們不得不處理跨域，因此需要對跨域進行簡單處理。

  1. 開發模式下：需要在config下的index.js進行配置
proxyTable: {
     '/api': {  
         target: 'http://test.happymmall.com', //源地址
         changeOrigin: true, //改變源
         pathRewrite: {
             '^/api': '' //路徑重寫
         }
     }
 }
複製程式碼

在進行介面請求時在介面路徑前加/api即可，編譯後會將/api重寫為線上的介面地址 

2. 生產模式下：在這裡使用的是nignx，需要在遠端伺服器上安裝nignx，然後在nginx.conf檔案內配置location即可。

功能介紹

在這裡主要用vue是把之前慕課網上電商專案進行了重構，做了個移動版本的，功能基本相同，主要是包括4個模組：

使用者模組：登入，註冊，個人資訊修改，密碼找回，更新密碼。

商品模組：首頁，分類，搜尋商品，商品詳情

購物車模組：購物車商品增加，刪除，全選，單選，多選

訂單模組：包括地址的管理，提交訂單，訂單列表，詳情，取消訂單等

在這裡本來想做支付模組，發現介面返回的二維碼失效支付不了，因此只到支付詳情這塊。

後續：

  1. 在這裡只是簡單實現了基本功能，當然作為web-app，使用者體驗是第一位的，後續會持續的對專案進行效能優化
  2. 資料請求這塊使用的axios外掛，後續會用原生fecth進行實現

專案演示


vue全家桶實現移動端電商web-app    

vue全家桶實現移動端電商web-app

vue全家桶實現移動端電商web-app


vue全家桶實現移動端電商web-app

專案執行

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report複製程式碼



相關文章