具有 HAML/Jade/Pug-like 模板的 VueJS

Question

我在当前项目中同时使用 Vue.js 和 HAML。模板由 HAML 解析，转换为 HTML，然后由 Vue 解析。例如：

#pagecontent.nonscrolling
    %h2 Demand forecasts
    %label{ for:"location-type" } Select location type
    %select.form-control#location-type{ v-model:"locationType" }
        %option{ v-bind:value:"'foo'" } Foo

它工作正常，但有点令人不安的是担心是否所有的 Vue 语法都会让它毫发无损地通过 HAML 解析器。

但我真的很喜欢这种简洁、无尖括号的模板。

有没有更简洁的方法来实现这一点？一些支持类似内容的 Vue 附加组件？

Answer 1

不用太担心。使用预处理器没有错。我的意思是 vue 依赖于 wepback，其中所有内容都以一种或另一种方式进行预处理。开箱即用，你可以将 pug 与 vue 一起使用，所以我更加信任它。它对我来说很好用，没有任何意想不到的问题。两者都有通过缩进嵌套的共同点，这开始与较长的源代码混淆。所以我主要在短组件中使用 pug，并使用命名插槽将它们嵌套到更大的组件中。

你的代码 - pug 版本（据我所知，这个 HAML 代码应该做什么）

<template lang="pug">
#pagecontent.nonscrolling
    h2 Demand forecasts
    label(for="location-type") Select location type
    select.form-control#location-type(v-model="locationType") 
        option(v-bind:value="foo") Foo
</template>

整个 Vuetifyjs 网站都是用 pug 制作的： Vuetifyjs.com Source Code

具有 HAML/Jade/Pug-like 模板的 VueJS

VueJS with HAML/Jade/Pug-like templating

haml

templating

vue.js

pug