elh is a static HTML template engine.
It was mainly developed to ease the writing of Vue.js templates.
<v-container>
<v-row>
<v-col>
<v-btn>
<v-icon>
mdi-heart
</v-icon> <--
</v-btn> <--
</v-col> <-- REALY REQUIRE ????
</v-row> <--
</v-container> <--
yarn add -D elh-loader
module.exports = {
module: {
rules: [
{
test: /\.elh$/i,
use: 'elh-loader'
}
]
}
}
export default {
build: {
extend(config) {
config.module.rules.push(
{
test: /\.elh$/i,
use: 'elh-loader'
}
)
}
}
}
<template lang="elh">
<v-app>
<v-app-bar>
<titel> TITEL
<v-content>
<v-container>
<v-row>
<v-col>
<v-btn><v-icon> HELLO!
<v-col>
<v-btn><v-icon> WORLD!
<v-footer>
FOOTER
</template>
The above code will be rendered as complete html.
v-cotainer
v-row
v-col
v-btn
v-icon mdi-heart
v-row
v-col
v-btn
v-icon mdi-star
v-row
v-col
v-btn
v-icon mdi-autorenew
<v-container>
<v-row><v-col><v-btn><v-icon> mdi-heart
<v-row><v-col><v-btn><v-icon> mdi-star
<v-row><v-col><v-btn><v-icon> mdi-autorenew
Indentation is often too deep in the case of pug.
The concept of elh is not indent-based. The concept is to omit closing tags.
<v-app>
<v-app-bar>
<titel> TITEL
<v-content>
<v-container>
<v-row>
<v-col>
<v-btn><v-icon> HELLO!
<v-col>
<v-btn><v-icon> WORLD!
<v-footer>
FOOTER
↓
<v-app>
<v-app-bar>
<titel>
TITEL
</titel>
</v-app-bar>
<v-content>
<v-container>
<v-row>
<v-col>
<v-btn>
<v-icon>
HELLO!
</v-icon>
</v-btn>
</v-col>
<v-col>
<v-btn>
<v-icon>
WORLD!
</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-content>
<v-footer>
FOOTER
</v-footer>
</v-app>
<v-app>
<v-app-bar app="app" dense="dense" flat="flat">
<img src="@/assets/images/logo.svg" />
<img src="@/assets/images/hoge.svg" />
<v-content class="default-background-color">
↓
<v-app>
<v-app-bar app="app" dense="dense" flat="flat">
<img src="@/assets/images/logo.svg" />
<img src="@/assets/images/hoge.svg" />
</v-app-bar>
<v-content class="default-background-color">
</v-content>
</v-app>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent