基於vue-cli@3+vue全家桶仿小米商城

yangzaiwangzi214發表於2018-11-16
Vue

小米商城 移動端 仿版

宣告

本專案純屬本人閒時開發，頁面參考小米商場官網（移動版）頁面，專案中所涉及到的介面均為假資料，為實現頁面資料互動效果（假資料小米商城官網）；
其中開發均為本人一人蔘與，如有侵權，聯絡刪除（@小米商場）；
發現問題可Issues本人，會做相應修改，但具體功能截至，不做後續迭代；
如有借鑑或轉發,請表明本文出處即可，否，必追究。

專案簡介

github倉庫地址

github.com/yangzaiwang…

專案生產環境效果預覽

線上服務是本人買的廉價的，會導致介面資料返回很緩慢...(本地跑的很快，我也很無奈...);
效果預覽圖片處理軟體生成的圖片把背景色處理的很奇怪，原本就是普通的白色，大家湊合看...
掘金不知道為啥，放在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鼓勵一下，謝謝...

相關文章