1.安装stylus和stylus-loader

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

CSS 预处理，顾名思义，预先处理 CSS。那 stylus 咋预先处理呢？stylus 给 CSS 添加了可编程的特性，也就是说，在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成 CSS 文件。其他的预处理器还有sass less等。

1.1 引用npm stylus-loader 问题

在编译时卡在16%不动

stylus-loader问题.png

版本问题吧，花了快一个小时查文档查解决方法，更改package.json中如下版本，再重新安装运行即可。。。

image.png

2.components文件夹

通常一个大页面会被拆分为各种小组件，共同组成一个大页面。components文件夹就用来存放不同的小组件。
在components新建Header.vue,在home中引用

import HomeHeader from'./components/Header'

由于是局部组件，需要在大组件中注册

export default {
   name:'Home',
   components:{
       HomeHeader
   }
}

3.header编写

header样式分为三部分:
1.header-left 2. header-input 3. header-right

header效果图.png

这里需要移动端适配的一些知识 关于rem 2倍图。。

rem是指相对于根元素的字体大小的单位，它就是一个相对单位，它相对于根(html)的font-size大小来计算。例如: font-size:16px 那么（1rem = 16px 浏览器默认字号就是16px）
在main.js中引用的reset.css中，html中的font-size设置是50px，所以1rem=50px
已知height:43px 转化为rem就是0.86rem

html {overflow-x: hidden;height: 100%;font-size: 50px

3.1 iconfont 图标导入

从iconfont网页上选好文件，下载到本地。在项目 文件的assets中新建文件夹命名为iconfont，将下载文件的.tff .woff .svg .eot 放进去，把iconfont.css文件放进assets文件夹里。

存放位置.png

在inconfont.css中修改引入的文件目录
在main.js中import iconfont.css

修改iconfont.css的url.png

<div class="header-left">
        <div class="iconfont back-icon">&#xe66f;</div>
    </div>

3.2 stylus 简单使用

stylus的好处之一就是加入了变量，举个例子，此时的背景颜色是蓝色，由于蓝色在多处都能用到，就可以定义一个变量保存他，在需要的地方引入变量。
在styles文件下新建variables.styl文件，写入

$bgColor = #00bcd4

在使用时

<style lang='stylus' scoped >
//这里注意在样式中引入样式需要使用@import
//@import '../../../assets/styles/variables.styl'; @符号代表src目录，
//这句话和下句代表意思相同 但是因为前面又一个@符号 就需要加~@区分
@import '~@/assets/styles/variables.styl';
.header 
    background: $bgColor;
……

3.3 trick -别名设置

上面说到@是‘src’文件的别名，想要自定义别名就去build里的base.conf文件里修改.

别名.png