一:在HTML中使用pug

在css中有预处理器less和scss来使我们的样式表更加的简介,那么在HTML中有没有这样的格式呢,答案是有的,那就是pug(前身是jade),效果如下:

转译以后

好,看步骤:

第一步:安装pug:

#安装支持pug依赖
npm install -g pug pug-loader pug-filters pug-cli

  这个地方务必使用全局安装,否则会出现“'pug' 不是内部或外部命令,也不是可运行的程序“

第二步:了解pug的语法:

具体大家可以去看一下这个官方文档:https://pug.bootcss.com/language/includes.html,有不会的可以大家交流一下下

第三部:转译成html:

pug xxx.pug

 在命令行是执行这一行代码即可转译成HTML的代码

二:在vue+webpack中使用

第一步:安装,不赘述,与上面第一步同;

第二步,在webpack.base.config.js里面进行配置:

把这三段代码加进来:

{
test: /\.scss$/,
loader: 'style!css!sass?sourceMap'
},
{
test: /\.jade$/,
loader: "jade"
},
{
test: /\.pug$/,
loader: 'pug'
},

第三步:在vue中使用pug:

我们只需要在template标签里面加入lang=“pug”即可使用pug的语法

使用pug(jade),以及在vue+webpack中使用pug(jade)的更多相关文章

  1. [vue]webpack中使用组件

    https://blog.csdn.net/ywl570717586/article/details/79984909 vue.js中全局组件 全局组件的定义 <!DOCTYPE html> ...

  2. Javascript - Vue - webpack中的组件、路由和动画

    引入vue.js 1.cnpm i vue -S 2.在mian.js中引入vue文件 import Vue from "vue"//在main.js中使用这种方式引用vue文件时 ...

  3. Javascript - Vue - webpack中的axios

    导入axios import Vue from "vue";import axios from "axios";import { get } from &quo ...

  4. 关于vue,webpack 中 “exports is not defined”报错

    vue项目npm run dev 后项目报错 : 提示 “exports is not defined”. 导致这个问题是因为balbel的配置文件.babelrc的问题: { "prese ...

  5. vue+ webpack中的animate.css实现的执行多个连续的动画

    1.安装 npm install animate.css 2.使用方法 入口文件App中进行引入 import animate from 'animate.css' 3.多个连续的动画 实现的效果:实 ...

  6. vue2.0中使用pug(jade)

    第一部分:pug(jade)模板引擎 pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签. 它简化了HTML的成对标签的写 ...

  7. 在vue中使用pug

    安装pug npm i pug pug-loader pug-cli pug-filters -D pug :安装pug pug-loader:pug的loader pug-cli:pug 编译工具 ...

  8. webpack+vue-loader 在单独.vue组件中使用sass-loader编译sass报错问题not a valid Win32 applictation

        如果webpack配置没有问题,在vue文件中编译sass/scss报上面的错误,大概是由于node-sass安装失败,重新卸载安装,   在国内安装node-sass失败的话,可以使用淘宝镜 ...

  9. Vue.js中组件传参的方法 - 基于webpack模板

    在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...

随机推荐

  1. 破解Aspose 操作pdf word等文档 对10以下版本有效

    using System; using System.IO; namespace LicenseHelper { public static class License { public const ...

  2. tcp_handle_req: Made 4 read attempts but message is not complete yet - closing connection

    一.现象 测试opensips时遇到这么一个错误提示: ERROR:core:tcp_handle_req: Made read attempts but message is not complet ...

  3. 用Reflector for .NET反编译dll文件(.net),把整个dll导出个cs插件

    Reflector for .NET 下载地址: http://www.aisto.com/roeder/dotnet/ Reflector.FileDisassembler.zip下载地址: htt ...

  4. maven ArtifactTransferException:failure

    手动下载对应jar放在本地仓库 -> Update Dependencies(Maven4Myeclipse:eclipse上maven插件)

  5. [vt]xenserver磁盘扩容扩不大问题解决

    xenserver将磁盘扩大后,fdisk可以看到容量大了,但是df -h看到磁盘并没有大,解决. 参考 说明:XenServer里面安装的虚拟机,分区的时候采用的是LVM磁盘分区 需求:现在需要扩容 ...

  6. JAVA数字特征值

    数字特征值(5分) 题目内容: 对数字求特征值是常用的编码算法,奇偶特征是一种简单的特征值.对于一个整数,从个位开始对每一位数字编号,个位是1号,十位是2号,以此类推.这个整数在第n位上的数字记作x, ...

  7. Centos7 安装Git-cola

    首先安装Git sudo yum -y install git* 找到 git-all.noarch , 安装这个. sudo yum install git-all.noarch ========= ...

  8. vuex中store分文件时候index.js进行文件整合

    import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); import getters from './getters.js' impo ...

  9. 一题关于PHP的CTF

    if(isset($_GET['time'])){ if(!is_numeric($_GET['time'])){ echo 'The time must be number.'; }else if( ...

  10. EF调用存储过程、函数

    一.ef4.1 codeFirst 修改表结构 增加字段等 EF code first需要重新生成库导致数据丢失的问题 说这个问题前 首先先说下 我使用ef4.1 codefirst的目的. 是因为可 ...