vue2.0：（六）、移動端像素border的實現和整合引入less文件

知識點1、如何在手機上看咱們製做的移動端頁面。

　　正常咱們在電腦上都是按以下圖來製做手機頁面的：

　　

　　若是要在手機上面看就不能用localhost了。因此，進入命令行，輸入ipconfig查看本地ip地址：

　　

　　而後返回本地頁面，把localhost替換成這個地址。而後把總體輸入在手機上，就能看到頁面在手機上的樣子了。

　　接下來製做咱們的像素border。

　　第一步：

　　mixin.less

 代碼：

.border-1px(@color){
    position:relative;
    &:after{
        display:block;
        position:absolute;
        left:0;
        bottom:0;
        width:100%;
        border-top:1px solid @color;
        content:'';
    }
}

第二步：app.vue使用：

代碼：

<style lang="less">
@import 'common/style/mixin';      <!---------------------這裏是導入
#aaa
    .tab{
        display:flex;
        width:100%;
        height:40px;
        line-height:40px;
        .border-1px(rgba(7,17,27,0.1));         <!---------------------這裏是使用
        .tab-item{
            flex:1;
            text-align: center;
            a{
                display:block;
                font-size:14px;
                color:#ccc;
                &.active {
                    color:rgb(240,20,20);
                }
            }
        }
    }
</style>

 　　接下來，須要給這個after僞類作一個縮放。

代碼以下：

@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
    .border-1px{
        &::after{
            -webkit-transform:scaleY(0.7);
            transform:scaleY(0.7);
        }
    }
}
@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border-1px{
        &::after{
            -webkit-transform:scaleY(0.5);
            transform:scaleY(0.5);
        }
    }
}

　　而後，咱們還須要加一個總的less，把它們一塊兒引入到main.js裏面。如圖：

最後一步，咱們須要把這個total.less引入到main.js裏面。

 

 

　　我當時引入完了以後報了一個錯：是以下的錯：

　　

　　　　而後我上網查找了不少相關文檔博客，大體意思都說是和webpack配置文件有關。看到有一我的所本身卸載了style-loader而後從新安裝，並無配置webpack裏面的相關東西。並附上了圖，我一看，嗯，就是少了下圖紅框裏的部分。我懶啊，沒有卸掉從新裝，直接註釋掉。因而打開配置文件，在config文件夾裏，註釋了兩個代碼，就不報錯了。樣式也能繼續用：

 　　最後一個注意：更改完webpack等配置文件後須要重啓服務。