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

時間 2019-12-07

原文原文鏈接

小米商城移動端仿版

聲明

本項目純屬本人閒時開發，頁面參考小米商場官網（移動版）頁面，項目中所涉及到的接口均爲假數據，爲實現頁面數據交互效果（假數據小米商城官網）；
其中開發均爲本人一人蔘與，若有侵權，聯繫刪除（@小米商場）；
發現問題可Issues本人，會作相應修改，但具體功能截至，不作後續迭代；
若有借鑑或轉發,請代表本文出處便可，否，必追究。
javascript

項目簡介

github倉庫地址

github.com/yangzaiwang…css

項目生產環境效果預覽

線上服務是本人買的廉價的，會致使接口數據返回很緩慢...(本地跑的很快，我也很無奈...);
效果預覽圖片處理軟件生成的圖片把背景色處理的很奇怪，本來就是普通的白色，你們湊合看...
掘金不知道爲啥，放在github上面的預覽gif圖片，在這裏顯示不出來，只有刪了，你們仍是個人github上面，也會這個項目的結束html

項目啓動

本項目啓動，須要後端接口的支持（即上面提到的假數據），因此須要啓動兩個項目：前端

後端接口項目：克隆或下載後端接口項目，啓動該項目，此處不過多介紹，請移駕後端接口，會有相關說明；
前端項目（本倉庫的項目）

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

路由

首頁
- 商品詳情
  - 規格選擇
  - 評論列表
  - 評論詳情
  - 參數詳情
  - 猜你喜歡
分類
購物車
個人
登錄

開發過程

一、基於vue-cli@3，搭建項目骨架

（1）搭建骨架，可參考官網vue

npm install -g @vue/cli
vue create xiaomi_market //可自定義配置本身的框架需求 xiaomi_market爲本項目的項目名
複製代碼

（2）開啓項目java

cd xiaomi_market
npm i
npm run serve //開啓本地項目
複製代碼

二、引入rem佈局的必要文件

（1）增長flexible.js於/public/js/位置下，/public/index.html中引入該文件；
（2）配置編譯器的自動轉換功能，（VScode可以使用cssrem插件）;
（3）添加代碼，控制自適應的返回在320px--540px之間。ios

if (width / dpr > 540) {
    width = 540 * dpr;
}
if (width / dpr < 320) {
    width = 320 * dpr;
}
複製代碼

三、引入reset.css、字體圖標庫

（1）在App.vue 加入reset.css文件內容；
（2）/public/index.html中引入字體圖標庫，可以使用iconfont阿里巴巴。git

四、配置代理處理跨域

（1）在根目錄增長文件：vue.config.js
（2）添加相應代碼，可參考官方文檔github

五、封裝接口請求函數

（1）添加axios依賴；
（2）在根目錄添加文件夾server/；
（3）在server/文件內添加api.js、index.js；
（4）api.js依賴axios封裝請求和相應的攔截器，並對GET、POST請求進行進一步封裝返回promise；
（5）index.js就對應的接口進行統一管理，主要引入api.js的方法，返回結果，須要引入的接口作相應的引入，便可。vue-router

六、配置環境變量

（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配置值。

七、添加插件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);
複製代碼

八、使用狀態管理模式，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);//便可使用
    }
  },
...
複製代碼