时间戳

首页 > 解决方案 > Express-Handlebars 部分的 Vue.js 等效项是什么？

javascript - Express-Handlebars 部分的 Vue.js 等效项是什么？

问题描述

我使用 Express 和 Handlebars 开始了一个项目，然后被鼓励查看 Vue.js。我仍处于阅读文档的阶段，但到目前为止还无法理解如何在 Vue.js 中拥有布局、部分和部分。我认为部分将是一个组件，但我不知道如何拥有可以注入内容的部分和部分的布局。

这就是我express-handlebars在一个名为的文件中使用 npm 所做的baselayout.hbs：

<!doctype html>
<html lang="en">
<head>
    {{> global/headcode }} <!-- partial view with code for the head tag. it has stuff like favicon links --->
    {{{_sections.pagemeta}}} <!-- page specific metadata injected here. this would be meta keywords description etc for a page/view --->
</head>
<body>
<div>
    {{> global/siteheader }} <!--- partial view for the site's header --->

    <div id="base-Container">
        <main id="base-Content" role="main">
            {{{ body }}} <!--- a page's main body content goes here --->
        </main>
    </div>
</div>
{{> sitefooter }} 
{{{_sections.pagescripts}}} <!-- section for page-specific scripts injected here --->
</body>
</html>

我怎样才能在 Vue.js 中设置类似上面的东西，它也适用于服务器端渲染？我只需要一个包含页眉/页脚组件的基本布局，还需要特定页面内容可以进入的部分。

标签： javascriptnode.jsvue.jshandlebars.jsexpress-handlebars

解决方案

您可能需要在组件中使用组件和插槽。

是的，您需要为每个部分创建一个组件。每个组件都有一个模板。

然后，您将拥有一个将所有这些组合在一起的主要组件。使用您已经拥有的更精细的组件（您的部分）。

现在，如果模板结构（每个组件的 html）来自服务器，那么您可以使用插槽 https://vuejs.org/v2/guide/components-slots.html这是 VueJs 允许组件接收自定义标记的一种方式实例化组件时（请参阅文档中的示例）

对于您的应用程序的一般布局和 UI 组件，您可能需要查看https://element.eleme.io/#/en-US/component/layout，它是更流行的 Vuetify 的一个不错的替代品。

推荐阅读