关于做Vue的一个demo遇到的问题和总结（1）

一.关于stylus装不上的问题

报错：npm WARN stylus-loader@2.5.1 requires a peer of stylus@>=0.52.4 but none was installed.
这是我在做Vue的一个demo时遇到的问题，在pckage.json中添加“stylus-loader”:"^2.1.1" npm install之后在控制台运行npm run dev报错，发现是因为少了依赖
查了一下解决办法有两个：

1.eslint-config-standard@6.2.1的提示解决方案

找到项目中的package.json文件,对应修改位置:
第一步:把eslint-config-standard 改成"^6.2.1" 比如: "eslint-config-standard": "^6.2.1",
第二步:把eslint-plugin-promise 改成 "^3.4.0" 比如: "eslint-plugin-promise": "^3.4.0",
如果再次安装的时候 提示update失败,可以先从插件中删除 eslint-plugin-promise的文件夹 然后在执行安装命令

2.stylus-loader@2.4.0的提示解决方案

第一步:把stylus-loader 改成 "^2.4.0" 比如: "stylus-loader": "^2.4.0", 如果没有这条记录就自行添加一条
第二步:需要多添加一条插件 "stylus": "0.52.4" 在package.json里面增加就好 然后执行安装命令 即可解决

二.浏览器自动出现兼容性写法

图片.png

这是因为node-mdules文件夹里有一个postcss的文件夹

图片.png

vue-loader依赖了这个插件，这个插件可以抹平一些兼容性写法。

三.关于1像素border的实现

办法：用伪元素 + 缩放巧妙地实现

给父元素增加一个伪类after，把after设置成一条线，在dpr为2或者3的手机的手机上通过meta进行缩放
1.定义一个mixin，这是css预处理器提供的一个方法，如定义一个函数,这个函数定义的是css的代码，这样写比较通用，可以在任意需要这段代码的地方调用这个函数，但是这里的写法跟直接写border-bottom:1px solid black是一样的，并没有实现缩放

border-1px($color)
 position:relative
 &:after
    display:block
    position:absolute
    left:0
    bottom:0
    width:100%
    border-top:1px solid $color
    content:' '
 &:before
    display:block
    position:absolute
    left:0
    top:0
    width:100%
    border-top:1px solid $color
    content:' '

2.给我们刚刚设置的伪类实现缩放，使它真正的实现1像素边框

• 给父元素添加一个特殊样式，class=“border-1px”，这个class要全局定义，因为要多处使用啊。

@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)

<b >总结一下1像素的实现:</b>主要是利用了<b>伪类</b>和<b>缩放</b>的功能。
1.在需要画边框的元素(就叫父元素啦)上定义一个伪类，伪类是相对于父元素是absolute定位(元素当然得是relative啦，只要不是static就行哈)，通过伪类画出一个1像素的边框，定位到父元素的下面，当然就会呈现出父元素的下边框啦
2.应用一个class把伪类做缩放，根据设备的最小dpr指定缩放的比例，如dpr是2就缩放0.5倍，如dpr是1.5就缩放0.7倍