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

【问题标题】：What is the Vue.js equivalent of Express-Handlebars sections?Express-Handlebars 部分的 Vue.js 等效项是什么？
【发布时间】：2019-11-30 19:33:42
【问题描述】：

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

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

<!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 中设置类似上面的东西，也可以用于服务器端渲染？我只需要一个包含页眉/页脚组件的基本布局，还需要页面特定内容可以进入的部分。

【问题讨论】：

标签： javascript node.js vue.js handlebars.js express-handlebars

【解决方案1】：

对于 SSR，您应该查看 Nuxt.js、Vapper 或其他 SSR Vue 框架之一。

也就是说，是的，你会为所有事情使用组件。通常，您的主布局有一个组件，然后每个视图有一个组件，然后每个部分/部分都有单独的组件，然后您将它们导入到您的视图和/或主布局中。所以，比如基于上面的代码：

您的主要应用布局：

// AppLayout.vue

<template>
  <div id="app-layout">
    <site-header />
    <router-view />
    <site-footer />
  </div>
</template>

<script>
import SiteHeader from './components/global/SiteHeader.vue'
import SiteFooter from './components/global/SiteFooter.vue'

export default {
  name: 'AppLayout',
  components: {
    SiteHeader,
    SiteFooter
  },
  meta: {
    // metatags and other head content can be modified using vue-meta or similar 
  }
}
</script>

“部分”组件示例：

// BaseContainer.vue

<template>
  <main id="base-container" role="main">
    <h1 class="title">{{ content.title }}</h1>
    <img :src="image" alt="" />
    <base-content v-html="content.body" />
  </main>
</template>

<script>
import BaseContent from './components/content/BaseContent.vue'

export default {
  name: 'BaseContainer',
  components: {
    BaseContent
  },
  props: {
    content: {
      type: Object,
      default() {
        return {}
      }
    },
    image: {
      type: String,
      default: ''
    }
  }
}
</script>

示例视图组件：

// MyView.vue

<template>
  <div id="my-view">
    <base-container :content="content" :image="image" />
  </div>
</template>

<script>
import BaseContainer from './components/BaseContainer.vue'
import content from './data/myContent.json'
import image from './assets/myImage.jpg'

export default {
  name: 'MyView',
  components: {
    BaseContainer
  },
  data() {
    return {
      content,
      image
    }
  }
}
</script>

然后，您将使用vue-router 指定根据当前 URL 加载哪个视图组件。

【讨论】：

我想传入一个完整的页面，而不仅仅是像“这是我的正文副本”这样的字符串——这可能吗？
你是什么意思？我给出的示例只是一个字符串，但它可以是整个对象，也可以是 HTML 内容或文件或您想要传递并显示在组件中的任何其他内容。
你能给我一个加载文件而不是字符串'This is body copy'的代码示例

【解决方案2】：

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

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

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

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

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

【讨论】：

但这并没有涉及 SSR。而且您也不能在页面的<head> 部分中使用组件。这是一个一半的答案。真正的问题是问题太宽泛了。
是的，tbh 还没有处理 Vue 中的 SSR，我正在将自己过渡到 Vue，但从 ExtJs bg 过渡。