Vue2.0 仿饿了么商家详情页面笔记（三）

1. 开始使用stylus

（1） 安装

报错：Cannot find module ‘stylus’ 

解决方法：安装stylus 和 stylus-loader

在项目根目录中执行

npm install stylus  --save
npm install stylus-loader  --save

（2）基本使用

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../common/stylus/mixin.styl"
    .header
        position: relative;
        color: #fff;
        background-color: rgba(7,17,27,0.5);
        .content-wrapper
            position: relative;
            padding: 24px 12px 18px 48px;
            font-size: 0px;
            .avatar
                display: inline-block;
                vertical-align: top;
                img
                    border-radius: 2px;
</style>

使用其他stylus文件中的样式：

@import "../../common/stylus/mixin.styl"

语法中&表示父级class

（3）webstorm编辑器对stylus编写的设置

在编写stylus时发现回车和退格无法使光标在指定位置，解决方法：

settings->Editor->Smart-Keys，将Smart indent勾选去掉 ，Backspace中的Unindent选择To nearest indent position

2. 容器内标签之间有间隙

解决：

（1）容器font-size: 0px;

（2）标签不换行，如

原：

<span>1</span>
<span>2</span>

改为：

<span>1</span><span>2</span>

3. 文字省略显示...

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

4. 图片模糊滤镜

filter: blur(10px);