我使用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中设置类似上面的内容，使其也可以与服务器端渲染一起使用？我只需要一个包含页眉/页脚组件的基本布局，还需要特定页面内容可以进入的部分。
您可能需要使用组件和组件中的插槽。
是的，您需要为每个零件创建一个组件。每个组件都有一个模板。
然后，您将拥有一个将所有这些都放在一起的主要组件。使用您已经拥有的更细粒度的组件（您的局部组件）。
现在，如果模板结构（每个组件的html）来自服务器，则可以使用slots https://vuejs.org/v2/guide/components-slots.html，这是VueJ在实例化组件时允许组件接收自定义标记的方式（请参见示例在文档中）
对于您应用的总体布局和UI组件，您可能需要查看https://element.eleme.io/#/en-US/component/layout，它是较流行的Vuetify的不错的选择。
对于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">
<base-content :body="content.body" />
</main>
</template>
<script>
import BaseContent from './components/content/BaseContent.vue'
export default {
name: 'BaseContainer',
components: {
BaseContent
},
props: {
content: {
type: Object,
default() {
return {}
}
}
}
}
</script>
示例视图组件：
// MyView.vue
<template>
<div id="my-view">
<base-container :content="content" />
</div>
</template>
<script>
import BaseContainer from './components/BaseContainer.vue'
export default {
name: 'MyView',
components: {
BaseContainer
},
data() {
return {
content: {
body: 'This is body copy'
}
}
}
}
</script>
然后您将使用vue-router根据当前URL指定要加载的视图组件。