Vue进阶课堂之《从HTML到Pug》

啥

Pug听起来或许比较陌生，但是如果说起她的前生，相信各位多少会有耳闻：Jade。

每当你不停的敲打`<></>`的时候，可曾想过，这该死的箭头是不是可以拿掉？这不单单是看着不舒服，有时候还会因为行数过多，而导致你头晕眼花。

或许你知道，有个东西叫emmet，它是解决了你写的时候多写的那些内容，但是并没有解决冗余的代码行数，更不要提在你没有完全熟练使用emmet前，脑子里面需要进行大量的预翻译！

那么是否有一种既能减少代码量，又能不做预翻译的方案呢，呐呐呐，Jade这个后端模板出现了，然后改名叫Pug了，现在Vue也支持这个语法，具体请往下看。

如何使用

npm i -D pug pug-loader
`<template lang='pug'>` 即可

本人喜欢使用Pug、CoffeeScript、Sass，前两者有共有的哲学，CoffeeScript说自己就是JavaScript，同样的，Pug也就是HTML，你可以理解成语法糖。

功力如何

我们先来看一段HTML代码

95个字符，5行，3个结束标签

整成Pug

label
 input(type="checkbox")
 span 记住密码
 .show-box

54个字符，4行，没有结束标签

差别有了，惊不惊喜？再来！

15行，671个字符，9个结束标签

.container
 .ver.seller
 input.storeId(type='number' v-model='storeId' placeholder='输入店号' @focus='passwordShow=false')
 .nav
 button.go(@click='clickGo(0)') 我是卖家
 button.little(@click='clickRegist') 注册卖家
 button.go(@click='clickGo(1)') 我是买家
 .ver.password(v-if='passwordShow')
 input.storeId(type='password' v-model='password' placeholder='输入你的6位密码')
 button.go(@click='login') 点击登录
 span.buyer-show(v-if='passwordShow' @click='passwordShow=false') 重置

11行，481个字符，没有结束标签（这里我个人书写习惯是回车切割，为了统一对比采用这种写法）

简单推算

大约代码量节省30%，行数节省20%。如果公司绩效算行数或代码量的千万别用- -

tips

Vue 使用有没有什么需要注意的地方
> 没有，完全没有，该“：”就冒号，该“@”就shift+2
一些小坑
注意使用“|”符号来切割文字，如：

span
 i
 span.red love
 | you // 这里没必要再用一个span，使用“|”即可

Pug其他功能

Pug是后端模板起家，所以功能肯定不单单是简化语法这么简单，她也有变量、混合、过滤等等等等功能（实用性远超Ejs等），但是实际上这些功能在使用中跟Vue功能重复，我们搭建项目主要还是Vue，所以能用Vue的就用Vue的，Pug对于我们项目来说，最大的功能就是精简和整理代码。

如需了解其他功能，请前往官网查阅：Pug官网「链接」

PS：以上内容为一年前内容，现在个人已经不建议使用CoffeeS与Sass了，尤其Sass在不同终端系统的包差异化导致系列问题。只有Coffee，恐怕只是不想再担任人肉翻译机了。壮哉我大Ruby啊。。。

S Code 的常用快捷键和插件

一、vs code 的常用快捷键

1、注释：

a) 单行注释：[ctrl+k,ctrl+c] 或 ctrl+/

b) 取消单行注释：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u)

c) 多行注释：[alt+shift+A]

