使用 pug 的原因:

使得 HTML 写起了来更加清晰和快捷

用法:

Vue 的用法没有变化:

<template lang="pug">
transition(name="sider")
div.hello
h3 {{msg}}
p(:style="{color:'#000'}", :htmlData="msg") p label
button(@click="clickMe") clickTest
</template>

要注意的一点是: 标签后面如果有属性(括号内的) 他和括号之间不要加空格,加了空格就会被当成字符串解析

vue-cli 2+ 配置:

下载包:

npm i -D pug pug-html-loader

在build/webpack.base.conf.js 的 module 中添加规则:

 module: {
rules: [
{
test:/\.pug$/,
loader: "pug-html-loader"
},
// 省略其他规则
]
}

好了启动或重启项目,即可开心的尝试了

vue-cli 3 配置:

由于 cli 升级到3了,相关配置发生了很大的改变,所以要和2的更改不同:

下载包:

npm i -D pug pug-html-loader pug-plain-loader

和2比多了一个 pug-plain-loader

在 vue.config.js (如果没有就在根目录下新建一个) 添加代码:

module.exports = {
chainWebpack: config => {
config.module.rule('pug')
.test(/\.pug$/)
.use('pug-html-loader')
.loader('pug-html-loader')
.end()
}
}

重启项目即可正常使用;

严格来说, vue-cli3 更像一种插件的使用,但是对于一些新人来说,可能还不习惯这样的操作吧

在 Vue 项目中(vue-cli2,vue-cli3)使用 pug 简化 HTML 的编写的更多相关文章

  1. Vue项目中使用基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...

  2. <转载> VUE项目中CSS管理

    vue的scoped 在vue项目中,当 .vue文件中 <style> 标签有 *scoped 属性时,它的 CSS 只作用于当前组件中的元素,很好的实现了样式私有化的目的. 使用sco ...

  3. vue项目中net::ERR_CONNECTION_TIMED_OUT错误

    我出错的原因时network地址与我本机ip地址不一致 Network: http://192.168.13.30:8080/ 处理方法: 在vue项目中新建一个vue.config.js文件 配置上 ...

  4. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  5. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  6. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  7. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  8. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

  9. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  10. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

随机推荐

  1. 接口测试工具-fiddler的运用

    本篇主要介绍一下fiddler的基本运用,包括查看接口请求方式,状态响应码,如何进行接口测试等 一.Fiddler的优点 独立的可以直接抓http请求 小巧.功能完善 快捷.启动就行 代理方便 二.什 ...

  2. FIRST集合、FOLLOW集合、SELECT集合以及预测分析表地构造

    FIRST集合.FOLLOW集合.SELECT集合以及预测分析表地构造 FIRST集合的简单理解就是推导出的字符串的开头终结符的集合. FOLLOW集合简单的理解就对于非终结符后面接的第一个终结符. ...

  3. mysql ab主从复制出错及解决过程

    一.mysql主从服务器报错描述:Slave_IO_Running=NO,Slave_SQL_Running=YES,Last_Errno=0 mysql slave stop ; mysql sla ...

  4. [luoguP1037] 产生数(floyd + 高精度)

    传送门 先用 floyd 求出每一个数可以变成那些数. 然后利用乘法原理求解,需要高精度. 代码 #include <cstdio> #include <cstring> #i ...

  5. hdu 3943 经典数位dp好题

    /* 题意:求出p-q的第j个nya数 数位dp,求出p-q的所有nya数的个数很好求,但是询问求出最终那个第j个值时是我不会求了看了下别人的思路 具体就是把p-q的第j个转化成0-q的第low+j个 ...

  6. bzoj 1430 小猴打架 prufer 性质

    小猴打架 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 709  Solved: 512[Submit][Status][Discuss] Descri ...

  7. BZOJ2272: [Usaco2011 Feb]Cowlphabet 奶牛文字

    n<=250个大写字母和m<=250个小写字母,给p<=200个合法相邻字母,求用这些合法相邻字母的规则和n+m个字母能合成多少合法串,答案mod 97654321. 什么鬼膜数.. ...

  8. HDU 5644 King's Pliot【费用流】

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5644 题意: 每天都有p[i]个飞行员进行阅兵,飞行员只工作一天. m个休假公式,花费tt[i]元让 ...

  9. Python安装与基本数据类型

    人生苦短,我选Python. Python比其他的语言来说真的简洁多了,很多时候想做的东西都有对应的模块可以导入,平时玩点小东西真心不错. 首先讲一下安装,其实没什么好讲的,点点点点点,完事. 这里的 ...

  10. Ubuntu 16.04安装SoapUI工具进行接口测试(Web Service/WSDL/RESTfull)

    SoapUI是一个跨平台接口测试工具,官方提供开源版本和商业版本.可以用来测试WSDL/RESTfull等接口. 替代的工具有JMeter. 一般用于WSDL的接口测试比较多,基于XML的形式,且这类 ...