First use nuxt.js scaffolding and API related use will not be repeated here, because the official website is more detailed.

First, build page adaptation

This works by dividing the width of the screen by the width of the UI design and multiplying it by whatever you think is easier to calculate (for example: ScreenWidth / 750 * 10 = 75rem/screenWidth / 750 * 10 = 750px

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if(! clientWidth)return;
            docEl.style.fontSize = 10 * (clientWidth / 750) + 'px';
        };
    if(! doc.addEventListener)return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded'.function() { recalc(); FastClick.attach(doc.body); // Fix mobile browser click event delay of 300ms},false);
})(document, window);
Copy the code

(// Here 1rem = 10px on the 640 device, automatically adjusts to this ratio for other screen widths)

Second, mobile phone with click 300ms delay

The main reason for the 300 ms delay is to solve double tap to zoom. Double zoom, as the name suggests, involves two quick finger taps on the screen, and the Safari browser that comes with iOS scales the web to its original proportions. So what does this have to do with the 300 millisecond delay? Consider this scenario. The user clicks on a link in iOS Safari. Since the user can double click to zoom or double click to scroll, once the user clicks the screen, the browser can’t immediately determine whether the user actually wants to open the link or whether the user wants to double click. So iOS Safari waits 300 milliseconds to see if the user has clicked on the screen again. Given the success of the iPhone, other mobile browsers have copied most of the conventions of the iPhone’s Safari browser, including double-clicking to zoom, which is now available on almost all mobile browsers.

There are many ways to solve this problem, but I chose to use faskclick.js(github.com/ftlabs/fast…). To solve the problem of introducing js files in the project nuxt.config.js file

head: {
    title: 'Linglong AI Intelligent Car Loan',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'user-scalable=no'},
      // { name: 'viewport', content: 'width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = 0'},
    ],
    link: [
      { rel: 'icon'.type: 'image/x-icon', href: './favicon.ico' },
      { rel: 'stylesheet', href: '/reset.css' }
    ],
    script: [
      { src: '/zoomSize.js' },
      { src: '/fastclick.js' },//fastclick在这里
    ],
  },
Copy the code

After the file is imported, it must be instantiated. I put the fastclick.js instantiation in the JavaScript file above to build page adaptation, because FastClick must be introduced before the project is instantiated

3. Interface request

Here I use nuxT-axios (NPM i@nuxtjs /axios). The package is as follows

import Vue from 'vue'
export default function ({ $axios, redirect }) {
  // request interceptor
  // $axios.defaults.baseURL = ' '// Test the API address$axios.defaults.baseURL = 'https://carloans.appdld.com'// Official API address //$axios.interceptors.request.use(config => {
  //     let keys = config.method && config.method == 'post' ? 'data' : 'params'
  //     letAddHeaderData = config[keys]. AddHeaderParam //addHeaderParam is an additional parameter that needs to be passed to the header, which is defined in the request parametersif(addHeaderData) {/ / extra parameter in the header / / Object. The assign (config. Headers, addHeaderData) / /} / /if(config[keys].dataType && config[keys].dataType == 'formData') {// If the back end needs formData, add dataType to the request parameters:'formData'
  //       config[keys] = config[keys].requestFormData
  //     }else{// delete config[keys]. AddHeaderParam // remove additional header arguments to avoid being sent to request parameters //} //return config
  //   },
  //   error => {
  //     console.log('err' + error) // for debug
  //     return Promise.reject(error)
  //   }
  // )
  $axios. Interceptors. Request. Use (config = > {/ / do something before sending a request / / console log (config)returnConfig}, error => {// What to do about the request errorreturn Promise.reject(error)
  })
 

  // response interceptor
  $axios.interceptors.response.use(response => {
      return response.data 
    },
    error => {
      console.log('err' + error) // for debug
      Vue.prototype.$notice('Server error')
      return Promise.reject(error)
    }
  )
}
Copy the code

This file needs to be placed in the plugins folder, as shown in the nuxt.config.js file

plugins: [
    '@/plugins/axios',].Copy the code

Specific call method:

this.$axios.post('url', params).then(res => {

})
Copy the code

Notice Indicates the encapsulation of UI plug-ins

Since I only need to use Noitce message in my project, it would be too inappropriate to introduce Vant and other UI frameworks, so I wrote a specific implementation by myself. Referring to the plug-in packaging method of NUxT framework, I created notice.js in the plugins file, and the code is as follows: // Message prompt box

import Vue from 'vue'
Vue.prototype.$notice = (message) => {
    let bodyDom = document.getElementsByTagName("body") [0]let docHeight = window.screen.availHeight / 10
    letScreenHeight = docHeight > 133.4? DocHeight: 133.4let domParent = document.createElement('div')
    domParent.setAttribute('style', `width: 75rem;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;`
    );
    domParent.style.height = screenHeight + 'rem';
    let domChildren = document.createElement('span')
    domChildren.setAttribute('style', `display: block; width: auto; height: 8rem; padding: 0rem 3rem; Background: rgba (0,0,0,0.5); line-height: 8rem; text-align: center; The font - size: 2.8 rem; color:#FFFFFF;Border - the radius: 1.2 rem; `);let nodetext = document.createTextNode(message)
    domChildren.appendChild(nodetext)
    domParent.appendChild(domChildren)
    bodyDom.appendChild(domParent)
    setTimeout(() => {
        bodyDom.removeChild(domParent)
    },2000)
}
Copy the code

Usage:

Vue.prototype.$notice('Server error')
Copy the code

or

this.$notice('Server error')
Copy the code

Of course, there is more than one plug-in encapsulation method, such as vue. use, the specific implementation method is not described here

5. Dynamic rendering frame

Its principle nuXT official website says very detailed

If you think it’ll work for you, give me a little star. If you have a better suggestion please leave me a comment here is not a war of words