VuePress で pug を使う
html を端的に書けるように pug に対応する。
pug のインストールと設定
yarn add --dev pug pug-plain-loader
1
docs/.vuepress/config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('pug')
.test(/\.pug$/)
.use('pug-plain-loader')
.loader('pug-plain-loader')
.end()
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
pug を使う
Home.vue を pug で書き換える
docs/.vuepress/theme/Home.vue
<template lang="pug">
.home
.hero
a(v-if="data.heroImage && data.actionLink" :href="link")
img(v-if="data.heroImage" :src="$withBase(data.heroImage)" alt="hero")
h1 {{ data.heroText || title || 'Hello' }}
p.description {{ data.tagline || $description || 'Welcome to your VuePress site' }}
p.action(v-if="data.actionText && data.actionLink")
NavLink(class="action-button" :item="actionLink")
.features(v-if="data.features && data.features.length")
.feature(v-for="feature in data.features")
h2 {{ feature.title }}
p {{ feature.details }}
Content(custom)
.footer(v-if="data.footer") {{ data.footer }}
</template>
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18