記錄一次完整vue的項(xiàng)目過程

github:https://github.com/qiuChengleiy/shop-vue

shop-vue移動端商城

項(xiàng)目概要

本項(xiàng)目用到的技術(shù)棧： vue-cli + vue-router + vuex + axios + vue-axios + vant( UI )
如何在本地運(yùn)行本項(xiàng)目


    git clone git@github.com:qiuChengleiy/shop-vue.git
    cd shop-vue
    npm i 或 cnpm i      //安裝項(xiàng)目依賴 建議使用淘寶鏡像源 cnpm 安裝 具體參考官網(wǎng)cnpm.taobao.org
    npm run dev   //運(yùn)行項(xiàng)目服務(wù)  在瀏覽器：localhost:8080/   查看

如果運(yùn)行不成功請查看是否缺少配置文件比如.babelrc或者嘗試用vue-cli初始化一個vue項(xiàng)目再將本項(xiàng)目移植進(jìn)去
項(xiàng)目地址
效果查看項(xiàng)目截圖部分
真機(jī)體驗(yàn) APK（限安卓)
真機(jī)體驗(yàn)可能會帶來不流暢卡頓等現(xiàn)象建議使用Chrome瀏覽器體驗(yàn)

項(xiàng)目文檔說明

項(xiàng)目結(jié)構(gòu)

├── build/ # 項(xiàng)目打包配置文件 vue-cli 初始化的文件
├── node_modules/ #模塊文件
├── config/ #配置文件 vue-cli 初始化的配置
├── dist/  #打包后的文件存放目錄
├── src/ #項(xiàng)目入口目錄
    ├── assets/   #前端資源目錄
        ├── css/ # 樣式表目錄/less文件存放目錄
    ├── components/   # vue組件目錄/.vue文件存放目錄
        ├── about.vue  # 項(xiàng)目介紹組件
        ├── active.vue # 活動版塊組件
        ├── buyInfo.vue  # 購買信息組件
        ├── community.vue  # 社區(qū)組件
        ├── goodsInfo.vue # 商品信息組件
        ├── home.vue  # 首頁組件
        ├── login.vue # 登錄注冊組件
        ├── me.vue  # 用戶組件
        ├── news.vue  # 社區(qū)文章信息組件
        ├── orderList.vue  # 訂單列表組件
        ├── orderPay.vue  # 訂單支付組件
        ├── search.vue  # 搜索版塊組件
        ├── shoppingCart.vue  # 購物車組件
        ├── swiper.vue  # 輪播公用組件
    ├── router/  # vue路由管理目錄 
        ├── index.js # 路由主文件
    ├── store/ # vuex狀態(tài)管理目錄
        ├── Core_store/  # store對象目錄
           ├── active.js  # 活動頁的狀態(tài)管理
           ├── community.js # 社區(qū)的狀態(tài)管理
           ├── home.js  # 主頁狀態(tài)管理
        ├── index.js # 狀態(tài)管理入口主文件
    ├── App.vue # 項(xiàng)目根組件
    ├── main.js # 項(xiàng)目入口文件

├── static/ #靜態(tài)文件存放目錄
    ├── images/   # 圖片資源
    ├── data.json   # mock數(shù)據(jù) 
├── test/ #測試目錄
├── package.json #包文件信息
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .postcsssrc.js
├── index.html
├── README.md
├── vue-shop.apk

功能簡單介紹

main.js 項(xiàng)目入口文件

在主文件中嫉父，把所需要的模塊加進(jìn)來卵洗，vant的框架因?yàn)榈谝淮斡茫砸膊恢谰唧w加啥組件棠众，所以索性都編譯進(jìn)去了~ 這也導(dǎo)致了編譯的速度有點(diǎn)稍慢
狀態(tài)方面也對它做了簡單的封裝 /store/

//導(dǎo)入所需模塊
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

//axios
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

//狀態(tài)管理
import vuex from 'vuex'
Vue.use(vuex);

//ui 框架
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';

Vue.use(Vant);

//懶加載
import { Lazyload } from 'vant';
Vue.use(Lazyload);

//瀑布流
import { Waterfall } from 'vant';
Vue.use(Waterfall);

import store from './store/index'

/* VUE實(shí)例 */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

路由管理

在這里把需要跳轉(zhuǎn)的組件都加進(jìn)來洋只，配合vue-router使用，因?yàn)闃I(yè)務(wù)邏輯不是很復(fù)雜，所以這里沒有用子路由跳轉(zhuǎn),都是簡單的路由處理
在js中控制路由跳轉(zhuǎn)：

