Vue项目中配置pug解析支持
栏目: JavaScript · 发布时间: 5年前
内容简介:Vue 的用法没有变化:要注意的一点是: 标签后面如果有属性(括号内的) 他和括号之间不要加空格,加了空格就会被当成字符串解析下载包:
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 更像一种插件的使用,但是对于一些新人来说,可能还不习惯这样的操作吧
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- mybatis源码配置文件解析之三:解析typeAliases标签
- Nginx 源码:配置文件解析
- 解析持续交付之全面配置管理
- Nginx源码阅读笔记-配置解析流程
- Prometheus学习系列(十三)之配置解析
- [深入浅出Sphinx]Sphinx配置文件解析
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
区块链:定义未来金融与经济新格局
张健 / 机械工业出版社 / 2016-6-18 / 49.00
从构建价值互联网的角度看,区块链的出现意味着从0到1。正因如此,本书章节结构与常见的体例不同,从第0章开始。第0章从文字与货币的起源出发,通过论述人类信息传递和价值传输手段的进步,说明区块链技术诞生的必然性。第1章用深入浅出的语言讲解区块链的本质、运行原理、颠覆性潜力以及区块链技术的现状与未来;第2章宏观讲述了区块链技术带来的新产品和新机遇,包括数字货币、互联网金融、物联网,以及新一代的基础设施;......一起来看看 《区块链:定义未来金融与经济新格局》 这本书的介绍吧!