vue2.0中使用pug(jade)
第一部分:pug(jade)模板引擎
pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签。
它简化了HTML的成对标签的写法,使代码更加简洁、开发效率更高,但是同时它也带来了一些副作用:可移植性差、调试困难、性能并不出色。
第二部分:vue2.0中使用pug(jade)
Step1:安装pug和jade依赖
#安装支持pug依赖
npm install pug pug-loader pug-filters -D
#安装支持jade依赖
npm install jade jade-loader -D
Step2:配置pug和jade
打开webpack.base.conf,在module的rules节点下添加如下配置:
{
test: /\.jade$/,
loader: "jade"
},
{
test: /\.pug$/,
loader: 'pug'
},
这样我们的.vue文件就支持pug的语法了。
Step3:尝试使用pug语法
渲染后,我们可以看到效果:
可以看到,我们可以使用pug来编写我们的html,同时还可以结合vue的语法。
参考文档
https://github.com/pugjs/pug
https://segmentfault.com/a/1190000007556806
https://www.cnblogs.com/xiaohuochai/p/7222227.html
https://zhuanlan.zhihu.com/p/25177324
https://pug.bootcss.com/api/getting-started.html
http://www.jianshu.com/p/36b9be2f3f85
https://segmentfault.com/a/1190000006198621
http://www.jianshu.com/p/05ed25bfc2c5
https://segmentfault.com/a/1190000007556806
http://www.jianshu.com/p/53def6da5dd7
vue2.0中使用pug(jade)的更多相关文章
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- router-view在vue2.0中不显示,解决方法
学习的router-view路由一直不显示,我翻看vue文档,花费1个小事终于找到原因,希望我的问题能给初学的同学,带来福音,版本不一样,真的烦 在此总结记录,以免以后在此遇到此问题 //配置路由 c ...
- vue2.0中使用less
第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...
- vue2.0中使用sass
第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...
- vue2.0 中#$emit,$on的使用详解
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以 ...
- Vue2.0中v-for迭代语法变化(key、index)【转】
转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...
- Vue2.0中的路由配置
Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...
- vue2.0中,由于页面完成之后dom还未加载完成如何进行操作
再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: create ...
- vue2.0中动画
#vue2.0中css动画不显示的坑: transition中包含的两个标签如果相同(此处都是p标签),需要为元素指定key.如果标签名不同的话,不指定key也可以出现动画效果. #vue2.0中js ...
随机推荐
- python自动化开发-8
进程与线程 程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程. 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位. ...
- mysql5.7 安装和多源复制实践
MySQL 5.7发布后,在复制方面有了很大的改进和提升.比如开始支持多源复制(multi-source)以及真正的支持多线程复制了.多源复制可以使用基于二进制日子的复制或者基于事务的复制.下面我们说 ...
- Android常用学习网站
http://blog.csdn.net/liang5630/article/details/43482691 https://github.com/Trinea/android-open-proje ...
- python常用模块之re模块(正则)
python种的re模块常用的5种方法,分别是re.match re.search re.findall re.split re.sub. 在介绍五种方法之前,需要介绍一下正则的基础. . ...
- [20180316]理解db file parallel read等待事件.txt
[20180316]理解db file parallel read等待事件.txt --//一直对db file parallel read等待事件不理解,因为在实际系统中很少遇到这样的等待事件. S ...
- 50个常用sql语句 网上流行的学生选课表的例子
50个常用sql语句 建表: --学生表tblStudent(编号StuId.姓名StuName.年龄StuAge.性别StuSex) --课程表tblCourse(课程编号CourseId.课程名称 ...
- apache配置CA证书通过https通信
Apache Httpd 2.2 实现https加密通讯 实际生产中CA证书一般是向一些专业认证的国际机构来进行申请的.我们会模拟使用OpenSSL生成的证书,来实现Apache的安全加密通讯,这与实 ...
- Mysql基础之 ALTER命令
ALTER命令: 作用:当我们修改数据库的列属性.列名称.表名等,要使用ALTER命令 教程: 1.首先是我们创建一个数据库以及一张表 mysql> create table exercise( ...
- switch语句(初学者)
C语言提供了另一种用于多分支选择的switch语句(常用于开关),一般形式为: switch ( 常量表达式 ) { case 常量1 :语句; case 常量2 :语句; case 常量3 :语句; ...
- 五、git创建及合并分支
1. 创建并切换到dev分支 git checkout -b dev // git checkout命令加上-b参数表示创建并切换,相当于以下两条命令 git branch dev git check ...