具有 HAML/Jade/Pug 类模板的 VueJS答案

【问题标题】：VueJS with HAML/Jade/Pug-like templating具有 HAML/Jade/Pug 类模板的 VueJS
【发布时间】：2018-06-21 09:15:31
【问题描述】：

我在当前项目中同时使用 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 插件？

【问题讨论】：

这里问的是什么不是很清楚。现在，使用 Haml 的问题已被标记为与此处重复。作为一个在 Vue 文件中遇到一些 Haml 错误的人，我很困惑......
你是对的，它没有写清楚。基本上，“通过 HAML 解析器传递 Vue 语法是否安全，还是有更好的方法？”而更好的方法基本上是“使用 Pug 插件到 Vue”。

标签： vue.js pug haml templating

【解决方案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

【讨论】：