d) 多行注释：/**

2、移动行：alt+up/down

3、显示/隐藏左侧目录栏 ctrl + b

4、复制当前行：shift + alt +up/down

5、删除当前行：shift + ctrl + k

6、控制台终端显示与隐藏：ctrl + ~

7、查找文件/安装vs code 插件地址：ctrl + p

8、代码格式化：shift + alt +f

9、新建一个窗口 : ctrl + shift + n

10、行增加缩进: ctrl + [

11、行减少缩进: ctrl + ]

12、裁剪尾随空格(去掉一行的末尾那些没用的空格) : ctrl + shift + x

13、字体放大/缩小: ctrl + ( + 或 - )

14、拆分编辑器 : ctrl + 1/2/3

15、切换窗口 : ctrl + shift + left/right

16、关闭编辑器窗口 : ctrl + w

17、关闭所有窗口 : ctrl + k + w

18、切换全屏 : F11

19、自动换行 : alt + z

20、显示git : ctrl + shift + g

21、全局查找文件：ctrl + shift + f

22、显示相关插件的命令(如：git log)：ctrl + shift + p

23、选中文字：shift + left / right / up / down

24、折叠代码： ctrl + k + 0-9 (0是完全折叠)

25、展开代码： ctrl + k + j (完全展开代码)

26、删除行 ： ctrl + shift + k

27、快速切换主题：ctrl + k / ctrl + t

28、快速回到顶部 ： ctrl + home

29、快速回到底部 : ctrl + end

30、格式化选定代码 ：ctrl + k / ctrl +f

31、选中代码： shift + 鼠标左键

32、多行同时添加内容（光标）：ctrl + alt + up/down

33、全局替换：ctrl + shift + h

34、当前文件替换：ctrl + h

35、打开最近打开的文件：ctrl + r

36、打开新的命令窗：ctrl + shift + c

二、vs code 的常用插件

1、Auto Rename Tag 修改html标签，自动帮你完成尾部闭合标签的同步修改，和webstorm一样。

2、Auto Close Tag 自动闭合HTML标签

4、Beautiful 格式化代码的工具

5、Dash Dash是MacOS的API文档浏览器和代码段管理器

6、Ejs Snippets ejs 代码提示

7、ESLint 检查javascript语法错误与提示

8、File Navigator 快速查找文件

9、Git History(git log) 查看git log

10、Gulp Snippets 写gulp时用到，gulp语法提示。

11、HTML CSS Support 在HTML标签上写class智能提示当前项目所支持的样式

12、HTML Snippets 超级好用且初级的H5代码片段以及提示

13、Debug for Chrome 让vs code映射chrome的debug功能，静态页面都可以用vscode来打断点调试、配饰稍微复杂一点

14、Document this Js的注释模板

15、jQuery Code Snippets jquery提示工具

16、Html2jade html模板转pug模板

17、JS-CSS-HTML Formatter 格式化

18、Npm intellisense require 时的包提示工具

19、Open in browser 打开默认浏览器

20、One Dark Theme 一个vs code的主题

21、Path Intellisense 自动路径补全、默认不带这个功能

22、Project Manager 多个项目之间快速切换的工具

23、Pug(Jade) snippets pug语法提示

24、React Components 根据文件名创建反应组件代码。

25、React Native Tools reactNative工具类为React Native项目提供了开发环境。

26、Stylelint css/sass代码审查

27、Typings auto installer 安装vscode 的代码提示依赖库，基于typtings的

28、View In Browser 默认浏览器查看HTML文件（快捷键Ctrl+F1可以修改）

29、Vscode-icons 让vscode资源目录加上图标、必备

30、VueHelper Vue2代码段（包括Vue2 api、vue-router2、vuex2）

31、Vue 2 Snippets vue必备vue代码提示

32、Vue-color vue语法高亮主题

33、Auto-Open Markdown Preview markdown文件自动开启预览

34、EverMonkey 印象笔记

35、atom one dark atom的一个高亮主题(个人推荐)

三、常用的电脑快捷键

1、ctrl + shift + delete 快速清除浏览器缓存

2、ctrl + alt + delete 快速进入任务管理器页面

3、window + L 快速锁定电脑

4、window + d 所有窗口最小化

5、 window + e 打开我的资源管理器(我的电脑)

6、 window + f 快速打开搜索窗口

7、 alt + tab 快速查看打开的应用与窗口

数字程序代码

日，Pug 3.0.0 正式发布，Pug 原名 Jade，是由 TJHolowaychuk 开发的一款模板引擎，也是 Haml 的 JavaScript 实现版本。Pug 3.0.0 增加了一些新功能，除此之外新版本将不再支持 Node.js 6 和 Node.js 8。

重大变化

如果想使用支持 renderBuffer 的过滤器，read 插件必须返回到 Buffer。如果开发者不希望使用这一功能，则可以像从前一样返回 string。
使用 minify 过滤器上的选项需要安装相应的 jstransformer，目前支持的有：jstransformer-uglify-js：用于 JavaScriptjstransformer-clean-css：用于 CSS
不再支持 Node.js 6 和 Node.js 8。

新功能

Pug 3.0.0 中加入了新的 each…of…循环。该语法可以使开发者遍历 Maps、Sets 和 Arrays，比之前的 each…in…语法更高效，此版本依旧支持 each…in… 语法。
支持编写对二进制数据（例如图像）进行操作的过滤器，可以导入图像，应用过滤器并输出优化的 < img/> 标签，这一操作可以缩短页面加载时间，并使 Web 应用程序更加易于部署。

例如：

复制代码

// options.jsexports.filters = {png: {// instead of a function, specify an object with a "renderBuffer" property// whose value is a function that takes a Buffer instead of a stringrenderBuffer: function(buffer, options) {var data = Buffer.from(buffer).toString('base64');return '<img src="data:image/png;base64, ' + data + '"/>';      }   }};

然后就可以使用该过滤器了：

复制代码

// foo.puginclude:png my-small-image.png

支持使用 generateCode 生成替换代码。

Rolling 版本

作者表示，自从他将 Pug 的单独的软件包合并到“mono repo”中以来，发行的难度增加了，后经一位 ThreadsStyling 的同事介绍了解到了语义释放，进而广泛地使用它，不过仍有一些限制：

语义释放不适用于 mono 仓库；
语义发布需要精确格式化的提交消息；
语义发布每次提交仅允许一项功能 / 错误修复 / 重大修改。

作者一直认为解决此问题的方法是将更改日志附加到拉取请求，而不是提交请求。所以在过去的 6 个月中，他一直在探索这个问题的解决方案。此次的 Rolling 版本提供了一个简单的用户界面，可以将更改日志附加到请求中的特定软件包。然后，它会提供一个 CLI 来发布软件包，开发者可以在持续集成服务上运行该软件包。

Pug 采用简化语法的方式，将原本臃肿的 HTML 标记精简化，同时还有很多优点：超强的可读性、灵活易用的缩进、块扩展、代码默认经过代码处理以增加安全性、拥有编译和运行时的上下文错误报告、命令行编译支持、HTML5 模式、可选的内存缓存、联合动态的静态标记类、利用过滤器解析树的处理…

因为这些优点，Pug 收获了很多开发者的好评。开发者表示，Pug 和 Vue 简直是天作之合，大幅度提高了编码效率，不过 Pug 似乎不太适合与 React 一起使用，因为关闭标签会浪费太多行代码。

在线咨询

上一篇：HTML简介：想成为前端开发者？先从掌握HTML开始！
下一篇：教你免费下载付费文档，不限次数不用任何工具，全网资料任意复制

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商