vue2.0：（六）、移动端像素border的实现和整合引入less文件

知识点一、如何在手机上看我们制作的移动端页面。

　　正常我们在电脑上都是按如下图来制作手机页面的：

　　如果要在手机上面看就不能用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等配置文件后需要重启服务。

转载于:https://www.cnblogs.com/beyrl-blog/p/8656539.html

vue2.0：（六）、移动端像素border的实现和整合引入less文件相关推荐

基于 Vue2.0 的移动端 / PC 端验证码输入组件.
vue-input-code 基于Vue2.0的移动端验证码输入组件. 功能预览输入回调完成回调自定义验证码个数样式可控这里是可爱的Demo 支持支持 Vue.js 2.0+. 安装和使用 ...
干货分享：vue2.0做移动端开发用到的相关插件和经验总结(2)
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
微信如何通过ip访问服务器项目,vue2.0 在微信端如何使用本地IP访问项目
我们会遇到这样的需求,在PC端开发vue脚手架项目,希望在微信端随时浏览页面(如果打包再发布到服务器又太麻烦),怎么办? 思路很简单:保证手机和电脑在同一个IP下,用同一个IP访问项目,这样就可以了: ...
框架中的左侧菜单关联右侧页面是如何实现的_前端基础学习：Vue2.0实现移动端外卖平台项目，参考旧版饿了么！...
主要依赖基于vue@2.0 使用vue-cli@2.0搭建项目框架使用vue-router@2.1进行页面路由切换使用vue-resource@1.0.1进行http请求获取数据 mock假数据 ...
vue2.0实现底部导航切换效果
使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换.vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码: 效果图 ...
vue2.0的初始项目的建立
1.在建立项目之前必须已安装vue的脚手架工具,然后在E盘(这里我选的E盘)中建立一个文件夹,名称为vue2.0. 2.在vscode中上方导航栏中有个文件-->打开文件夹,然后选中刚才建立的文 ...
【饿了么】—— Vue2.0高仿饿了么核心模块移动端Web App项目爬坑（一）
[饿了么]-- Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(一) 前言:学习Vue.js高仿饿了么课程过程中,总结了这个Web App项目从准备到开发完毕自己觉得很重要的知识 ...
Vue2.0高仿饿了么核心模块移动端Web App项目爬坑（一）
原文https://www.cnblogs.com/ljq66/p/9980372.html 前言:学习Vue.js高仿饿了么课程过程中,总结了这个Web App项目从准备到开发完毕自己觉得很重要的知 ...
vue2.0桌面端框架_Vue PC端框架
Vue PC端框架 472019.02.22 10:30:20字数 1,749阅读 54,067 1. Element Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面 ...

vue2.0：（六）、移动端像素border的实现和整合引入less文件

vue2.0：（六）、移动端像素border的实现和整合引入less文件相关推荐

最新文章

热门文章