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 更像一种插件的使用,但是对于一些新人来说,可能还不习惯这样的操作吧


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

区块链:定义未来金融与经济新格局

区块链:定义未来金融与经济新格局

张健 / 机械工业出版社 / 2016-6-18 / 49.00

从构建价值互联网的角度看,区块链的出现意味着从0到1。正因如此,本书章节结构与常见的体例不同,从第0章开始。第0章从文字与货币的起源出发,通过论述人类信息传递和价值传输手段的进步,说明区块链技术诞生的必然性。第1章用深入浅出的语言讲解区块链的本质、运行原理、颠覆性潜力以及区块链技术的现状与未来;第2章宏观讲述了区块链技术带来的新产品和新机遇,包括数字货币、互联网金融、物联网,以及新一代的基础设施;......一起来看看 《区块链:定义未来金融与经济新格局》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具