vue 使用Jade模板写html,stylus写css
vue 使用Jade模板写html,stylus写css
日常工作都是使用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的更多相关文章
- Vue篇之vue 使用Jade模板写html
// 安装jade包 npm install jade jade-loader --save-dev // 如果使用vue-cli构建项目,则不需要安装stylus相关的包,vue-cli默认已安装 ...
- Vue ES6 Jade Scss Webpack Gulp
一直以来非常庆幸曾经有翻过<代码大全2>:这使我崎岖编程之路少了很多不必要的坎坷.它在软件工艺的话题中有写到一篇:"首先是为人写程序,其次才是机器(Write Programs ...
- Jade 模板引擎使用
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)
jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...
- 【nodejs】jade模板入门
使用jetbrians webstom创建空项目 1.创建package.json 引用依赖配置 { "name": "demojade", "des ...
- jade模板 注意事项
1. jade模板 语法 doctype html html head body header div 2. 添加内容:直接在标签后边加空格 直接写内容 如下: div 我要写的内容 3. ...
- Jade模板引擎使用详解
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- Express全系列教程之(十):jade模板引擎
一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...
- 使用express4.x版、Jade模板以及mysql重写《nodejs开发指南》微博实例
最近阅读<nodejs开发指南>一书,书是不错的,然而其微博代码示例用的是express3.x,用些过时了,运行代码出现不少bug(我电脑安的是express4.x),于是用express ...
随机推荐
- 如何让低版本IE浏览器支持HTML5标签并为其设置样式
现代的浏览器都支持HTML5,HTML5定义了 8 个新的 HTML 语义元素.所有这些元素都是 块级 元素. 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 ...
- 百度编辑器ueditor
,怎么将上传的图片路径改到项目的public/uploads文件夹呢?哪位大神改过
- Html Mailto标签详细使用方法
http://www.360doc.com/content/09/0805/14/16915_4684377.shtml Html Mailto标签详细使用方法 Html中mailto标签是一个非常实 ...
- ADO.NET复习总结(4)--访问SqlServer的类
1.连接SqlConnection 2. 3.执行命令SqlCommand 4.数据读取SqlDataReader 注意: ExecuteNonQuery() :执行非查询(增删改) Execute ...
- Powerdesigner+Execel
1.将Powerdesigner中的表(PDM)导入到execel中 Ctrl+Shift+X/tool->Execute commands ->Edit/Run script 粘贴如下v ...
- c#动态编译并执行字符串
比较简单,步骤是这样的 string -> compiler -> assembly -> reflection -> execution 直接上代码: using Syste ...
- sudo 无效命令
mac系统中由于不小心修改了/etc/sudoers下的权限为777,故而sudo命令不能使用. 解决办法 1.重新启动mac并且按command+s进入单用户界面 2.此时默认的系统状态是只读状态, ...
- docker入门(二)容器与镜像的关系
[编者的话]本文用图文并茂的方式介绍了容器.镜像的区别和Docker每个命令后面的技术细节,能够很好的帮助读者深入理解Docker. 这篇文章希望能够帮助读者深入理解Docker的命令,还有容器(co ...
- Linux安装Tomcat7
linux版本:CentOS 6.2 iso文件下载地址:http://mirrors.163.com/centos/6.2/isos/i386/CentOS-6.2-i386-bin-DVD1.is ...
- 浅谈python lambda
lambda x: x * x,实际上就是 def f(x): retrun x * x 关键字lambda表示匿名函数,冒号前的x表示函数参数. 匿名函数只能有一个表达式,不用写return,返回值 ...