vue使用Jade模板写html，stylus写css

//csslesssassscss样式demo这里省略//stylusdemo.main-bodywidth300pxheihgt200pxbackground-colorrgba(0,0,0,1).main-modelwidth50pxheight50pxmargin20pxautovue使用Jade模板写html，stylus写css日常工作就是用vue开发页面和webApps，写多了想偷懒并且简化了各种写法，所以用Jade写html，stylus写css，省了很多步骤，提高了效率。安装包//安装jade包npminstalljadejade-loader--save-dev//如果使用vue-cli构建项目，则不需要安装stylus相关包，默认安装vue-clinpminstallstylusstylus-loader--save-dev配置文件//webpack.base.conf.js配置//jade{test:/\.jade$/,loader:'jade-loader',}//stylus如果你使用vue-cli搭建，无需配置此项{test:/\.styl$/,loader:'stylus-loader',}使用jade前后对比//htmltemplate//玉templatediv.demo-componentsh2testtitlepspan.text这是一个测试演示文本??i.iconinput(v-model='value1',@keydown.enter='loginIn')p{{oneText+"-"+twoText}}Jade使用注意事项需要对jade的基本使用语法有简单的了解（10分钟足以简单了解）。模板需要添加lang='jade'属性标签。标签中的文本换行会导致解析错误，需要其他技术手段解决。例子：divp我正在测试文字，但是文字太长需要换行，我直接回车试试，啊，报错了！！//可以写入变量，也可以在方法中返回数据，也可以保持一行不换行stylus前后对比//csslesssassscss样式demo这里省略//stylusdemo.main-bodywidth300pxheihgt200pxbackground-colorrgba(0,0,0,1).main-modelwidth50pxheight50pxmargin20pxautostyluscanuseminimalistCSS可以用同样的方式写，也可以混合格式（为了保持格式统一，不推荐），解析的任务交给webpack。我们只需要编写简单易读的代码。这是我最喜欢的风格和方法。当然，sass也可以做到。现在使用手写笔只是个人巧合。写这篇文章作为您的个人记录，并作为其他人的参考。