vue 使用Jade模板写html,stylus写css的方法
日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的步骤和提高了效率。
安装包
//安装jade包 npminstalljadejade-loader--save-dev //如果使用vue-cli构建项目,则不需要安装stylus相关的包,vue-cli默认已安装 npminstallstylusstylus-loader--save-dev
配置文件
//webpack.base.conf.js配置 //jade { test:/\.jade$/, loader:'jade-loader', } //stylus如果使用vue-cli构建,无需配置此项 { test:/\.styl$/, loader:'stylus-loader', }
jade使用前后对比
//html模板测试标题
这是一条测试的demo文本 {{oneText+"-"+"twoText"}}
使用Jade注意事项
- 需要简单了解jade基本使用语法(10分钟简单了解即可)
- template需要加上lang='jade'属性
- 标签内文本换行会解析错误,需要使用其他技巧性方法解决。例:
div p我是测试文本哇,可是文本太长需要换行啊,我恰巧回车试一 下啊,啊呀,报错啦!! //可以写进一个变量里、或方法中返回数据、或保持一行不换行
stylus前后对比
//csslesssassscss样式demo此处省略 //stylusdemo .main-body width300px heihgt200px background-colorrgba(0,0,0,1) .main-model width50px height50px margin20pxauto
stylus可以使用极简的方式写css,也可以格式混合(为了保持格式统一,不建议),将解析的任务交给webpack去做,我们只需要书写简单易读的代码即可。这是我喜欢的风格和方式,sass当然也可以做到,只是个人的机缘巧合现在使用了stylus。
总结
以上所述是小编给大家介绍的vue使用Jade模板写html,stylus写css的方法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!