The original link: https://juejin.cn/post/6844903619238559751

1. The new CLI tool generates the project configuration Webpack and creates vue.conf.js in the root path

Module. exports = {configureWebpack: config => {// Modify configuration for production environment... If (process.env.node_env === 'production') {// the HTML file imports the absolute address config.output.publicPath = "// the map file config.devtool = is not generated false; } else {// Modify the configuration for the development environment... }}}Copy the code

2. NPM run serve automatically starts. Open the browser using the local IP address

"Serve ": "vue-cli-service serve --open --host 192.168.1.169"Copy the code

Windows system can use ipconfig in CMD to check the local IP, and then directly copy the address to the mobile phone, debugging page on the mobile phone, provided that the mobile phone and your computer are in the same network environment

3. Click on the mobile terminal to clear the 300ms delay

import FastClick from'fastclick'window.addEventListener('load', () => {
    FastClick.attach(document.body)
})
Copy the code

Introduce code in main.js, and both pages and components can bind events directly using @click

4. Use REM to write mobile pages

//main.js introduces the dependency import 'amfe-flexible' //_base. SCSS design width divided by 10, if the design width is 750px then the base width is 75 $baseWidthSize: 75! default; @function to($px) { @return $px / $baseWidthSize * 1rem; } // Component and page usage; <style lang=" SCSS "> @import ".. /scss/_base.scss"; .box{ width: to(750); height: to(100); } </style>Copy the code

5. Pull-up loading of custom instructions (scroll inside div)

//main.js import directive from'./directive' directive(Vue) //./directive/index.js import ScrollFix from'scrollfix'exportdefault (Vue) => { Vue.directive('scroll', { inserted: (el) => { new ScrollFix(el); }}); Vue.directive('pull', { bind: (el, binding, vnode) => { if (! binding.value) { return; } let { self } = binding.value; el.addEventListener('scroll', utils.throttle(() => { let { scrollTop, offsetHeight, scrollHeight } = el; If ((scrollHeight - offsetHeight - scrollTop < 200) && self.isMore) {self.isMore = false; self.pullRequest && self.pullRequest(); Console. log(' pull up command '); } }), false); }}); }Copy the code

There are two instructions defined here v-scroll to handle the scrolling bug in ios div and V-pull to do pull-up loading

I’m used to scrolling inside divs, because with the ScrollFix plugin, I can’t see the background color of the page provided by 192.168.1.169:8080 when I drop down the page.

Utils. Throttle is a throttling function. Utils is an object that I have mounted globally.

Use in pages

<div class="done" v-scroll v-pull="self">... </div> export default { data() { return { data: [], page:1, self: this, isMore: true } }, created(){ this.pullRequest({page:1}) }, methods: {// pull up load async pullRequest() {let {data} = await api.getList ({page: this.page}); if(data.length == 0){ this.isMore = false; }else{ this.isMore = true; this.page ++; }}}}Copy the code

6. Encapsulation of the request function

./api/server.js

import'whatwg-fetch'import * as config from'@/config'functioncheckStatus(response) {
    if (response.status >= 200 && response.status < 300) {
        return response
    } else {
        var error = newError(response.statusText)
        error.response = response
        throw error
    }
}

functionparseJSON(response) {
    return response.json()
}

exportdefault (url, params = {}, method = 'GET') => {
    returnnewPromise((resolve, reject) => {
        fetch(config.url + url, {
            method,
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'Authorization': 'Bearer ' + (params.token || utils.getStorage('token'))
            },
            body: JSON.stringify(params)
        }).then(checkStatus)
            .then(parseJSON)
            .then((data) => {
               resolve(data);
            })
            .catch((err) => {
                reject(err)
            })
    })
}
Copy the code

Fetch is a package that requests data across domains

Wrap each request function./ API /index.js; In main.js, and mount the API object globally

import request from'./server'import config from'./api'let API = {};
for (let key in config) {
    let matchs = key.match(/^(\S+)\s*(.*)$/);
    API[`${matchs[1]}`] = async (params) => {
        returnawait request(config[key], params, matchs[2]);
    }
}
exportdefault API;
Copy the code

Define the interface function key [method name, request type] : request URL

Later in this file to add the request function, and more convenient and fast

exportdefault {
    'login POST': 'user/login',
    'getDetails POST': 'user/getDetails',
    'getCaptcha POST': 'user/getCaptcha',
    'sendMsg POST': 'user/sendMsg',
    'verifyinfo POST': 'user/verifyinfo',
    'modifyPwd POST': 'user/modifyPwd',
}
Copy the code

Page use

exportdefault { async created(){ let { data } = await API.getDetails({ page: this.page }); }}Copy the code

7. Set the page title./utils/index.js under different routes

exportlet setTitle = (title) => { document.title = title var mobile = navigator.userAgent.toLowerCase() if (/iphone|ipad|ipod/.test(mobile)) { var iframe = document.createElement('iframe') iframe.style.visibility = 'hidden'// Iframe.setattribute (' SRC ', iframe.setattribute (' SRC ', '') var iframeCallback = function () { setTimeout(function () { iframe.removeEventListener('load', iframeCallback) document.body.removeChild(iframe) }, 0) } iframe.addEventListener('load', iframeCallback) document.body.appendChild(iframe) } }Copy the code

8. Use the new VUe-CLI tool to initialize the project using YARNcommand failed: yarn.

If you want to switch back to NPM, you can do this:

C:\Users\ your username \.vuerc find this file to modify packageManager

PackageManager: NPMCopy the code