Express-Handlebars 部分的 Vue.js 等价物是什么？

Question

我开始了一个使用 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 中设置类似上面的东西，它也适用于服务器端渲染？我只需要一个包含 header/footer 组件的基本布局，还需要包含页面特定内容的部分。

Answer 1

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

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

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

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

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

Answer 2

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

就是说，是的，您会为一切使用组件。通常，您的主布局会有一个组件，然后每个视图都有一个组件，然后每个 partial/section 都有单独的组件，然后您将导入到视图 and/or 主布局中。所以，例如，基于上面的代码：

您的主要应用布局：

// 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>

示例 'partial' 组件：

// 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 加载哪个视图组件。

Express-Handlebars 部分的 Vue.js 等价物是什么？

What is the Vue.js equivalent of Express-Handlebars sections?

javascript

node.js

vue.js

handlebars.js

express-handlebars