this.$router.push(url);

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home'
import Search from '@/components/search'
import  GoodsInfo from '@/components/goodsInfo'
import Buy from '@/components/buyInfo'
import Pay from '@/components/orderPay'
import Community from '@/components/community'
import ShopingCart from '@/components/shoppingCart'
import Me from '@/components/me'
import Login from '@/components/login'
import About from '@/components/about'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/search',
      name: 'search',
      component: Search,
    },
    {
      path:'/goods/:id',
        name:'goodsInfo',
        component:GoodsInfo,
    },
    {
      path:'/goods/:id/buy',
      name:'buyInfo',
      component:Buy,
    },
    {
      path:'/goods/:id/buy/pay',
      name:'pay',
      component:Pay,
    },
    {
      path:'/community',
      name:'community',
      component:Community,
    },
    {
      path:'/shoppingCart',
      name:'shoppingCart',
      component:ShopingCart,
    },
    {
      path:'/me',
      name:'Me',
      component:Me,
    },
    {
      path:'/login',
      name:'login',
      component:Login,
    },
    {
      path:'/register',
      name:'register',
      component:Login,
    },
    {
      path:'/about',
      name:'aboutMe',
      component:About,
    },
    {
      path:'*',
      redirect:'/'
    }
  ]
})

狀態(tài)管理

對口處進(jìn)行了簡單的封裝方便后續(xù)管理
其他部分文件導(dǎo)出均是各模塊所需的對象
在組件中引入即可


import { mapState,mapActions,mapGetters } from 'vuex';

computed: {
    ...mapState({
      title: state => state.home.tab.title,
      icon: state => state.home.badge.icon,
      bageTitle: state => state.home.badge.title,
      actives: state => state.active.home.title,
      src : state => state.home.lunbo.src,
      activeTitle: state => state.active.home.activeTitle,
      days: state => state.active.home.days,
      broadcast: state => state.home.broadcast,
      shop_info: state => state.home.shop_info,
      my_info: state => state.home.my_info,
      show: state => state.home.show,
    }),
    ...mapGetters(['bc_notshow','search_show']),
  },
  methods: {
    ...mapActions([
      'searchA'
    ]),


//index.js

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);

//引入store對象
import home from './Core_store/home';
import active from './Core_store/active';
import community from './Core_store/community';

export default new vuex.Store({
    modules: {
        home: home,
        active:active,
        community:community,
    }
})



// home.js


export default {
    state:{    
        tab:{
            title:['','今日推薦','時(shí)尚','美妝','家電','家居','國際','生活'],
        },
        badge:{
            icon:['icon_1','icon_2','icon_8','icon_4','icon_5','icon_6','icon_7','icon_10'],
            title:['鞋包館','運(yùn)動館','母嬰館','超市','女裝館','美妝館','男裝館','更多'],
        },
        imageList:[],
        broadcast:[],
        bc:true,
        show:true,
        sshow:false,
        shop_info:4,
        my_info:2,
        buyInfo:{
            img:[],
        },
        orderShow:false,
        numO:null,
    },
    mutations: {
        search_(state) {
            state.show = false;
        },
        buySearch(state,img) {
            state.buyInfo.img[0] = img;
            console.log(state.buyInfo.img);
        },
        orderShow_(state) {
            state.orderShow ? state.orderShow = false : state.orderShow = true;
            setTimeout(() => {
                state.orderShow = false;
              }, 22000);
        },
        addNum(state,e) {
            state.numO = e;
            console.log(e);
        },
        shopCartInfo(state) {
            console.log(state.shop_info);
            state.shop_info+=4;
        }
    },
    actions: {
       searchA(context,e) {
           context.commit('search_');
          
       },
       buyParam(context,img) {
           context.commit('buySearch',img);
       },
       orderShows(context) {
           context.commit('orderShow_');
       },
       orderNum(context,e) {
         context.commit('addNum',e);
       },
       infoAction(context) {
            context.commit('shopCartInfo');
       }
    },
    getters: {
        bc_notshow(state){
            setTimeout(() => {
              state.bc = false;
            }, 20000);
            return state.bc;
        },
       
    }
}

組件

在寫組件的過程中遇到的一些問題：

// 1. 當(dāng)使用ui組件時(shí) 部分樣式無法直接在css中更改纸泄，解決辦法： 通過自定義指令赖钞，調(diào)用原生方法用JS重寫樣式，將指令綁定到相應(yīng)的組件上
// 2. 在開發(fā)過程中聘裁，很多部分都是一樣的雪营，所以編寫可復(fù)用的組件很重要， 比如輪播 懶加載圖片
// 3. 隨著功能的增多衡便，組件的體積也變得龐大献起，冗余的代碼有點(diǎn)多
// 4. 組件之間的狀態(tài)要更多的互通性，使得各組件互相關(guān)聯(lián)起來
// 5. 在向后臺發(fā)起請求時(shí) 對組件進(jìn)行數(shù)據(jù)渲染時(shí)镣陕，判斷難免會多谴餐，當(dāng)相同的判斷時(shí)用switch 比 if 會更加舒服一點(diǎn)

