Некоторые резюме проектов с vue

внешний интерфейс Командная строка Vue.js

1. Новый инструмент cli генерирует веб-пакет конфигурации проекта, а корневой путь создает vue.conf.js.

module.exports = {
    configureWebpack: config => {
        // 为生产环境修改配置...
        if (process.env.NODE_ENV === 'production') {
            //html文件引入绝对地址
            config.output.publicPath = ''
            //不生成.map文件
            config.devtool = false;
        } else {
            // 为开发环境修改配置...
            
        }
    }
}

2. npm run serve автоматически запускается и открывает браузер с локальным ip

"serve": "vue-cli-service serve --open --host 192.168.1.169"

Оконная система может использовать ipconfig в cmd для просмотра локального IP-адреса, а затем напрямую копировать адрес на мобильный телефон и отлаживать страницу на мобильном телефоне, при условии, что мобильный телефон и ваш компьютер находятся в одной сетевой среде.

3. Переместите крайний щелчок, нажмите «Очистить». Задержка 300 мс.

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

Внесите код в main.js, тогда и страницы, и компоненты можно будет использовать напрямую.@clickсвязывать события

4. Используйте rem для написания мобильных страниц

//main.js 引入依赖
import 'amfe-flexible'

//_base.scss 设计图宽度除以10,假如设计图宽度是750px那么，基础宽度就是75
$baseWidthSize: 75 !default;
@function to($px) {
    @return $px / $baseWidthSize * 1rem;
}

//组件和页面使用; to()里面的数值是photoshop里测量的值
<style lang="scss">
    @import "../scss/_base.scss";
    .box{
        width: to(750);
        height: to(100);
    }
</style>

5. Подтягивающая загрузка пользовательской команды (прокрутка в div)

//main.js 引入
import directive from './directive'
directive(Vue)

//./directive/index.js 
import ScrollFix from 'scrollfix'
export default (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('上拉指令');
                }
            }), false);
        }
    });
}

2 директивы определены здесь
v-scrollИспользуется для устранения ошибок прокрутки в ios div.
v-pullИспользуется для подтягивания загрузки
Я привык к прокрутке и загрузке внутри div, потому что в сочетании с плагином ScrollFix он может быть невидимым, когда страница вытягивается вниз.此网页由 192.168.1.169:8080 提供фоновый цвет;
utils.throttle — это функция регулирования, utils — это объект, я смонтировал его в глобальном масштабе, и место, где используется utils, слишком проблематично для импорта;

использовать на странице

<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: {
        //上拉加载
        async pullRequest() {
            let { data } = await API.getList({ page: this.page });
            if(data.length == 0){
                this.isMore = false;
            }else{
                this.isMore = true;
                this.page ++;
            }
        }
    }
}

6. Инкапсуляция функции запроса

./api/server.js

import 'whatwg-fetch'
import * as config from '@/config'

function checkStatus(response) {
    if (response.status >= 200 && response.status < 300) {
        return response
    } else {
        var error = new Error(response.statusText)
        error.response = response
        throw error
    }
}

function parseJSON(response) {
    return response.json()
}

export default (url, params = {}, method = 'GET') => {
    return new Promise((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)
            })
    })
}

Пакет выборки, используемый для запроса, она может запрашивать данные между доменами.

Инкапсуляция каждой функции запроса ./api/index.js представлена ​​в main.js, а объект API монтируется глобально

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) => {
        return await request(config[key], params, matchs[2]);
    }
}
export default API;

./api/api.js Добавьте функцию запроса в этот файл позже, что удобно и быстро
Определить функциональную клавишу интерфейса [имя метода, тип запроса]: URL-адрес запроса

export default {
    'login POST': 'user/login',
    'getDetails POST': 'user/getDetails',
    'getCaptcha POST': 'user/getCaptcha',
    'sendMsg POST': 'user/sendMsg',
    'verifyinfo POST': 'user/verifyinfo',
    'modifyPwd POST': 'user/modifyPwd',
}

используется на странице

export default {
    async created(){
        let { data } = await API.getDetails({ page: this.page });
    }
}

7. Установите заголовок страницы ./utils/index.js для разных маршрутов

export let 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'
        // 替换成站标favicon路径或者任意存在的较小的图片即可
        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)
    }
}

iframe.setAttribute('src', '')Обязательно установите здесь ссылку на изображение, иначе тег iframe мобильного телефона Apple не будет удален, что повлияет на макет страницы

8. Использование нового инструмента vue-cli, использование пряжи для инициализации проекта сообщает об ошибкеcommand failed: yarn,

В настоящее время, если вы не можете решить эту проблему и хотите вернуться к npm для установки, вы можете сделать это:

C:\Users\你的用户名\ .vuercНайдите этот файл и измените packageManager

packageManager： npm

Статья публичного аккаунта

Категории