/**
* 业务线的代码解析
*/
一, 对于页面DNS - prefetch预获取提升页面载入速度,浏览器载入页面时候对于当前的域名进行解析和缓存,
当点击页面的时候无需进行DNS解析,减少了用户等待的时间,提供了用户体验
1,减少DNS请求次数
2,另一个就是进行DNS预获取
使用: <link rel="dns-prefetch" href="//static.daojia.com">
mian.js--代码解析
1,babel - polyfill:有些浏览器对于es6支持还不是很完善所有需要添加(babel - polyfill)
2,import Meta from 'vue-meta'
Vue.use(Meta)
引入vue-meta可以直接对头部的TITLE进行设置
3,import VueAwesomeSwiper from 'vue-awesome-swiper'
支持轮播的组件的引用
二,将
// 封装的http方法
1, Vue.prototype.$http = http
代码实例如:
2,使用模块的按需加载,提高首屏效率
const Mall = () => import(/* webpackChunkName: "group-mall" */ '@/views/Mall')
/**
* 封装了http的案例
*/
import axios from 'axios'
import qs from 'qs'
/**
* 全局ajax调用
* @param {string} url 接口url
* @param {string} method 请求方式 get/post
* @param {object} params 请求参数对象,get和post请求会自动拼到该待的地方
* @param {function} callback 成功回调,非必填
* @param {function} error 失败回调,非必填(如果不填将由全局报错进行处理)
* @param {boolean} noQs 非必填,个别奇葩表单不需要QS处理,传这个参数
* @description 封装的方法会加入Vue.prototype上,调用示例:
* this.http('/api/getInfo', 'get', {
* name: 'abc'
* }, res => {
* console.log('接口返回数据', res)
* }, err => {
* console.log('接口报错', err)
* })
*/
function http (url, method, params, callback, error, noQs) {
axios({
url,
method,
params: method === 'get' && params !== null ? params : null, // get请求参数,会拼接到url后面
data: method === 'post' && params !== null ? (noQs ? params : qs.stringify(params)) : null, // post请求参数,位于请求体,qs转换可选
withCredentials: true // 允许携带跨域许可(authorization和cookie),使用三端统一登录之类接口需要用到
})
.then(res => {
// 请求成功回调
let result = res.data
if (result.code === 0) {
// 与后台约定的成功状态码
callback && callback(result)
} else {
// 错误处理,优先以自定义的的handle进行处理,没有则统一进行错误处理
if (error) {
error(result)
} else {
console.log('接口报错', result)
// 可进行特殊错误码的全局处理,如token失效等
}
}
})
.catch(err => {
// 请求失败处理
console.log('网络开小差', err)
error && error(err)
})
}
export default http