組件相關(guān)的開發(fā)，具體到/components/里查看

mock數(shù)據(jù)

簡單模擬了一下數(shù)據(jù),因?yàn)閼械萌デ袌D了呆抑，所以直接用的圖片地址岂嗓，而且也更加方便測試

{
    "home":{
        "lunbo":{
            "home":[ 
                    "https://a2.vimage1.com/upload/flow/2018/06/12/50/15287856410421.jpg",
                    "https://a3.vimage1.com/upload/flow/2018/06/06/29/15282588215380.jpg",
                    "https://a2.vimage1.com/upload/flow/2018/06/11/129/15287110698394.jpg",
                    "https://a3.vimage1.com/upload/flow/2018/06/11/79/15286841592012.jpg"
                ],
            "meizhuang":[
                "https://a3.vimage1.com/upload/flow/2018/06/11/123/15287145413911.jpg",
                "https://a2.vimage1.com/upload/flow/2018/06/12/104/15287681714987.jpg",
                "https://a3.vimage1.com/upload/flow/2018/06/12/77/15287678981404.jpg"
            ],
            "jiadian":[
                "https://a3.vimage1.com/upload/flow/2018/06/12/65/15287673095242.jpg",
                "https://a3.vimage1.com/upload/flow/2018/06/11/169/15287297288138.jpg",
                "https://a2.vimage1.com/upload/flow/2018/06/11/78/15287120642222.jpg",
                "https://a2.vimage1.com/upload/flow/2018/06/08/161/15284659187259.jpg",
                "https://a2.vimage1.com/upload/flow/2018/06/08/119/15284419569224.jpg"
            ],
            "jiaju":[
                "https://a2.vimage1.com/upload/flow/2018/06/11/151/15287113456414.jpg",
                "https://a3.vimage1.com/upload/flow/2018/06/11/137/15287118337181.jpg",
                "https://a4.vimage1.com/upload/flow/2018/06/12/83/15287340857050.jpg",
                "https://a3.vimage1.com/upload/flow/2018/06/11/190/15287119563873.jpg"
            ],
            "guoji":[
                "https://a4.vimage1.com/upload/flow/2018/03/09/186/15205868083347.jpg",
                "https://a2.vimage1.com/upload/flow/2018/06/08/123/15284718303958.jpg"
            ],
            "shenghuo":[
                "https://a2.vimage1.com/upload/flow/2018/06/11/100/15287234758123.jpg",
                "https://a2.vimage1.com/upload/flow/2018/06/12/105/15287757783356.jpg",
                "https://a4.vimage1.com/upload/flow/2018/06/11/85/15287233692932.jpg"
            ]

        },
        "imageList":[
            "https://a3.vimage1.com/upload/flow/2018/06/11/194/15286863014296.jpg",
            "https://a.vimage1.com/upcb/2018/06/11/120/ias_152869995885967_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/11/115/ias_152870605995543_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/06/144/ias_152825513726419_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/08/51/ias_152842946434501_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/12/137/ias_152878266391137_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/06/67/ias_152827678595317_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/08/109/ias_152845118539325_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/06/92/ias_152827324042112_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/12/123/ias_152877345994463_604x290_80.jpg"
        ],
        "shishangImglist":[
            "https://b.vimage1.com/upload/mst/2018/06/11/48/71e35131673e743e0ec9079dca1ced73_604x290_80.jpg",
            "https://b.vimage1.com/upload/mst/2018/05/30/102/d23b59694ad34bb00dbe8178bad13f77_604x290_80.jpg",
            "https://b.vimage1.com/upload/mst/2018/06/12/121/18fd0f7347a63950fbe3aca8183da448_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/11/41/ias_152869536334678_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/08/88/ias_152844371626949_604x290_80.jpg",
            "https://a3.vimage1.com/upload/flow/2018/06/12/131/15287706240279.jpg",
            "https://a.vimage1.com/upcb/2018/05/31/146/ias_152773404529400_604x290_80.jpg",
            "https://b.vimage1.com/upload/mst/2018/06/10/88/980541d3f3f1296b5452171873cd975b_604x290_80.jpg",
            "https://b.vimage1.com/upload/mst/2018/06/07/99/cc7152ad509339bc5f0dfc84b25cdb65_604x290_80.jpg",
            "https://b.vimage1.com/upload/mst/2018/06/10/12/cea85a7b12a8df861088425200b43b1e_604x290_80.jpg"
        ],
        "meizhuangImglist":[
            "https://b.vimage1.com/upload/mst/2018/06/11/53/0bb659b137130f45de936fce60f99431_604x290_80.jpg",
            "https://b.vimage1.com/upload/mst/2018/06/12/30/bfc7291561078ad05047d275cfddfca7_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/07/39/ias_152837250337311_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/02/174/ias_152791504299532_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/04/172/ias_152808517547013_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/06/9/ias_152825409267894_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/02/09/77/ias_151814376124213_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/05/09/106/ias_152585776124735_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/12/137/ias_152878266391137_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/04/12/22/ias_152351476783062_604x290_80.jpg"
        ],
        "jiadianImglist":[
            "https://b.vimage1.com/upload/mst/2018/06/11/128/991614fa794aa1809627c300e05a8767_604x290_80.jpg",
            "https://b.vimage1.com/upload/mst/2018/06/11/161/b9bc72faac0e8cc0f8a557221b31bc9d_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/07/17/ias_152836114644876_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/02/02/165/ias_151754855585473_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/07/53/ias_152836466385103_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/05/10/153/ias_152591865270589_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/07/155/ias_152836765612517_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/05/16/130/ias_152646048078501_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/05/18/169/ias_152663431694211_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/05/176/ias_152816254162219_604x290_80.jpg"
        ],
        "jiajuImglist":[
            "https://b.vimage1.com/upload/mst/2018/06/08/0/cbd1732180e834a27b8874a4e69f66b4_604x290_80.jpg",
            "https://b.vimage1.com/upload/mst/2018/06/07/23/0869529ca3761386b0e9130b3c1f5a2e_604x290_80.jpg",
            "https://b.vimage1.com/upload/mst/2018/06/05/15/3e870b33cec90e43d63d0fb9cc579098_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/05/119/ias_152820199998884_604x290_80.jpg",
            "https://b.vimage1.com/upload/mst/2018/06/07/123/74ce5a3e4e88972470d78414d10345fe_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/09/178/ias_152851554068030_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2017/08/15/76/ias_150278253968565_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/05/11/21/ias_152602611864772_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/02/09/142/ias_151814287717429_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/07/28/ias_152835216343248_604x290_80.jpg"
        ],
        "guojiImglist":[
            "https://b.vimage1.com/upload/mst/2018/06/11/143/002d5f9a2948e6aed66c1afd97ddc47c_604x290_80.jpg",
            "https://b.vimage1.com/upload/mst/2018/06/08/90/f50425f591d46d32732d83397edf6012_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/01/31/55/ias_151737470529280_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/01/31/69/ias_151737515244688_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/05/24/46/ias_152714751025939_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/05/11/171/ias_152602721897866_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/04/10/87/ias_152334067320117_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/02/27/19/ias_151971744197878_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/11/115/ias_152868514634331_604x290_80.jpg",
            "https://b.vimage1.com/upload/mst/2018/05/14/94/3ee39731e9b34c63872bbf2bf4b8dc28_604x290_80.gif"
        ],
        "shenghuoImglist":[
            "https://a.vimage1.com/upcb/2018/05/10/178/ias_152593779756191_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/05/24/42/ias_152715382693755_604x290_80.jpg",
            "https://b.vimage1.com/upload/mst/2018/06/05/49/dc369f96734691b316bb6126f2f3c3b3_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/07/174/ias_152835318617869_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/06/12/184/ias_152877000079292_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/05/10/72/ias_152592429461132_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/04/27/32/ias_152482888135847_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/05/11/67/ias_152602436411366_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/02/26/152/ias_151961860066199_604x290_80.jpg",
            "https://a.vimage1.com/upcb/2018/05/14/185/ias_152626794854550_604x290_80.jpg"
        ],
        "broadcast":["forge商城移動端app1.0版本正式發(fā)布 歡迎來體驗(yàn) ^_^ pc端響應(yīng)式站點(diǎn)即將將上線~~~ 歡迎來戳 作者QQ:1421546334 Email:qcl9701s666@163.com Github:https://github.com/qiuChengleiy"],
        "active":{
            "tuijian_title":["新人專享","8折起 春夏新品官方店","0.5折起 朗姿集團(tuán)女裝專場","3折起 耐克Nike男女運(yùn)動專場","1.4折起 170元組合紅包-真美詩","3.1折起 歐萊雅Loreal化妝品專場","1.2折起 原創(chuàng)藝術(shù)專場-富安娜集團(tuán)","0.9折起簡狐女裝年輕媽媽裝","2.2折起 潮牌-芬克鯊魚FinkShark女裝","2.1折起 妖精的口袋ELFSACK女裝專場"],
            "shishang_title":["時(shí)尚風(fēng)暴","1件8.5折-仙潮女裝","時(shí)尚風(fēng)暴 仙潮女裝","0.7折起 雅瑩家族旗下品牌女裝專場","6.1折起 法國貝德瑪潔顏?zhàn)o(hù)膚專場","1折起 阿萊蒂爾女裝專場","2.1折起 百麗男女鞋專場","時(shí)尚風(fēng)暴-潮尚鞋包","時(shí)尚風(fēng)暴-時(shí)髦男裝","時(shí)尚風(fēng)暴-童裝童鞋"],
            "meizhuang_title":["世界杯High購節(jié)-美妝個護(hù)","美妝熱賣推薦","5.1折起 雅詩蘭黛化妝品","1.6折起 丸美MARUBI護(hù)膚專場","4.1折起 The History of Whoo專場","4.1折起 瑪麗黛佳彩妝專場","2.3折起 自然堂CHANDO化妝品專場","4.1折起 玉蘭油Olay護(hù)膚專場","3.1折起 歐萊雅Loreal化妝品專場","6.5折起 SK-ll化妝品專場"],
            "jiadian_title":["612粽香端午節(jié)-小家電","612粽香父親節(jié)-一級數(shù)碼開售","2.3折起 艾美特電風(fēng)扇","3.3折起 歐樂口腔護(hù)理專場","2.2折起 蘇泊爾電器專場","8.7折起 小米智能酷玩專場","1.7折起 美的廚電專場","1.7折起 科斯沃掃地機(jī)器人專場","8.2折起 BEATS時(shí)尚耳機(jī)專場","3折起 松下panasonic個人護(hù)理專場"],
            "jiaju_title":["父親節(jié) 一起愛爸!","世界杯High購節(jié)-家居家紡","超級預(yù)付-家居家紡","1.5折起 限時(shí)特惠","616 年中尖貨購","2.5折起 H&3收納日用專場","3.7折起 日本TIGER虎牌保溫杯專場","3.3折起 潔柔紙品直降專場","2.7折起 寶家潔 清潔用品專場","2.2折起 父愛如蔭-博洋特惠家紡專場"],
            "guoji_title":["安瓶助'仙'","國際616盛夏狂歡","4.3折起 日本Moony尤尼佳嬰","3.5折起 日本花妝嬰兒","3.7折起 日本澳洲Swisess天然營養(yǎng)膳食專場","5.7折起 阿迪達(dá)斯經(jīng)典休閑鞋","9折起 韓國宮廷化妝品專場","6.3折起 韓國時(shí)尚女裝專場","國際616盛夏狂歡-澳洲專場","韓國風(fēng)尚"],
            "shenghuo_title":["0.7折起 良品鋪?zhàn)有蓍e零食專場","1.6折起 三只松鼠零食專場","616預(yù)付-生活超市","1.7折起 八馬茗茶專場","2.2折起 百草味休閑零食專場","1.8折起 拉菲美酒專場","3.1折起 湯臣倍保健食品專場","2.2折起 新牧歌牛肉干食品專場","9.4折起 伊利牛奶專場","2.8折起 瀘州老窖美酒專場"],
            "days":["2","2","3","1","2","1","3","1","2","1"]
        }
    },
    "goods":{
        "id_0":{
            "title":[
                ["耐克Nike AIR ZOOM PEGASUS 34 男款跑鞋","耐克Nike TESSEN 女款運(yùn)動鞋","耐克Nike WMNS NIKE COURT ROYALE 女款運(yùn)動板鞋","耐克Nike 彈力透氣 中性款襪子 三對裝"],
                ["耐克Nike CLASSIC CORTEZ LEATHER 女款運(yùn)動鞋","耐克Nike 舒爽快干 男款運(yùn)動短褲","耐克Nike 排汗純棉 男款短袖T恤","耐克Nike TANJUN 男款運(yùn)動鞋"]
            ],
            "description":["耐克運(yùn)動跑鞋","耐克女款運(yùn)動鞋","耐克運(yùn)動女款板鞋","耐克彈力透氣 中性款"],
            "shops":["森馬官方旗艦店","耐克官方旗艦店","亞馬遜官方旗艦店","韓國潮流官方旗艦店"],
            "limit_price":[
                ["509","483","399","49"],
                ["615","159","175","419"]
            ],
            "original_price": [
                ["899","549","499","99"],
                ["699","349","149","499"]
            ],
            "discount":[
                ["5.7","8.8","8","4.9"],
                ["8.8","4.6","8.8","8.4"]
            ],
            "imgList": [
                [
                    "https://a4.vimage1.com/upload/merchandise/pdc/544/548/464510208477548544/0/880555-001-5_218x274_70.jpg",
                    "https://a2.vimage1.com/upload/merchandise/pdc/078/211/358093934211078/0/AA2172-601-5_218x274_70.jpg",
                    "https://a4.vimage1.com/upload/merchandise/pdc/708/957/442273793580957708/0/749867-112-5_218x274_70.jpg",
                    "https://a4.vimage1.com/upload/merchandise/pdc/104/287/298158490090287104/0/SX4703-001-5_218x274_70.jpg"
                ],
                [
                    "https://a2.vimage1.com/upload/merchandise/pdc/676/982/100563133647982676/0/807471-103-5_218x274_70.jpg",
                    "https://a4.vimage1.com/upload/merchandise/pdc/028/969/246648548803969028/2/833371-457-5_218x274_70.jpg",
                    "https://a4.vimage1.com/upload/merchandise/pdc/161/684/19498258958684161/0/343880-090-5_218x274_70.jpg",
                    "https://a4.vimage1.com/upload/merchandise/pdc/979/954/7584701095096954979/3/812654-011-5_218x274_70.jpg"
                ]
            ],
            "moreImg":[
                "https://a.vimage1.com/upload/merchandise/pdcvop/00605599/10000630/1534671224-217938183647330340-1_720x909_70.jpg",
                "https://a.vimage1.com/upload/merchandise/pdcvop/00605599/10000630/1534671224-217938183647330340-2_720x909_70.jpg",
                "https://a.vimage1.com/upload/merchandise/pdcvop/00605599/10000630/1534671224-217938183647330340-3_720x909_70.jpg"
            ]
        }
    },
    "community":{
        "author":["A.B.C","明天的早晨","周游世界","世界杯112","我最帥哇<(*￣▽￣*)/","HY.O","時(shí)尚達(dá)人ol","天王之王","大道至簡","天地之靈"],
        "watch":["602","1008","54","104","2萬+","669","200","440","2060","2099"],
        "grefContent":[
            "隨著服裝款式設(shè)計(jì)、創(chuàng)作鹊碍、流行的多樣化厌殉，服裝行業(yè)款式豐富度和以前不可同日而語。這給行業(yè)二級品類劃分侈咕，和商家類目選擇都帶來一定的影響公罕，根據(jù)目前春夏季類目劃分里，幾個比較有爭議的...",
            "很多朋友對于淘寶購物的看法都意見不一耀销，有買家說淘寶假貨橫行熏兄，稍不小心就可能購買到假貨，也有買家說淘寶購物便宜實(shí)惠树姨，未曾遇到過被騙或買到假貨的情況摩桶。到底淘寶怎么樣，應(yīng)該怎...",
            "其次帽揪，如果遇到價(jià)格相對高一點(diǎn)的商品硝清，自己又不敢確定的，最好問問周圍的朋友或相對有經(jīng)驗(yàn)的買家转晰，很多時(shí)候芦拿，是要一點(diǎn)經(jīng)驗(yàn)才能淘到貨真價(jià)實(shí)的產(chǎn)品的。要記住查邢，商人都非常精明蔗崎，虧本生意...",
            "再次，看信譽(yù)扰藕。除了信譽(yù)缓苛，更重要的是要看看其他買家的購買評價(jià)，有不少買家還是很熱心的對自己的購買到的商品進(jìn)行中肯評價(jià)的邓深。不過各位淘友要注意未桥，現(xiàn)在很多淘寶賣家利用刷手刷店鋪信...",
            "個人的經(jīng)驗(yàn)是皇冠以上的賣家不論是商品質(zhì)量還是服務(wù)笔刹、售后上都會比較有保障的，因?yàn)檫@部分賣家有一定的業(yè)務(wù)量冬耿，服務(wù)上做得比較好舌菜。還有就是一鉆以下買家，由于新店需要銷量升排名亦镶，因此...",
            "再看看店家是否已經(jīng)加入消費(fèi)者保障協(xié)會日月，但凡加入的店鋪，如果你購買的東西發(fā)生狀況的時(shí)候缤骨，才好索賠山孔。（當(dāng)然，最好不要發(fā)生狀況荷憋，因?yàn)橥素浰髻r畢竟是件很麻煩的事情。）現(xiàn)在許多淘寶導(dǎo)...",
            "我自己也是做淘寶的褐望，在我看來勒庄，買家的購物感受對我們很重要。所以我們在寶貝質(zhì)量和物流方面跟得很緊瘫里。特別是現(xiàn)在的物流实蔽，無論我是買家還是賣家我都不滿意，所以各位淘友在這方面不要給...",
            "真實(shí)的事情谨读。在繁榮和商人聊天,問是否正品,這是非常重要的局装。 返現(xiàn)網(wǎng)淘寶返還網(wǎng)有很多是灰色,香港、臺灣版本不是真實(shí)的東西劳殖。如果你想買真正的東西,你應(yīng)該說:“要求退款”不是真實(shí)的事情,返現(xiàn)...",
            "別人不能太低的目標(biāo),因?yàn)槊恳粋€老買家談判,協(xié)商學(xué)習(xí)很多,我將細(xì)節(jié):1想買你假裝無所謂铐尚。2說話太快,讓賣方猜你可能買沒關(guān)系。返現(xiàn)網(wǎng)哪個最好三個應(yīng)該講禮貌,善良,給賣家一個好印象,這樣他可...",
            "不讀商店信用是非常重要的《咭觯現(xiàn)在刷信譽(yù)方面,服務(wù)是最重要的宣增。淘寶返現(xiàn)網(wǎng)官網(wǎng)店主服務(wù)好,你幾美元是一件好事,不管以后貨物如果你有任何問題,售后服務(wù)或選擇好商店。是沒有用的可信度矛缨。有很..."
        ],
        "content":[
            "隨著服裝款式設(shè)計(jì)爹脾、創(chuàng)作、流行的多樣化箕昭，服裝行業(yè)款式豐富度和以前不可同日而語灵妨。這給行業(yè)二級品類劃分，和商家類目選擇都帶來一定的影響落竹，根據(jù)目前春夏季類目劃分里泌霍，幾個比較有爭議性的案列，已經(jīng)整理述召，需要大家達(dá)成定義的共識烹吵，避免類目混亂",
            "很多朋友對于淘寶購物的看法都意見不一碉熄，有買家說淘寶假貨橫行，稍不小心就可能購買到假貨肋拔，也有買家說淘寶購物便宜實(shí)惠锈津，未曾遇到過被騙或買到假貨的情況。到底淘寶怎么樣凉蜂，應(yīng)該怎樣才能避免被騙呢琼梆？下面讓我們一起來分享一下一位一皇冠淘寶買家的淘寶購物心得吧",
            "其次，如果遇到價(jià)格相對高一點(diǎn)的商品窿吩，自己又不敢確定的茎杂，最好問問周圍的朋友或相對有經(jīng)驗(yàn)的買家，很多時(shí)候纫雁，是要一點(diǎn)經(jīng)驗(yàn)才能淘到貨真價(jià)實(shí)的產(chǎn)品的煌往。要記住，商人都非常精明轧邪，虧本生意他們是絕對不會做的",
            "再次刽脖，看信譽(yù)。除了信譽(yù)忌愚，更重要的是要看看其他買家的購買評價(jià)曲管，有不少買家還是很熱心的對自己的購買到的商品進(jìn)行中肯評價(jià)的。不過各位淘友要注意硕糊，現(xiàn)在很多淘寶賣家利用刷手刷店鋪信譽(yù)院水，所以一定要看清楚評論內(nèi)容，內(nèi)容簡單隨便的反而是真實(shí)的简十，相反一定是假的",
            "個人的經(jīng)驗(yàn)是皇冠以上的賣家不論是商品質(zhì)量還是服務(wù)檬某、售后上都會比較有保障的，因?yàn)檫@部分賣家有一定的業(yè)務(wù)量螟蝙，服務(wù)上做得比較好橙喘。還有就是一鉆以下買家，由于新店需要銷量升排名胶逢，因此對貨品的質(zhì)量也會有更高的要求厅瞎，價(jià)格也比較真實(shí)和實(shí)惠",
            "再看看店家是否已經(jīng)加入消費(fèi)者保障協(xié)會，但凡加入的店鋪初坠，如果你購買的東西發(fā)生狀況的時(shí)候和簸，才好索賠。（當(dāng)然碟刺，最好不要發(fā)生狀況锁保，因?yàn)橥素浰髻r畢竟是件很麻煩的事情。）現(xiàn)在許多淘寶導(dǎo)購網(wǎng)的店鋪推薦可以參考下",
            "我自己也是做淘寶的，在我看來爽柒，買家的購物感受對我們很重要吴菠。所以我們在寶貝質(zhì)量和物流方面跟得很緊。特別是現(xiàn)在的物流浩村，無論我是買家還是賣家我都不滿意做葵，所以各位淘友在這方面不要給賣家太高要求，畢竟這塊兒我們賣家也沒辦法",
            "真實(shí)的事情心墅。在繁榮和商人聊天,問是否正品,這是非常重要的酿矢。 返現(xiàn)網(wǎng)淘寶返還網(wǎng)有很多是灰色,香港、臺灣版本不是真實(shí)的東西怎燥。如果你想買真正的東西,你應(yīng)該說:“要求退款”不是真實(shí)的事情瘫筐。返現(xiàn)網(wǎng)哪個最好",
            "別人不能太低的目標(biāo),因?yàn)槊恳粋€老買家談判,協(xié)商學(xué)習(xí)很多,我將細(xì)節(jié):1想買你假裝無所謂。2說話太快,讓賣方猜你可能買沒關(guān)系铐姚。返現(xiàn)網(wǎng)哪個最好三個應(yīng)該講禮貌,善良,給賣家一個好印象,這樣他可以給你最低的價(jià)格策肝。4必須說會介紹很多朋友惠顧。 52返現(xiàn)網(wǎng) 5個中的口才,你在這里購物市場的會知道如何玩一樣",
            "不讀商店信用是非常重要的∫啵現(xiàn)在刷信譽(yù)方面,服務(wù)是最重要的之众。淘寶返現(xiàn)網(wǎng)官網(wǎng)店主服務(wù)好,你幾美元是一件好事,不管以后貨物如果你有任何問題,售后服務(wù)或選擇好商店。是沒有用的可信度氢橙。有很多新店服務(wù)5鉆。返現(xiàn)網(wǎng)哪個最好 因?yàn)閯傞_店,都想做得更好,在優(yōu)質(zhì)售后非常嚴(yán)重恬偷。加上新生意不好做,當(dāng)然更多的感激你的支持悍手。返現(xiàn)網(wǎng)哪個最好"
        ]

    }
    
}

