Pug模板化引擎，让你的代码减少15% |
您所在的位置：网站首页 › pug套路 › Pug模板化引擎，让你的代码减少15% |
Pug模板化引擎，让你的代码减少15%
|
前言
为什么要引入pug，pug有什么特别之处呢？有一些嵌套层次较深的页面，可能会出现巢状嵌套，如下图所示： 在后期维护和修改时，一不小心少了一个尖括号，或者某个标签的开始和闭合没有对应上，就会导致DOM结构的混乱甚至是错误。所以，有人发明了HAML，它最大的特色就是使用缩进排列来代替成对标签。受HAML的启发，Pug进行了javascript的实现。 Pug原名不叫Pug，是大名鼎鼎的jade，后来由于商标的原因，改为Pug，哈巴狗。其实只是换个名字，语法都与jade一样。丑话说在前面，Pug有它本身的缺点——可移植性差，调试困难，性能并不出色，但使用它可以加快开发效率。本文将详细介绍Pug模板引擎。 Vue使用Pug使用命令行安装Pug和他的loader npm i -D pug pug-html-loader pug-plain-loader 或者 yarn add pug pug-html-loader pug-plain-loader 复制代码cli2.0脚手架修改build/webpack.base.conf.js文件 module: { rules: [ { test:/\.pug$/, loader: "pug-html-loader" }, // 省略其他规则 ] } 复制代码cli3.0只要修改vue.config.js文件 module.exports = { chainWebpack: config => { config.module.rule('pug') .test(/\.pug$/) .use('pug-html-loader') .loader('pug-html-loader') .end() } } 复制代码模板添加语言类型设置 div.box 内容部分 复制代码 实践下面将拿出实际项目中的一些代码进行改造 原代码 选择相册： {{ item.name }} 上传照片 复制代码改造后 12行代码变成9行，标签完全简化 .gallery .btn-group span 选择相册: Select(v-model="cataId" style="width:200px") Option(v-for="item in catalogs" :value="item.id" :key="item.id" clearable) {{ item.name }} Button(type="info") 上传照片 vue-waterfall-easy(:imgsArr="imgsArr" @scrollReachBottom="loadMore" ref="waterfall") 复制代码 React使用Pug您需要包含babel 插件，以便程序识别Pug。 npm install --save-dev babel-plugin-transform-react-pug 复制代码在package.json（而不是.babelrc在根目录中创建文件）中包含以下 babel 配置。如果你已经有一个，只需在现有的 bable 配置中包含预设和插件属性package.json "babel": { "presets": [ "react-app" ], //already included "plugins": [ "transform-react-pug", "transform-react-jsx" ] }, 复制代码然后React也可以愉快的玩Pug啦. import React from "react" class App extends React.Component { render() { return pug` div h1 My Component p This is my component using pug.`; } } 复制代码 常见的问题如果你现在运行 npm start 你可能会得到以下错误 找不到模块“babel-plugin-transform-react-jsx 上面提到的缺少 babel-plugin-transform-react-jsx 安装它： npm install --save-dev babel-plugin-transform-react-jsx 之后，如果您运行该应用程序，您将收到以下错误。 Pug是未定义的 no-undef 作为默认使用的 reactjs [eslint-plugin-react][3]，请从 eslint-plugin-react-pug文档中执行以下操作 首先， npm install eslint --save-dev 然后， npm install eslint-plugin-react-pug --save-dev 接着在package.json修改eslintConfig. （您也可以.eslintrc在根目录中使用） "eslintConfig": { "plugins": [ "react-pug"], "extends": [ "react-app", "plugin:react-pug/all" ] } 复制代码最后 npm start Html转Pug在使用初期或在手动转译老代码时候我们总是觉得有点慢和难以适应，下面我给大家推荐一个可以把Html转换成Pug的网站。 网站地址：html2jade.org/ 接下来是官网地址，大家可以在官方文档查询到更详细的配置与用法。 官网地址：www.pugjs.cn/api/getting… |
【本文地址】