小米商城 移動端 仿版
宣告
本專案純屬本人閒時開發，頁面參考小米商場官網（移動版）頁面，專案中所涉及到的介面均為假資料，為實現頁面資料互動效果（假資料小米商城官網）；
其中開發均為本人一人蔘與，如有侵權，聯絡刪除（@小米商場）；
發現問題可Issues本人，會做相應修改，但具體功能截至，不做後續迭代；
如有借鑑或轉發,請表明本文出處即可，否，必追究。
專案簡介
github倉庫地址
專案生產環境效果預覽
線上服務是本人買的廉價的，會導致介面資料返回很緩慢...(本地跑的很快，我也很無奈...);
效果預覽圖片處理軟體生成的圖片把背景色處理的很奇怪，原本就是普通的白色，大家湊合看...
掘金不知道為啥，放在github上面的預覽gif圖片，在這裡顯示不出來，只有刪了，大家還是我的github上面，也會這個專案的結束
專案啟動
本專案啟動，需要後端介面的支援（即上面提到的假資料），所以需要啟動兩個專案：
- 後端介面專案： 克隆或下載後端介面專案，啟動該專案，此處不過多介紹，請移駕後端介面，會有相關說明；
- 前端專案（本倉庫的專案）
git clone https://github.com/yangzaiwangzi/xiaomi_market.git
//開發環境
npm install
npm run serve
//測試環境
npm run test
//打包上傳之後，注意服務端代理的配置
//生產環境
npm run production
//打包上傳之後，注意服務端代理的配置
複製程式碼技術棧+框架
- vue 2.0
- vue-cli 3.0
- vuex
- vue-router
- vue-cookies
- axios
- mint-ui
- rem(flexible.js實現頁面自適應)
- less
路由
- 首頁
- 商品詳情
- 規格選擇
- 評論列表
- 評論詳情
- 引數詳情
- 猜你喜歡
- 商品詳情
- 分類
- 購物車
- 我的
- 登陸
開發過程
1、基於vue-cli@3，搭建專案骨架
（1）搭建骨架，可參考官網
npm install -g @vue/cli
vue create xiaomi_market //可自定義配置自己的框架需求 xiaomi_market為本專案的專案名
複製程式碼（2）開啟專案
cd xiaomi_market
npm i
npm run serve //開啟本地專案
複製程式碼2、引入rem佈局的必要檔案
（1）增加flexible.js於/public/js/位置下，/public/index.html中引入該檔案；
（2）配置編譯器的自動轉換功能，（VScode可使用cssrem外掛）;
（3）新增程式碼，控制自適應的返回在320px--540px之間。
if (width / dpr > 540) {
width = 540 * dpr;
}
if (width / dpr < 320) {
width = 320 * dpr;
}
複製程式碼3、引入reset.css、字型圖示庫
（1）在App.vue 加入reset.css檔案內容；
（2）/public/index.html中引入字型圖示庫，可使用iconfont阿里巴巴。
4、配置代理處理跨域
（1）在根目錄增加檔案：vue.config.js
（2）新增相應程式碼，可參考官方文件
5、封裝介面請求函式
（1）新增axios依賴；
（2）在根目錄新增資料夾server/；
（3）在server/檔案內新增api.js、index.js；
（4）api.js依賴axios封裝請求和相應的攔截器，並對GET、POST請求進行進一步封裝返回promise；
（5）index.js就對應的介面進行統一管理，主要引入api.js的方法，返回結果，需要引入的介面做相應的引入，即可。
6、配置環境變數
（1）根目錄新增檔案 .env.test、.env.production，為打包目標做服務；
（2）修改package.json中scripts如下（可自行定義）：
{
"serve": "vue-cli-service serve",//執行本地環境，無需打包
"test": "vue-cli-service build --mode test",//打包測試環境程式碼
"production": "vue-cli-service build --mode production"//打包生產環境程式碼
}
複製程式碼（3）根目錄新增資料夾config，並在config/新增檔案：dev.js、test.js、production.js，在其中配置相應的環境變數和值；
（4）增加vue.config.js檔案的內容如下：
const dev_config = require('./config/dev.js');
const test_config = require('./config/test.js');
const prodctioin_config = require('./config/production.js');
const env = process.env.NODE_ENV;//當前的環境
let config = null;
if(env=='production'){
config = prodctioin_config;
}else if(env=='test'){
config = test_config;
}else{
config = dev_config;
};
複製程式碼根據不同的環境，引入對應的config配置值。
7、新增外掛miut-ui(UI框架)
安裝和呼叫 Vue CLI 外掛,可使用vue add xxxx;
其他框架依舊使用npm install xxx;
這裡可以參考mint-ui官網
在main.js檔案新增如下程式碼：
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(Mint);
複製程式碼8、使用狀態管理模式，vuex
（1）根目錄新增資料夾stote/（本次將vuex模組化，實際不需如此複雜，這裡為了應用一下）；
（2）store/中新增index.js（store的中心檔案，暴露store給mian.js引用）、新增modules/（存放各個模組）；
（3）modules/中新增indexItem.js(indexItem這個模組的中心檔案)、新增indexItem/（存放該模組的actions、getters、mutations內容）；
（4）indexItem.js新增如下程式碼：
// indexItem
import actions from './indexItem/actions';
import getters from './indexItem/getters';
import mutations from './indexItem/mutations';
const state = {
activeIndex:1
};
export default {
namespaced:true,
state,
actions,
getters,
mutations
}
複製程式碼（5）store/index.js新增如下程式碼：
import Vue from 'vue'
import Vuex from 'vuex'
import indexItem from './modules/indexItem'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
indexItem
}
})
複製程式碼（6）根目錄main.js做vuex全域性掛載（修改檔案引用即可），至此vuex即可全域性使用，可參考vuex官方例項；
（7）使用vuex,使用方法有很多，可參考官方文件，我們這裡使用物件展開運算子的方法:
import { mapState } from 'vuex';
...
computed: {
...mapState('indexItem',[
'activeIndex'
])
},
...
...
console.log(this.activeIndex); //即可使用
...
...
methods:{
...mapActions('indexItem',[
'changeIndexItem',
'setSwipeName'
]),
changeItem(index){
this.changeIndexItem(index);//即可使用
}
},
...
複製程式碼9、開始專案程式碼
不過多介紹專案的程式碼進行的細節,會抽取部分簡介：
- 引入‘lodash.debounce’進行防抖操作；
- 引入‘vue-cookies’進行cookie操作；
10、專案結束
至此，專案基本結束，有問題可以在上面的Issues我，會做相應的修改；
覺得還行，給個STAR鼓勵一下，謝謝...