總結(jié)

這是我學(xué)vue做的第一個綜合性的項(xiàng)目，整個過程耗時(shí)差不多20天左右吧,由于平時(shí)還有課程作業(yè)(大三)要做,都是擠著周末做的o(╥﹏╥)o以后繼續(xù)完善這個項(xiàng)目
在做的過程中遇到了很多問題袍患，所以收獲了不少經(jīng)驗(yàn)坦康，再接再厲 ^_
一句話總結(jié)自己：繼續(xù)踩坑

文章原創(chuàng)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市诡延，隨后出現(xiàn)的幾起案子滞欠，更是在濱河造成了極大的恐慌，老刑警劉巖肆良，帶你破解...
沈念sama閱讀 221,695評論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件筛璧，死亡現(xiàn)場離奇詭異，居然都是意外死亡惹恃，警方通過查閱死者的電腦和手機(jī)夭谤，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,569評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來巫糙，“玉大人朗儒，你說我怎么就攤上這事。” “怎么了醉锄？”我有些...
開封第一講書人閱讀 168,130評論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵乏悄，是天一觀的道長。經(jīng)常有香客問我恳不，道長檩小，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 59,648評論 1贊 297
?港島之戀（遺憾婚禮）
正文為了忘掉前任妆够，我火速辦了婚禮识啦，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘神妹。我一直安慰自己颓哮，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 68,655評論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布鸵荠。她就那樣靜靜地躺著冕茅，像睡著了一般。火紅的嫁衣襯著肌膚如雪蛹找。梳的紋絲不亂的頭發(fā)上姨伤，一...
開封第一講書人閱讀 52,268評論 1贊 309
城市分裂傳說
那天，我揣著相機(jī)與錄音庸疾，去河邊找鬼乍楚。笑死，一個胖子當(dāng)著我的面吹牛届慈，可吹牛的內(nèi)容都是我干的徒溪。我是一名探鬼主播，決...
沈念sama閱讀 40,835評論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼金顿，長吁一口氣：“原來是場噩夢啊……” “哼臊泌！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起揍拆，我...
開封第一講書人閱讀 39,740評論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤渠概，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后嫂拴，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體播揪，經(jīng)...
沈念sama閱讀 46,286評論 1贊 318
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,375評論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年筒狠，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了剪芍。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 40,505評論 1贊 352
活死人
序言：一個原本活蹦亂跳的男人離奇死亡窟蓝，死狀恐怖罪裹，靈堂內(nèi)的尸體忽然破棺而出饱普，到底是詐尸還是另有隱情，我是刑警寧澤状共，帶...
沈念sama閱讀 36,185評論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布套耕，位于F島的核電站，受9級特大地震影響峡继，放射性物質(zhì)發(fā)生泄漏冯袍。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,873評論 3贊 333
男人毒藥：我在死后第九天來索命
文/蒙蒙一碾牌、第九天我趴在偏房一處隱蔽的房頂上張望康愤。院中可真熱鬧，春花似錦舶吗、人聲如沸征冷。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,357評論 0贊 24
一樁弒父案誓琼，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽检激。三九已至，卻和暖如春腹侣，著一層夾襖步出監(jiān)牢的瞬間叔收，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,466評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工傲隶，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留饺律，地道東北人。一個月前我還...
沈念sama閱讀 48,921評論 3贊 376
代替公主和親
正文我出身青樓跺株，卻偏偏與公主長得像复濒，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子帖鸦，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,515評論 2贊 359

記錄一次完整vue的項(xiàng)目過程

shop-vue移動端商城

項(xiàng)目概要

項(xiàng)目文檔說明

項(xiàng)目結(jié)構(gòu)

功能簡單介紹

main.js 項(xiàng)目入口文件

路由管理

狀態(tài)管理

組件

mock數(shù)據(jù)

總結(jié)

文章原創(chuàng)

推薦閱讀更多精彩內(nèi)容