我使用 Express 和 Handlebars 启动了一个项目，然后有人鼓励我查看 Vue.js。我仍处于阅读文档的阶段，但到目前为止无法理解如何在 Vue.js 中拥有布局、部分和部分。我认为部分将是一个组件，但我不知道如何拥有一个包含部分和部分的布局，我可以将内容注入(inject)其中。
这就是我在名为 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 中设置类似上面的东西，并且也可以与服务器端渲染一起使用？我只需要一个包含页眉/页脚组件的基本布局，还需要包含特定于页面的内容的部分。
最佳答案
对于 SSR，您应该查看 Nuxt.js、Vapper 或其他 SSR Vue 框架之一。
也就是说，是的，您将使用组件来完成所有事情。一般来说，您的主布局将有一个组件，然后每个 View 都有一个组件，然后每个部分/部分都有单独的组件，然后将其导入到 View 和/或主布局中。因此，例如，基于上面的代码:
您的主要应用布局:
// 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>
示例 View 组件:
// 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 指定要加载的 View 组件。
关于javascript - Vue.js 中 Express-Handlebars 部分的等价物是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59119547/