前言
學習vue也有大半年的時間了技竟，由于最近工作不是太忙缩幸，就想用vue對之前的電商項目進行一個重構千贯，寫了一個移動端的版本髓堪，主要包括：用戶模塊 商品模塊 購物車模塊 訂單模塊送朱。
?項目地址：[github地址]
技術棧
vue2 + vuex + vue-router + webpack + ES6/7 + axios + sass
框架：使用了vue全家桶進行開發(fā)娘荡，路由跳轉使用的是vue-router，數(shù)據(jù)請求使用了官方推薦的axios插件,使用es6/7進行開發(fā)驶沼。
移動端適配： 由于是web-app炮沐，因此需要兼容不同設備的屏幕的大小，在這里使用的手淘推薦的flexible方案回怜，通過動態(tài)的設置根元素的font-size大小大年，使用rem來進行移動端適配。在這里由于使用rem進行布局玉雾，而通常給我們的設計稿是640px,750px為標準的翔试，在編寫的時候把px大小轉換為rem也比較麻煩，因此這里使用了postcss-px2rem复旬，在編譯的時候會將px自動轉換為rem垦缅。
css預處理器：目前流行的css預處理主要是stylus，less驹碍，sass壁涎，個人感覺less和sass差別不大，stylus縮進式語法有點不太習慣幸冻，綜上選擇了sass進行樣式的編寫粹庞，通過預處理器可以以編程的方式書寫css代碼咳焚，添加變量洽损，函數(shù)，樣式繼承等革半。
后臺接口：在這里使用的是慕課網(wǎng)提供的接口：接口文檔碑定，相關的教程推薦：電商項目實戰(zhàn)
跨域處理：由于使用的外部接口，前端項目運行地址與接口訪問地址不同又官，瀏覽器的同源策略使得我們不得不處理跨域延刘，因此需要對跨域進行簡單處理。
開發(fā)模式下：需要在config下的index.js進行配置
proxyTable: {
? ? '/api': {?
? ? ? ? target: 'http://test.happymmall.com', //源地址
? ? ? ? changeOrigin: true, //改變源
? ? ? ? pathRewrite: {
? ? ? ? ? ? '^/api': '' //路徑重寫
? ? ? ? }
? ? }
}
在進行接口請求時在接口路徑前加/api即可六敬，編譯后會將/api重寫為線上的接口地址?
2. 生產(chǎn)模式下：在這里使用的是nignx碘赖，需要在遠程服務器上安裝nignx，然后在nginx.conf文件內(nèi)配置location即可外构。
功能介紹
在這里主要用vue是把之前慕課網(wǎng)上電商項目進行了重構普泡，做了個移動版本的，功能基本相同审编，主要是包括4個模塊：
用戶模塊：登錄撼班，注冊，個人信息修改垒酬，密碼找回砰嘁，更新密碼件炉。
商品模塊：首頁，分類矮湘，搜索商品斟冕，商品詳情
購物車模塊：購物車商品增加，刪除缅阳，全選宫静，單選，多選
訂單模塊：包括地址的管理券时，提交訂單孤里，訂單列表，詳情橘洞，取消訂單等
在這里本來想做支付模塊捌袜，發(fā)現(xiàn)接口返回的二維碼失效支付不了，因此只到支付詳情這塊炸枣。?
后續(xù)：
在這里只是簡單實現(xiàn)了基本功能虏等，當然作為web-app，用戶體驗是第一位的适肠，后續(xù)會持續(xù)的對項目進行性能優(yōu)化
數(shù)據(jù)請求這塊使用的axios插件霍衫，后續(xù)會用原生fecth進行實現(xiàn)
項目演示
項目運行
# 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
