vue 使用Jade模板写html,stylus写css的方法


Posted in Javascript onFebruary 23, 2018

日常工作都是使用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 模板
<template>
 <div class='demo-components'>
 <h2>测试标题</h2>
 <p>
  <span class='text'>这是一条测试的demo文本</span>
  <i class='icon'></i>
 </p>
 <input v-model='value1' @keydown.enter='loginIn'>
 <p>{{ oneText + "-" + "twoText" }}</p>
 </div>
</template>
// jade 模板
<template lang='jade'>
 div.demo-components
 h2 测试标题
 p
  span.text 这是一条测试的demo文本
  i.icon
 input(v-model='value1',@keydown.enter='loginIn')
 p {{ oneText + "-" + twoText }}
</template>

使用Jade注意事项

  • 需要简单了解jade基本使用语法(10分钟简单了解即可)
  • template 需要加上 lang='jade' 属性
  • 标签内文本换行会解析错误,需要使用其他技巧性方法解决。例:
<template lang='jade'>
 div
 p 我是测试文本哇,可是文本太长需要换行啊,我恰巧回车试一
  下啊,啊呀,报错啦!!
</template>
// 可以写进一个变量里、或方法中返回数据、或保持一行不换行

stylus 前后对比

<style lang='css'> // css less sass scss 样式demo此处省略

// stylus demo
<style lang='stylus'>
 .main-body
 width 300px
 heihgt 200px
 background-color rgba(0,0,0,1)
 .main-model
  width 50px
  height 50px
  margin 20px auto
</style>

stylus 可以使用极简的方式写css,也可以格式混合(为了保持格式统一,不建议),将解析的任务交给webpack去做,我们只需要书写简单易读的代码即可。这是我喜欢的风格和方式,sass当然也可以做到,只是个人的机缘巧合现在使用了stylus。

总结

以上所述是小编给大家介绍的vue 使用Jade模板写html,stylus写css的方法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
vue视图不更新情况详解
May 16 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
如何用JavaScipt测网速
May 09 Javascript
Angular 向组件传递模板的两种方法
Feb 23 #Javascript
详解Node.js中的Async和Await函数
Feb 22 #Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 #Javascript
webpack-dev-server远程访问配置方法
Feb 22 #Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 #Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 #Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 #Javascript
You might like
文件上传程序的全部源码
2006/10/09 PHP
开源SNS系统-ThinkSNS
2008/05/18 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
CI框架中zip类应用示例
2014/06/17 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
php生成html文件方法总结
2014/12/01 PHP
phpfpm的作用和用法
2019/10/10 PHP
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
python实现五子棋小游戏
2020/03/25 Python
Python实现12306火车票抢票系统
2019/07/04 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
社会治安综合治理管理责任书
2014/04/16 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
村党组织公开承诺书
2015/04/30 职场文书
食堂管理制度范本
2015/08/04 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android