Project scene

There are PC non-background, information introduction projects, technology stack Vue, Nuxt.

Now the business wants to add mobile terminal entrance, the PC is rectified as a concise version of H5

There are two solutions:

  • Add pages to the original PC project

    • Advantages: Reusable server interface, static resources, etc

    • Disadvantages: mobile terminal need to be adapted, code does not conform to the specification

  • New project

    • Advantages: can be completely as H5 to do
    • Disadvantages: non-reusable server interface, static resources, workload than the former

Question: What is the correct way to deal with it? We welcome your comments ~ ~ ~

After discussion, we chose the new project


Developed based on Vue H5 (personal record only)

1. Initialize the project using vue-CLI: vue init webpack

2. Mobile adaptation:

Use flexible solution

NPM install lib-flexible --save delete <meta name= from index. HTML"viewport" content="Width = device - width, initial - scale = 1.0"< span style = "box-sizing: border-box; color: RGB (51, 51, 51); Const cssLoader = {loader: const cssLoader = {loader: const cssLoader = {loader: const cssLoader = {loader: const cssLoader;'css-loader',
    options: {
      sourceMap: options.sourceMap, importLoader: 5 // Number of loaders loaded before loading cssLoader}} // add the following code const px2remLoader = {loader:'px2rem-loader', options: {emUnit: 75 // 1/10 of the draft}} Modify the generateLoaders methodfunction 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
        })
    })
}
Copy the code

Refresh and open the console to see that the PX in the code has been converted to REM

The font needs to be PX

On the iPhone3G and iPhone4’s Retina display, the text size you want to see is the same. That said, we don’t want text to get smaller on Retina display, we want to see more text on larger phones, and most font files now come with some sort of dot matrix size, usually 16px and 24px, so we don’t want 13px and 15px.

As a result, rem is not appropriate for paragraph text on H5 pages. Therefore, in Flexible overall adaptation, consider using PX as the unit for text. Only the [data-dPR] attribute is used to distinguish between the text size under different DPR.

Customize a font DPR ()Sass blend macro

@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; }}Copy the code

Introduced in the main. Js

import './assets/css/common.scss'
Copy the code

Used in page components

@include font-dpr(18px);
Copy the code

Why not use px2REm-loader to implement font PX

Vue <style scoped lang="scss">

font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/<style> default CSS <style> default CSS <style> default CSS <styleCopy the code

3. Encapsulate AXIOS to unify interface management

http.js

import axios from 'axios';
import qs from 'qs';
import {Toast} from "vant"; // Response time axios.defaults.timeout = 5000; / / configuration request header axios. Defaults. Headers. Post ['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

// let baseUrl="http://localhost:8081/api";
let baseUrl=""; / / POST preach and serialized request interceptor (add) axios. Interceptors. Request. Use ((config) = > {/ / before sending a request to do somethingif(config.method  === 'post'){
    config.data = qs.stringify(config.data);
  }
  return config;
},(error) =>{
  Toast('Incorrect parameter passing');
  returnPromise.reject(error); }); / / return status determine response interceptor (add) axios. Interceptors. Response. Use ((res) = > {/ / do something for the response dataif(! res.data.success){return Promise.resolve(res);
  }
  return res;
}, (error) => {
  returnPromise.reject(error); }); // Return a Promise(send post request)export function fetchPost(url, params) {
  returnnew Promise((resolve, reject) => { axios.post(baseUrl+url, params) .then(response => { resolve(response.data); }, err => { reject(err); }). Catch ((error) => {reject(error)})})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,
}
Copy the code

api.js

import { fetchGet, fetchPost } from "./http"; /** * get something */export const getSomething = () => {
  return fetchGet("/getSomething");
};

export default {
    getSomething
}
Copy the code

Use *. Vue

 import Api from ".. /data/api";
  export default {
    name: 'Index'.data () {
      return{}},mounted() {
      Api.getStudentList().then(res => {
          console.log(res)
      })
    }
  }
Copy the code

4. reset css

App.vue

<style>
  #app {
    margin: 0;
    overflow: hidden;
  }
  html {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    font-family: "Black";
  }
  input[type="submit"],input[type="reset"],input[type="button"],input:focus,button:focus,select:focus,textarea:focus{
    outline: none;
  }
  input{
    font-family: "Black";
    -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: 'bold',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>Copy the code

5. Other points

Vue-awesome-swiper realizes the small rotation of the middle and the two sides

Vue props listens for pit changes

Vue passes photo addresses to the pits of child components via props

  • The image is in the static folder and can be passed directly
img:".. /.. /static/list_1.png".Copy the code
  • If you are in assets, require is passed in, otherwise Webpack will not resolve the correct path

Continue to record