有关 pug-loader 的使用

最新推荐文章于 2024-06-25 11:10:30 发布

Janicelily

最新推荐文章于 2024-06-25 11:10:30 发布

阅读量530

点赞数

文章标签： javascript css html5

本文链接：https://blog.csdn.net/Beth__hui/article/details/111356602

版权

本文介绍了如何在项目中安装和配置pug-loader，特别是在vue-cli 3的不同版本下进行设置。通过使用pug，可以实现简洁的HTML语法，如通过缩进表示嵌套结构，并省略结束标签。

摘要由CSDN通过智能技术生成

一、安装

npm i pug pug-loader

#二、配置
vue-cli 3 以下版本修改webpack
在这里插入图片描述
vue-cli 3 以上版本是在vue.config.js 里面修改

#三使用

lang = ‘pug’
. 就是默认 div 的 class 名

缩进就是默认含在下一级
不用写类似结束标签。看起来比较简洁。

<template lang='pug'>
.kkkk
  div(class="start common" @mousedown="mousedown($event)" @mousemove="mousemove($event)" @mouseup="mouseup($event)"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Janicelily

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

pug的安装以及pug-plain-loader处理模板

weixin_46686024的博客

09-07

3959

安装 npm install pug 处理模板 pug-loader 大多数Webpack模板加载器（例如）都pug-loader返回模板函数而不是已编译的HTML字符串 pug-plain-loader 代替使用pug-loader，我们需要使用一个返回原始HTML字符串的加载器，例如pug-plain-loader 安装pug-plain-loader npm install -D pug pug-plain-loader 安装成功：然后就可以编写了 <template lang="pug

Pug HTML Loader 使用教程

最新发布

gitblog_00963的博客

09-01

709

Pug HTML Loader 使用教程 pug-html-loaderPug HTML loader for webpack项目地址:https://gitcode.com/gh_mirrors/pu/pug-html-loader 项目介绍 Pug HTML Loader 是一个用于 Webpack 的加载器，专门用于将 Pug 模板编译成 HTML。这个加载器使得开发者可以在 Webpac...

参与评论您还未登录，请先登录后发表或查看评论

Vue中lang=pug模板引擎之pug模板语法

weixin_52740695的博客

06-25

640

pug 是一种前端模板引擎，原名 jade，可用来生成 HTML，它的写法类似于 CSS。入门指南 – PugHTML标签必须进行闭合，如果不闭合的话容易报错。HTML没有模板机制，如果不使用前端框架维护起来非常困难。易理解，极大的简约了我们的代码。

在 Vue 项目中(vue-cli2,vue-cli3)使用 pug 简化 HTML 的编写

diecuoxie4468的博客

08-05

673

使用 pug 的原因: 使得 HTML 写起了来更加清晰和快捷用法: Vue 的用法没有变化: <template lang="pug"> transition(name="sider") div.hello h3 {{msg}} p(:style="{color:'#000'}", :htmlData="msg") p label ...

pug-loader:用于Webpack的Pug加载程序模块

04-12

帕格装载机用于Webpack的哈巴狗装载机。用法 var template = require ( "pug-loader!./file.pug" ) ; // => returns file.pug content as template function // or, if you've bound .pug to pug-loader var template = require ( "./file.pug" ) ; var locals = { /* ... */ } ; var html = template ( locals ) ; // => the rendered HTML 有关如何使用webpack加载程序的更多信息，请参阅。为了在编译时获得呈现HTML，请将此加载程序与结合使用： var html = require("apply-loader!pug-l

常用 loader 集锦

小王_同学的博客

01-03

1520

做项目的时候不知道加载文件需要那个 loader , 在网上找了很长时间，这个相对全一点，记录下来。 1.模板: (1)html-loader:将HTML文件导出编译为字符串，可供js识别的其中一个模块 (2)pug-loader : 加载pug模板 (3)jade-loader : 加载jade模板(是pug的前身，由于商标问题改名为pug) (4)ejs-loader : 加载ejs模板 (5...

simple-pug-loader:比帕格装载机简单

05-06

用于编译pug模板的defacto loader是。 simple-pug-loader执行相同的操作，仅在许多用例中更好。帕格装载机的问题帕格装载机虽然可以正常工作，但维护得不好。它遭受许多问题的困扰，导致它不遵守正常的哈巴狗...

pug-slides-loader:用于Reveal.js幻灯片（.pug文件）的简单Webpack加载器，可将它们快速注入一个位置

04-02

定制的Webpack加载器以与样板一起使用它用于在webpack编译过程中自动导入manifest.js幻灯片（.pug文件）。它有助于保持您的项目... //ts-loader... { test : require . resolve ( './src/ts/index.ts' ) , // root

angular-pug-scss-webpack:使用Pug，SCSS和Webpack运行Angular的样板代码

05-12

在本文中，我们将深入探讨如何使用Angular框架与Pug（原名Jade）作为模板引擎、SCSS（Sass的预处理器）进行样式编写，并通过Webpack进行模块打包。这是一个高效且现代化的前端开发配置，旨在提升开发效率和代码可...

vue+webpack添加对pug的支持

weixin_30321449的博客

12-12

192

// 安装pug和加载器 yarn add pug-loader pug-plain-loader pug --dev 　　 // webpack.config.js中添加规则 { test: /\.pug$/, use: ['pug-plain-loader'] } 　使用　 <template lang="...

富士调试软件FRENICLoader3中文版

05-20

安装方式： 1、解压文件后安装里面的 FRENICLoader3CV5120SampleSetup.exe,支持变频器只有C1S一个系列。 2、安装后将“FRENICLoader3全开”文件夹内的文件复制并替换到“FRENICLoader3”安装目录下就支持富士C1S，F1S，E1S，G1S，LM1S等全系列的变频器可以了。

Pug 模板引擎：学习与使用

bighead的博客

03-19

3192

在 Vue 3 中使用 Pug（也称为 Jade）作为模板引擎，具有一些明显的优点和潜在的缺点。

初识pug（jade）

热门推荐

qq_40704765的博客

01-30

1万+

1.所谓的pug就是我们之前说的jade,也就是一种通过缩进的方式来编写代码的过程，在编译的过程中，我们不需要考虑标签是否闭合的问题。此外，用这种编译方式，加快了我们写代码的速度，也为代码复用提供了便捷。 2.在学习pug基础语法之前，首先要了解pug的命令行的使用,例如： doctype html html head titl

lang=pug模板引擎之pug模板语法

张木期的博客

12-22

8890

今天看到同事的项目 <template lang="pug"> .d-flex.align-center.line-progress div(style='width: 30px') {{ name }} div(style='width: 80%') el-progress(:stroke-width='10', :percentage='+percent') </template> 看的我一脸懵逼，同事让我了解一下这个语法，于是找了一下资料，下面总结一下吧：解

Pug

多啦的博客

03-18

5876

简介 Pug，原名 Jade，是一个很流行的 HTML 模板引擎，后来由于 Jade 被注册为商标的原因，改名为 Pug，中文官网在这里。安装和使用 npm install pug -g 如果需要使用命令行对 pug 模板进行编译，还需要安装 pug-cli npm install pug-cli -g Pug 和原来用过的 Smarty 模板、Ractive 模板类似...

vue 使用pug（详细说明）

Jerryman_GHJ的博客

03-04

2187

1.安装pug npm i -D pug pug-html-loader pug-plain-loader cli2.0脚手架修改build/webpack.base.conf.js文件 module: { rules: [ { test:/\.pug$/, loader: "pug-html-loader" }, // 省略其他规则 ] ...

Pug -- 全新的 Vue 高效书写体验

军火库

01-10

3301

在年初Vue3刚成为Vue的默认版本时，在文档中看到了Pug的影子，虽然好奇，由于时间关系一直没能专心去尝试一下Pug在Vue3🀄️的体验。最近决定不能一拖再拖了，熬夜体验了一番，果然没让人失望。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

Vue 中使用 Pug

weixin_36873225的博客

08-24

2106

Vue 中使用 Pug 1 介绍 pug 是一种前端模板引擎，原名 jade 可用来生成 HTML，它的写法类似于 CSS 这里先简单举几个例子 #hello <div id="hello"></div> a.link-button Link <a class="link-button">Link</a> 易理解，同时极大的简约了我们的代码。 2 安装 2.1 下载 npm i -D pug pug-html-loader pug-plain-loade

vue-loader里面的options所有属性

07-13

Vue-loader 的 options 属性可以根据不同的版本和配置而有所不同，以下是可能出现的所有属性列表： - `compiler`: 指定使用的编译器，默认为 vue-template-compiler。可以使用其他编译器，比如 pug，来编译模板。 - `esModule`: 指定是否将导出的模块作为 ES 模块，默认为 true。 - `hotReload`: 指定是否在开发模式下启用热重载，默认为 true。 - `productionMode`: 指定是否在生产模式下编译和加载组件，默认为 false。 - `preLoaders`: 指定在加载组件之前应用的其他 loader，可以是字符串或者对象数组。 - `postLoaders`: 指定在加载组件之后应用的其他 loader，可以是字符串或者对象数组。 - `cache`: 指定是否启用缓存，默认为 true。 - `cacheDirectory`: 指定缓存目录的路径，用于缓存转换结果以提高构建性能。 - `cacheIdentifier`: 指定用于标识缓存的字符串。 - `cacheCompression`: 指定是否使用缓存压缩，默认为 true。 - `cacheCompressionOptions`: 指定缓存压缩选项的对象。 - `cacheKey`: 指定生成缓存键的函数。 - `transpileOptions`: 指定传递给 Babel 的选项对象。 - `transformAssetUrls`: 指定处理资源 URL 的选项对象。 - `transformToRequire`: 指定需要将哪些属性转换为 require 调用的选项对象。请注意，具体可用的属性和默认值可能会根据你使用的 Vue-loader 版本而有所不同。建议查阅 Vue-loader 的官方文档或相关版本的文档以获取准确的信息。