日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式，所以使用了jade写html，stylus写css，省了很多的步骤和提高了效率。

安装包：

// 安装jade包npm install jade jade-loader --save-dev// 如果使用vue-cli构建项目，则不需要安装stylus相关的包，vue-cli默认已安装npm install stylus stylus-loader --save-dev复制代码

配置文件:

// webpack.base.conf.js 配置// jade{    test : /\.jade$/,    loader : 'jade-loader',}// stylus 如果使用vue-cli构建，无需配置此项{    test : /\.styl$/,    loader : 'stylus-loader',}复制代码

jade使用前后对比:

// html 模板
    复制代码

// jade 模板
    复制代码

使用Jade注意事项

lang='jade'复制代码

    // 可以写进一个变量里、或方法中返回数据、或保持一行不换行复制代码

stylus 前后对比:

复制代码

•stylus 可以使用极简的方式写css，也可以格式混合(为了保持格式统一，不建议)，将解析的任务交给webpack去做，我们只需要书写简单易读的代码即可。这是我喜欢的风格和方式，sass当然也可以做到，只是个人的机缘巧合现在使用了stylus。 如果你觉得不错，或者发现文章中的错误，或者有更好的建议，欢迎评论或进前端全栈群：866109386，来交流讨论吹水。