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</