商城（技术栈vue+vuecli+vant+axios）

1.细节配置

加粗样式配置Fastclick，在main中引入并使用即可

//1.引入 fastclick
import FastClick from "fastclick";
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

全局样式配置：创建common.less并引入main中即可

//2.引入 全局样式common.less
import './style/common.less'

common.less文件的内容

body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, textarea, button, input, select, figure, figcaption{
   
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  text-decoration: none;
  border: none;
  font-weight: normal;
  font-family: "Microsoft Yahei", serif;
  box-sizing: border-box;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing: antialiased;
  &:hover{
   
    outline: none;
  }
}

html,body{
   
  height: 100%;
  width: 100%;
  background-color: #F5F5F5;
}

/* 根据dpr显示2x图/3x图 */
.bg-image(@url){
   
  background-image:~"url('@{
   url}@2x.png')";
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
   
    background-image:~"url('@{
   url}@3x.png')";
  }
}

input,textarea {
   
  border: 0;
  -webkit-appearance: none;
}

全局引入vant，为了方便管理vant，我特意建了vant.js文件，用来存放引入的vant组件，只要记得把这个文件在main中引入即可

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory

安装插件 npm i babel-plugin-import -D

{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

rem配置

创建个rem.js

(function (doc, win) {
   
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
   
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 15 * (clientWidth / 320) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

由于rem是固定格式，只需要改动上面代码中的15就可以，并记得在main中引入即可

ok，到此基本就配置就已经完成了，开始撸起袖子加油干

2.集成TabBar 导航

<template>
    <div class="dashboard">
        <van-tabbar v-model="active">
            <van-tabbar-item >
                <span>首页</span>
                <img
                        slot="icon"
                        slot-scope="props"
                        :src="props.active ? home_icon.active : home_icon.normal"
                >
            </van-tabbar-item>
            <van-tabbar-item>
                <span>分类</span>
                <img
                        slot="icon"
                        slot-scope="props"
                        :src="props.active ? category_icon.active : category_icon.normal"
                >
            </van-tabbar-item>
            <van-tabbar-item info="3">
                <span>购物车</span>
                <img
                        slot="icon"
                        slot-scope="props"
                        :src="props.active ? shoppingcart_icon.active : shoppingcart_icon.normal"
                >
            </van-tabbar-item>
            <van-tabbar-item>
                <span>我的</span>
                <img
                        slot="icon"
                        slot-scope="props"
                        :src="props.active ? mine_icon.active : mine_icon.normal"
                >
            </van-tabbar-item>

        </van-tabbar>
    </div>
</template>
<script>
    // 1. 引入
    export default {
    
        name: "Dashboard",
        data() {
    
            return {
    
                active: Number(window.localStorage.getItem("activeIndex")||0),
                home_icon: {
    
                    normal: require('@/images/tabbar/home_default.png'),
                    active: require('@/images/tabbar/home_selected.png')
                },
                category_icon: {
    
                    normal: require('@/images/tabbar/category_default.png'),
                    active: require('@/images/tabbar/category_selected.png')
                },
                shoppingcart_icon: {
    
                    normal: require('@/images/tabbar/shoppingcart_default.png'),
                    active: require('@/images/tabbar/shoppingcart_selected.png')
                },
                mine_icon: {
    
                    normal: require('@/images/tabbar/mine_default.png'),
                    active: require('@/images/tabbar/mine_selected.png')
                },
            }
        },
        watch:{
    
           
        },
        computed: {
    
         
        },
        mounted(){
    
        
        },
        methods:{
    
     
        }
    }
</script>

3.封装axios

//ajax.js
import axios from 'axios'

export default function ajax(url = '', params = {
   }, type = 'GET') {
   
    // 1. 变量
    let promise;

    // 2. 返回一个promise对象
    return new Promise((resolve, reject) => {
   
        // 2.1 判断请求的类型
        if (type.toUpperCase() === 'GET') {
    // get请求
            // 2.2 拼接字符串
            let paramsStr = '';
            // 2.3 遍历
            Object.keys(params).forEach(key => {
   
                paramsStr += key + '=' + params[key] + '&';
            });
            // 2.4 过滤最后的&
            /*
              注意：为了防止请求缓存，在尾部加了时间戳
            */
            if (paramsStr) {
   
                paramsStr = paramsStr.substr(0, paramsStr.lastIndexOf('&'));
                // 2.5 拼接完整路径
                if(url.indexOf('47.98.157.152') === -1) {
   
                    url += '?' + paramsStr + '&itlike=' + randomCode(20);
                }else {
   
                    url += '?' + paramsStr;
                }
            }else {
   
                if(url.indexOf('47.98.157.152') === -1){
   
                    url += '?itlike=' + randomCode(20)
                }
            }
            // 2.6 发起get请求
            promise = axios.get(url);
        } else if (type.toUpperCase() === 'POST') {
    // post请求
            // 2.7 发起post请求
            promise = axios.post(url, params);
        }
        // 2.8 处理结果并返回
        promise.then((response) => {
   
             resolve(response.data);
        }).catch(error => {
   
             reject(error);
        })
    });

}

/*生成指定长度的随机数*/
function randomCode(length) {
   
    let chars = ['0','1','2','3','4','5','6','7','8','9'];
    let result = "";
    for(let i = 0; i < length ; i ++) {
   
        let index = Math.ceil(Math.random()*9);
        result += chars[index];
    }
    return result;
}

//index.js
import ajax from './ajax'

4.首页的设计

1.获取首页数据

//index
// 1. 定义基础路径
const BASE_URL = 'http://demo.itlike.com/web/xlmc';

export const getHomeData = () => ajax(BASE_URL + '/api/homeApi');

//Home.vue

2.集成头部导航

先设计头部导航组件，再引入home中

<template>
    <div class="wrapper">
        <div class="locationWrapper">
            <svg viewBox="0 0 32 32" class="icon iconLocation">
                <path fill="#81838E" fill-rule="evenodd"
                      d="M14.521 30.445c.817.738 2.142.75 2.958 0 0 0 11.521-9.82 11.521-17.158C29 5.95 23.18 0 16 0S3 5.949 3 13.287c0 7.339 11.521 17.158 11.521 17.158zM16 18a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"></path>
            </svg>
            <span class="address">{
  {0 || '华南农业大学'}}</span>
            <svg viewBox="0 0 32 32" class="icon iconArrow">
                <path fill="#81838E" fill-rule="evenodd"
                      d="M14.724 19.17c.783.784 2.05.788 2.837 0l5.047-5.047c1.173-1.172.776-2.123-.869-2.123H10.545c-1.652 0-2.04.952-.869 2.123l5.048 5.048z"></path>
            </svg>
        </div>
        <div class="searchWrapper">
            <div class="searchContent">
                <div class="iconSearchWrapper">
                    <svg viewBox="0 0 32 32" class="icon iconSearch">
                        <path fill="#999" fill-rule="evenodd"
                              d="M23.624 21.503c3.47-4.51 3.14-11.003-.992-15.135-4.491-4.49-11.773-4.49-16.264 0-4.49 4.491-4.49 11.773 0 16.264 4.132 4.131 10.625 4.462 15.135.992l4.66 4.66a1.5 1.5 0 1 0 2.121-2.121l-4.66-4.66zm-3.114-.993A8.5 8.5 0 1 0 8.49 8.49a8.5 8.5 0 0 0 12.02 12.02z"></path>
                    </svg>
                </div>
                <span class="searchPrompt">输入商品名称</span>
            </div>
        </div>
    </div>
</template>

********                  **********              *************              **********       ************

//Home.vue
<template>
    <div class="home">
        <Header/>
    </div>
</template>

3.深度集成轮播图

参考文档，引入基本模板

<template>
        <swiper :options="swiperOption" ref="mySwiper" class="swiper">
            <!-- slides -->
            <swiper-slide>I'm Slide 1</swiper-slide>
            <swiper-slide>I'm Slide 2</swiper-slide>
            <swiper-slide>I'm Slide 3</swiper-slide>
            <swiper-slide>I'm Slide 4</swiper-slide>
            <swiper-slide>I'm Slide 5</swiper-slide>
            <swiper-slide>I'm Slide 6</swiper-slide>
            <swiper-slide>I'm Slide 7</swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
            <!--<div class="swiper-button-prev" slot="button-prev"></div>-->
            <!--<div class="swiper-button-next" slot="button-next"></div>-->
            <!--<div class="swiper-scrollbar"   slot="scrollbar"></div>-->
        </swiper>

</template>

<script>
    import 'swiper/dist/css/swiper.css'

    import {
     swiper, swiperSlide } from 'vue-awesome-swiper'
    import Swiper from "swiper";
    export default {
    
        name: "Sowing",
       data(){
    
            return{
    

            }
       },
        props:{
    
            "sowing_list":Array
        },
        components: {
    
            swiper,
            swiperSlide
        },
        computed: {
    
        },
        mounted() {
    
            this.$nextTick(()=>{
    
                new Swiper(".swiper",{
    
                        pagination: {
    
                            el: '.swiper-pagination',
                            clickable:true,
                            type:"fraction"
                        },
                        //环路
                        loop : true,
                        //自动播放
                        autoplay:{
    
                            delay:1000
                        },
                        speed:800,
                        effect : 'cube',

                })
            })
        }
    }
</script>

<style scoped lang="less">
    .swiper{
    
        width: 100%;
        height: 15rem;
        background-color: red;
        margin-top</