Pug与TailWindCSS

Pug^[1]

Pug 是一款模板引擎。Vue.js 支持使用 Pug 来编写 template。

user@Debian:~/Vue3Project$ yarn add -D pug # 添加Pug为开发依赖；-D是(--save-dev)保存为开发依赖

<template lang='pug'>
// 注释，会在生成的HTML中显示
//- 注释，不会在生成的HTML中显示

p= "<转义>"
p!= "不转义<hr />"

- var url = "baidu.com"; //- 支持JS表达式

a.btn(href="https://" + url, target='_blank') 百度一下，你就知道
| 转化为文本
//- 插值
span #{url} #[strong 嵌入 标签]
</template>

Q：Pug 如何表示嵌套关系？
A：Pug 严格缩进，使用缩进表示嵌套关系。

分支判断

<template lang='pug'>
- var url = '';

//- 分支
case url === ''
    when true
        p True
        - break;
    default: p False

//- 除非
unless url === ''
    p 除非

//- if判断
if url === ''
  p True
else if url === 'baidu.com'
  p 百度一下，你就知道
else
  p False
</template>

循环

<template lang='pug'>
- var obj = { 1: "Red", 2: "Green", 3: "Blue" };

ul
    //- while循环
    while obj.length !== 0

        //- 遍历
        each color, index in obj
            li= index + ":" + color
        - break;

//- for循环
- for (var x = 0; x <= 3; x++)
    p= obj[x]
</template>

块与Mixin^[2]

<template lang='pug'>
//- Mixin定义
mixin pet(name, ...items)
    //- 混入属性
    li.pet&attributes(attributes)= name
    //- 块
    block
    - for (x = 0; x < items.length; x++)
        p= items[x]

ol
    //- 调用Mixin
    +pet('Kitty', 1,2,3,4).cat
        p '块'
    +pet('Doge')
</template>

导入与过滤

要使得 Pug 中能使用其它语言，须添加依赖支持。

user@Debian:~$ yarn add -D jstransformer-markdown-it # 添加Markdown-it为开发依赖

<template lang='pug'>
//- 导入并过滤处理
include:markdown-it ../index.pug
</template>

TailWindCSS^[3]

TailWindCSS 是一套 CSS 工具库，可以在 HTML 里使用规定类名简化样式的编写。

user@Debian:~/Vue3Project$ npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 --registry=https://registry.npmjs.org # 安装开发依赖

user@Debian:~/Vue3Project$ ./node_modules/.bin/tailwindcss init -p # 生成配置文件

user@Debian:~/Vue3Project$ vi ./tailwind.config.js # 剪枝未使用样式
purge: [
  './index.html', './src/**/*.{vue,js,ts,jsx,tsx}'
]

user@Debian:~/Vue3Project$ vi ./src/index.css # 导入TailWind样式
/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

VSCode 插件支持：Tailwind CSS IntelliSense^[4]

? Ask More...