【項目記錄】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監聽變化的坑