二、Vue中安装使用stylus（写css使用）

1.安装 stylus（写css使用）插件

cnpm install stylus --save

cnpm install stylus-loader --save

2.使用案例

使用 stylus 注意事项：

1. 这里我们使用的长度单位是 rem，参照的基准是在上一篇文章中 reset.css 中设置的50px，换算方式如下：在reset.css 中设置了 html font-size: 50px，1rem = html font-size = 50px,我们案例用的是iphone6,两部像素，所以，若图片高度是86px，那么换算成rem就是：86/2/50 = 0.86rem；
2. 可以去掉大括号​​{}​​​， 分号​​；​​
3. 类名前需要加​​.​​
4. Class子类要写在父类之下
5. ​​0.5​​​可以去掉​​0​​​，写成​​.5​​
6. 对于 CSS 中一些公共变量，可以处理如下：
   第一步：在​​​src/assets/styles​​​目录下新建​​variable.styl​​​ 文件，这里放置一些公共CSS变量，比如背景颜色：​​$bgColor = #00bcd4​​​   第二步：引入​​variable.styl​​： ​​@import '~styles/variable.styl'​​，使用公共变量：​​background $bgColor​​

<style lang="stylus" scoped>
    // @：代表src目录，在css中引入其他css，使用 @ 时，前面需要加上 ~
    // styles就是我在vue.config.js中设置的路径别名，代表 'src/assets/styles' 路径 
    @import '~styles/variable.styl'
    .header
        // 在reset.css 中设置了 html font-size: 50px; 
        // 1rem = html font-size = 50px,我们案例用的是iphone6,两部像素，所以
        // 若图片高度是86px，那么换算成rem就是：86/2/50 = 0.86rem
        display flex
        line-height: .86rem
        background $bgColor
        color #fff
        .header-left
            width .64rem
            float left
            .back-icon
                text-align center
                font-size .4rem
        .header-input
            // 控制居中 
            flex 1
            height .64rem
            line-height .64rem
            margin-top .12rem
            margin-left .2rem
            background #fff
            border-radius .1rem
            color #ccc
            .header-input-content
                display flex
                flex-direction row
                padding-left .2rem
        .header-right
            width 1.24rem
            float right
            text-align center
            .arrow-icon
                margin-left -.04rem 
                font-size .24rem

</style>