[JavaScript知识库]vue项目的搭建

// index.js 
import axios from 'axios';
axios.defaults.baseURL = 'http://xxx';
axios.interceptors.request.use(config => {
  //可以设置请求头的信息等
  return config;
})
axios.interceptors.response.use(response => {
 //可以对响应数据进行处理...
  return response;
})
export defaults axios

//request.js文件
import axios from '.';   // '.' <==> './index.js'
export function apigetList() {
   return axios({
     method:'get',
     url: '/xxx',
   })
}

3. 性能优化，对图片进行懒加载
   选择插件的时候，尽量选择vue框架使用的，用jquery封装的会破坏尽量不用节点的原则，降低vue框架的使用性能

在main.js引入 lazyload
import vueLazyLoad from 'vue-lazyload'
// src可以是一个加载动画，v-lazy里面存放的才是真实图片地址
<img src="xxx" v-lazy="img_url" />

4. 懒加载的原理
   通过检测当到达某个距离的时候，才将地址赋值给img中的自定义的数据中的地址给src

<img src="xxx" data-src="真实图片地址" />