vue全家桶實現的商城web-app，這模式數據接口開發

前言

學習vue也有大半年的時間了，由於最近工作不是太忙，就想用vue對之前的電商項目進行一個重構，寫了一個移動端的版本，主要包括：用戶模塊 商品模塊 購物車模塊 訂單模塊，github項目地址
感覺不錯的，反手就是一個贊👍，另外項目還要很多地方需要優化，歡迎大家issue和fork！

技術棧

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重寫爲線上的接口地址

1. 生產模式下：在這裏使用的是nignx，需要在遠程服務器上安裝nignx，然後在nginx.conf文件內配置location即可。

功能介紹

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

用戶模塊：登錄，註冊，個人信息修改，密碼找回，更新密碼。

商品模塊：首頁，分類，搜索商品，商品詳情

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

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

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

後續：

1. 在這裏只是簡單實現了基本功能，當然作爲web-app，用戶體驗是第一位的，後續會持續的對項目進行性能優化
2. 數據請求這塊使用的axios插件，後續會用原生fecth進行實現

項目演示

查看demo請戳這裏（請用chrome手機模式預覽）

項目運行

# 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