stylue
Stylus是一个CSS的预处理框架，Stylus是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。作用和less sass 一样 语法更为简洁
// 安装依赖包
npm install stylus --save
npm install stylus-loader --save
// 运行如果报错可以考虑是否stylus版本过高
npm install stylus@0.54.8 --save
npm install stylus-loader@3.0.1 --save
组件化
// 在pages下home下再创建一个文件夹，叫components
// 页面组件化 我们希望把一个复杂的页面拆分成一部分一部分的内容，我们把拆分的小组件就放置components下
像素
正常的像素比例是不对的，因为手机端给的是二倍比例
rem
// 这里font-size 设置为50px 巧妙的解决了计算
1rem = html font-size = 50px
// 也就是说是手机的像素 = 正常像素/100 rem
优化代码
varibles.styl（全局的样式变量）
// 设置颜色风格 变量css 提升可维护性
// 在styles中创建 varibles.styl(全局的变量)
// 在这里我们就可以定义变量 把公用的样式放进来使用
$bgColor = #00bcd4 //背景变量
// 使用 在文件中 样式里面引入样式不能直接import 需要在前面加一个@符号
<style lang="stylus" scoped>
@import '../../../assets/styles/varibles.styl'
background: $bgColor
</style>
@
@ // 代表src目录
// 在样式中引入样式需要在@前面加一个~
@import '~@/assets/styles/varibles.styl'
起别名
比如一个目录使用场景很多，我们可以向@符号一样代码src
方法（会报错，当我们去修改webpack的配置项的时候，我们一定要重启服务器）
// 在build目录下有一个webpack.base.conf.js文件 我们可以看到在resolve中有一个alias（别名项）：此处发挥想象
'styles': resolve('src/assets/styles') //算了想象有点累