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 相关文章推荐
javascript字符串拼接的效率问题
Dec 25 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
vue 解决computed修改data数据的问题
Nov 06 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
Terran历史背景
2020/03/14 星际争霸
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
PHP取进制余数函数代码
2012/01/19 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
Python与shell的3种交互方式介绍
2015/04/11 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
Python常用特殊方法实例总结
2019/03/22 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
python读取与处理netcdf数据方式
2020/02/14 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
python绘图模块之利用turtle画图
2021/02/12 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
MADE法国:提供原创设计师家具
2018/09/18 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
本科毕业生应聘自荐信范文
2014/06/26 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
论文致谢词范文
2015/05/14 职场文书