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

前言

學習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進行實現

項目演示

    

項目運行

# 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複製代碼