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

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

1. 开始使用stylus

报错：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".headerposition: relative;color: #fff;background-color: rgba(7,17,27,0.5);.content-wrapperposition: relative;padding: 24px 12px 18px 48px;font-size: 0px;.avatardisplay: inline-block;vertical-align: top;imgborder-radius: 2px;
</style>

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

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

（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);