此处是使用 stylus 预处理器 来预先处理css -- 此处以 border-bottom:1px solid rgba(0,0,0,.2)来举例
在 项目中的 src文件夹 ---》assets 文件夹 中创建 stylus 文件夹来存放 .styl 文件
在stylus文件夹中新建一个 mixin.styl 文件
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ' '
在 App.vue文件添加:
<div class="tab border-1px">header</div> // 添加到#app div里面
<style lang="stylus" rel="stylesheet/stylus">
@import "./assets/stylus/mixin.styl";
.tab
display: flex
width: 100%
line-height: 40px
height: 40px
border-1px(rgba(0,0,0,0.2))
</style>
在 stylus文件夹中创建base.styl
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
t-transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
t-transform: scaleY(0.5)
再在stylus中定义一个汇总的index.styl文件
@import "./mixin";
@import "./base";
最后在 main.js中添加
import 组件名 from "组件" // 在这样的组件下方添加下面这句
import "./assets/stylus/index.styl";
想在手机上预览页面效果,可以将网址复制到 --- 草料二维码网站(免费)中,生成二维码,通过微信扫就可以预览了
如果生成的二维码受到访问拒绝 ---- 意味着您的没有给予 ip地址 访问权限
上一篇文章有介绍 如何配置使用IP地址访问项目