【项目记录】Vue H5适配/vue中Axios的封装

项目场景

已有PC非后台、资讯介绍类项目，技术栈Vue、Nuxt。css

如今业务上想添加移动端入口，将PC整改成简洁版的H5html

两种解决方案：vue

在原有PC项目上加页面webpack
- 优势：可复用服务端接口，静态资源等ios
- 缺点：移动端需作适配，代码上不太符合规范web
新建项目vue-cli
- 优势：可彻底看成H5来作
- 缺点：不可复用服务端接口，静态资源等，工做量比前者大

疑问：正确处理方式是？？欢迎各位给出看法～～～npm

通过商榷，咱们选择了新建项目axios

基于Vue H5开发（仅我的记录）

1. 使用vue-cli初始化项目：vue init webpack

2. 移动端适配：

使用手淘flexible方案

npm install lib-flexible --save   
删除index.html中
<meta name="viewport" content="width=device-width,initial-scale=1.0">
由于lib-flexible会自动插入，若是写了，会用默认的

npm install px2rem-loader --save-dev
在build/utils.js文件找到cssLoader 方法下添加以下代码
const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      importLoader: 5 // 在加载cssLoader以前加载的loader个数
    }
}
//添加以下代码
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      emUnit: 75 // 设计稿的1/10
    }
}
修改 generateLoaders 方法
function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
    })
}
复制代码

刷新，打开控制台能够看到代码中的px已经被转成了remapi

字体须要用px

在iPhone3G和iPhone4的Retina屏下面，但愿看到的文本字号是相同的。也就是说，咱们不但愿文本在Retina屏幕下变小，另外，咱们但愿在大屏手机上看到更多文本，以及，如今绝大多数的字体文件都自带一些点阵尺寸，一般是16px和24px，因此咱们不但愿出现13px和15px这样的奇葩尺寸。

如此一来，就决定了在制做H5的页面中，rem并不适合用到段落文本上。因此在Flexible整个适配方案中，考虑文本仍是使用px做为单位。只不过使用[data-dpr]属性来区分不一样dpr下的文本字号大小。

定制一个font-dpr()Sass混合宏

@mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}
复制代码

在main.js引入

import './assets/css/common.scss'
复制代码

在页面组件使用

@include font-dpr(18px);
复制代码

为何不用px2rem-loader实现字体px

Vue 在<style scoped lang="scss">

font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
不生效，依旧转为rem

猜测是由于scss将诸事注销致使

在<style>默认的css中会生效
复制代码

3. 封装axios，统一接口管理

新建data文件夹，http.js 用来封装axios，api.js 用来统一管理接口

http.js

import axios from 'axios';
import qs from 'qs';
import {Toast} from "vant";

//响应时间
axios.defaults.timeout = 5000;
//配置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// let baseUrl="http://localhost:8081/api";
let baseUrl="";

//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
  //在发送请求以前作某件事
  if(config.method  === 'post'){
    config.data = qs.stringify(config.data);
  }
  return config;
},(error) =>{
  Toast('错误的传参');
  return Promise.reject(error);
});


//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
  //对响应数据作些事
  if(!res.data.success){
    return Promise.resolve(res);
  }
  return res;
}, (error) => {
  return Promise.reject(error);
});

//返回一个Promise(发送post请求)
export function fetchPost(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(baseUrl+url, params)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}

//返回一个Promise(发送get请求)
export function fetchGet(url) {
  return new Promise((resolve, reject) => {
    axios.get(baseUrl+url)
      .then(response => {
        resolve(response.data)
      }, err => {
        reject(err)
      })
      .catch((error) => {
        reject(error)
      })
  })
}
export default {
  fetchPost,
  fetchGet,
}
复制代码

api.js

import { fetchGet, fetchPost } from "./http";

/**
 * 获取something
 */
export const getSomething = () => {
  return fetchGet("/getSomething");
};

export default {
    getSomething
}
复制代码

*.vue使用

import Api from "../data/api";
  export default {
    name: 'Index',
    data () {
      return {

      }
    },
    mounted() {
      Api.getStudentList().then(res => {
          console.log(res)
      })
    }
  }
复制代码

4. reset css

App.vue

<style>
  #app {
    margin: 0;
    overflow: hidden;
  }
  html {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    font-family: "黑体";
  }
  input[type="submit"],input[type="reset"],input[type="button"],input:focus,button:focus,select:focus,textarea:focus{
    outline: none;
  }
  input{
    font-family: "黑体";
    -webkit-appearance:none;
    resize: none; border-radius: 0;
  }
  body,div,ul,li,ol,h1,h2,h3,h4,h5,h6,input,textarea,select,p,dl,dt,dd,a,img,button,form,table,th,tr,td,tbody,article,
  aside, details,figcaption,figure,footer,header,hgroup, menu,nav,section{
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
  }
  article, aside, details,figcaption,figure,footer,header,hgroup, menu,nav,section {
    display: block;
  }
  img {
    max-width: 100%;
    height: auto;
    width:auto\9;
    -ms-interpolation-mode:bicubic;
  }
  body,div,ul,li,ol,h1,h2,h3,h4,h5,h6,input,textarea,select,p,dl,dt,dd,a,img,button,form,table,th,tr,td,tbody,article,
  aside, details,figcaption,figure,footer,header,hgroup, menu,nav,section{
    margin:0;
    padding:0;
    border:none;
  }
  em,i{
    font-style:normal;
  }
  strong{
    font-weight: normal;
  }
  .clearfix:after{
    content:"";
    display:block;
    visibility:hidden;
    height:0;
    clear:both;
  }
  .clearfix{zoom:1;}
  a{
    text-decoration:none;
    color:#333;
    font-family: '黑体',Microsoft YaHei,Tahoma,Arial,sans-serif;}
  a:hover{
    color:#FED503;
    text-decoration:none;
  }
  ul,ol{
    list-style:none;
  }
  h1, h2, h3, h4, h5, h6{
    font-size:100%;
    font-family: Microsoft YaHei;
  }
  img{
    border: none;
  }
  b {
    font-size: 100% !important;
  }
  span{
    font-size: 100% !important;
  }
</style>
复制代码

5. 其余点

一、vue-awesome-swiper 实现中间大两边小轮播

二、vue props监听变化的坑