前端学习笔记vue-01（仿照网易严选）

仿照网易严选

安装vue-cli
cnpm intall vue-cli -g

项目初始化

vue init webpack “vue-wangyi”

使用vant
https://youzan.github.io/vant/#/zh-CN/button

通过 npm 安装
npm i vant -S

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
“plugins”: [
[“import”, {
“libraryName”: “vant”,
“libraryDirectory”: “es”,
“style”: true
}]
]
}

在main.js全局引入

import { Button } from ‘vant’
Vue.use(Button)

网易严选适配js

; (function(win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});
    if (metaEl) {
        console.warn("将根据已有的meta标签来设置缩放比例");
        var match = metaEl.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale)
        }
    } else {
        if (flexibleEl) {
            var content = flexibleEl.getAttribute("content");
            if (content) {
                var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
                var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
                if (initialDpr) {
                    dpr = parseFloat(initialDpr[1]);
                    scale = parseFloat((1 / dpr).toFixed(2))
                }
                if (maximumDpr) {
                    dpr = parseFloat(maximumDpr[1]);
                    scale = parseFloat((1 / dpr).toFixed(2))
                }
            }
        }
    }
    if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3
            } else {
                if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
                    dpr = 2
                } else {
                    dpr = 1
                }
            }
        } else {
            dpr = 1
        }
        scale = 1 / dpr
    }
    docEl.setAttribute("data-dpr", dpr);
    if (!metaEl) {
        metaEl = doc.createElement("meta");
        metaEl.setAttribute("name", "viewport");
        if ( !! win.webPageScalable) {
            metaEl.setAttribute("content", "initial-scale=" + scale + ", user-scalable=yes")
        } else {
            metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no viewport-fit=cover")
        }
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl)
        } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML)
        }
    }
    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        var ua = navigator.userAgent.toLowerCase();
        if (!/ipad.*yanxuan/.test(ua)) {
            if (width / dpr > 750) {
                width = 750 * dpr
            }
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + "px";
        flexible.rem = win.rem = rem
    }
    win.addEventListener("resize",
    function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300)
    },
    false);
    win.addEventListener("pageshow",
    function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300)
        }
    },
    false);
    if (doc.readyState === "complete") {
        doc.body.style.fontSize = 12 * dpr + "px"
    } else {
        doc.addEventListener("DOMContentLoaded",
        function(e) {
            doc.body.style.fontSize = 12 * dpr + "px"
        },
        false)
    }
    refreshRem();
    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === "string" && d.match(/rem$/)) {
            val += "px"
        }
        return val
    };
    flexible.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === "string" && d.match(/px$/)) {
            val += "rem"
        }
        return val
    }
})(window, window["lib"] || (window["lib"] = {}));

写个html网易严选js的移动端适配

test.html

打印下win对象

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script type="text/javascript">
; (function(win, lib) {
    console.log(win);
})(window, window["lib"] || (window["lib"] = {}));
</script>
<div>
    <h1>老阿木的移动端适配方案的简单使用</h1>
</div>

一步一步调式和打印网易严选js的功能

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script type="text/javascript">
; (function(win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector('meta[name="viewport"]');
    console.log(metaEl);
})(window, window["lib"] || (window["lib"] = {}));
</script>
<div>
    <h1>老阿木的移动端适配方案的简单使用</h1>
</div>

适配rem

rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。

与em相同的是它们都是使用元素设定字体大小，不同的是em是根据父级元素设置大小。而rem在根据指定html根元素的字符大小而定的，从IE6到Chrome中，默认根元素的font-size都是16px的。如果想要设置12px的

简单rem适配实现

<html >
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    
<style type="text/css"> 
    .h1{
        font-size: 16px;
        font-weight: normal;
    }
    .imgclass{
        width: 30 rem;
        display: block;
    }
</style>
<script type="text/javascript">
//得到屏幕的宽度
    var win=document.documentElement.clientWidth;
    console.log(win);
    //得到html元素
    var _html=document.getElementsByTagName('html')[0]
    console.log(_html);
    //设置根元素字体的大小
    _html.style.fontSize=win/20 +'px'

</script>
<div>
    <h1>我的移动端适配方案的思路简单讲解</h1>
    <img class="imgclass" src="aa.png" alt="">
</div>
</html>

引入rem.js到vue工程项目中

;(function (designWidth, maxWidth) {
    var doc = document,
        win = window;
    var docEl = doc.documentElement;
    var tid;
    var rootItem, rootStyle;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (!maxWidth) {
            maxWidth = 540;
        }
        ;
        if (width > maxWidth) {
            width = maxWidth;
        }
        //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
        var rem = width * 100 / designWidth;
        //兼容UC开始
        rootStyle = "html{font-size:" + rem + 'px !important}';
        rootItem = document.getElementById('rootsize') || document.createElement("style");
        if (!document.getElementById('rootsize')) {
            document.getElementsByTagName("head")[0].appendChild(rootItem);
            rootItem.id = 'rootsize';
        }
        if (rootItem.styleSheet) {
            rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
        } else {
            try {
                rootItem.innerHTML = rootStyle
            } catch (f) {
                rootItem.innerText = rootStyle
            }
        }
        //兼容UC结束
        docEl.style.fontSize = rem + "px";
    };
    refreshRem();

    win.addEventListener("resize", function () {
        clearTimeout(tid); //防止执行两次
        tid = setT imeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function (e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(375, 750);

在main.js全局引入

import ‘./assets/rem’

设置reset.css,重置样式

/* 
html5doctor.com Reset Stylesheet
v1.4.1 
2010-03-01
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    box-sizing:border-box;
}
body {
    line-height:1;
}

:focus {
    outline: 1;
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
    display:block;
}

ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

删除helloword.vue的原始信息

开始开发页面