rem适配，按需引入，proxy代理，api封装，组件封装

#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.方法(参数)

比如：
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">
 注::bannerData="bannerList"  //为子组件携带数据

banner.vue