#rem适配
1.安装插件
$ npm install postcss-pxtorem --save-dev
2.配置 package.json
"postcss": {
"plugins": {
"autoprefixer": {
},
"postcss-pxtorem": {
"rootValue": 75,
"propList": [
"*"
]
}
}
}
#按需引入
1.安装插件
yarm add bable-plugin-import -D(-D可写可不写)
2.页面使用
import {
input,button} from 'xxxx' //文件
#proxy代理
1.配置vue.config.js （没有则创建） 可参考devserverProxy
module.exports={
lintOnSave:flase,
devServer:{
proxy:"http://nexxc.com/api/4" //请求接口的公共部分
}
}
完成配置，这样请求数据接口时只需写公共http后面不同的接口路径即可。原理:当页面请求接口时都会进入代理这个接口。
#api封装
1.创建api文件夹，文件axios.js,index.js
axios.js :封装请求头，请求响应文等
import axios from 'axios';
import qs from 'qs';
axios.defaults.baseURL = "";
axios.defaults.withCredentials = true;
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = data => qs.stringify(data);
axios.interceptors.response.use(response => {
return response.data;
});
export default axios;
index.js :引入axios,封装公共api
import axios from './axios';
const api = {
latest() {
return axios.get('/newsxxc/latest');
},
before(time) {
//接口携带的参数
return axios.get(`/newsxxc/before/${
time}`); //动态获取参数 用${
}
},
detail(id) {
return axios.get(`/newsxxc/${
id}`);
}
};
export default api; //导出api 以便后续调用
2.页面使用 请求接口
(1)先全局暴露或局部引入使用
全局：在main.js配置
import api from './api/index'
Vue.prototype.$api = api; //写在原型上即可全局调用
也可以局部，只要在需要请求的页面引入即可
import api from './api/index' //路径看自己的
（2）如何调用 this.$api.方法(参数)
扫描二维码关注公众号，回复：
16140560 查看本文章
比如：
methods: {
loadMore() {
//加载更多
let timer = setTimeout(async () => {
//500秒后获得数据
let result = await this.$api.before(this.lastTime);
let {
date, stories } = result; //定义获取接口返回的结果
this.loading = false;
this.lastTime = date;
this.list = this.list.concat(stories); //拿现有数据与响应数据拼接在一起
clearTimeout(timer);
}, 500);
}
}
#组件封装
1.创建组件文件 banner.vue
2.在页面上引入组件
步骤:1引入2注册3使用
1.引入：
import Banner from "../components/Banner.vue";
2.注册
components: {
Banner
},
3.使用
<Banner :bannerData="bannerList"></Banner>
注::bannerData="bannerList" //为子组件携带数据
banner.vue
<template>
<van-swipe :autoplay="3000">
<van-swipe-item v-for="item in bannerData" :key="item.id" @click="handle(item.id)">
<img :src="item.image" alt />
<div class="info">
<h3>{
{
item.title}}</h3>
<span>{
{
item.hint}}</span>
</div>
</van-swipe-item>
</van-swipe>
</template>
<script>
export default {
props: ["bannerData"], //获取父组件携带过来的数据
methods: {
handle(id) {
this.$router.push(`/detail/${
id}`);
}
}
};
</script>
<style lang="less" scoped>
.van-swipe {
height: 6rem;
overflow: hidden;
background: #eee;
.van-swipe-item {
position: relative;
img {
display: block;
width: 100%;
}
.info {
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
padding: 0.2rem;
width: 100%;
color: #fff;
background: linear-gradient(
0,
rgba(55, 86, 103, 0.5),
rgba(55, 86, 103, 0)
);
h3 {
font-size: 0.36rem;
line-height: 0.6rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
span {
font-size: 0.28rem;
line-height: 0.6rem;
}
}
}
}
</style>