21970
20310 
我使用Express和Handlebars开始了一个项目，然后被鼓励查看Vue.js。我仍处于阅读文档的阶段，但到目前为止，尚不了解如何在Vue.js中使用布局，局部和部分。我认为局部将是一个组件，但是我迷失了如何在局部中放置可将内容注入的局部和部分的布局。
这是我在名为baselayout.hbs的文件中使用npm express-handlebars进行的操作：
<！doctype html>

<头>
{{> global / headcode}} <！-带有head标签代码的局部视图。它有类似收藏夹链接的东西--->
{{{__sections.pagemeta}}} <！-在此插入页面特定的元数据。这将是页面/视图的元关键字描述等--->

<身体>


{{> global / siteheader}} <！---网站标题的部分视图--->




{{{body}}} <！-页面的主体内容在这里--->



{{> sitefooter}}
{{{__sections.pagescripts}}} <！-此处注入了特定于页面的脚本的部分--->


如何在Vue.js中设置类似上述内容的内容，使其也可以与服务器端渲染一起使用？我只需要一个包含页眉/页脚组件的基本布局，还需要一些页面特定内容可以进入的部分。
2021-03-04 08:10:19 
对于SSR，您应该查看Nuxt.js，Vapper或其他SSR Vue框架之一。
就是说，是的，您将为所有组件使用组件。通常，您将为主布局提供一个组件，然后为每个视图提供一个组件，然后为每个局部/部分提供单独的组件，然后将其导入视图和/或主布局。因此，例如，基于上面的代码：
您的主要应用布局：
// AppLayout.vue
<模板>







<脚本>
从'./components/global/SiteHeader.vue'导入SiteHeader
从'./components/global/SiteFooter.vue'导入SiteFooter
导出默认值{
名称：“ AppLayout”，
成分： {
SiteHeader，
SiteFooter
}，
中继：{
//可以使用vue-meta或类似方法修改元标记和其他头部内容
}
}

示例“部分”组件：
// BaseContainer.vue
<模板>



 {{content.title}} 




<脚本>
从'./components/content/BaseContent.vue'导入BaseContent
导出默认值{
名称：“ BaseContainer”，
成分： {
基本内容
}，
道具： {
内容： {
类型：对象，
默认（） {
返回 {}
}
}，
图像： {
类型：字符串，
默认： ''
}
}
}

示例视图组件：
// MyView.vue
<模板>





<脚本>
从'./components/BaseContainer.vue'导入BaseContainer
从'./data/myContent.json'导入内容
从'./assets/myImage.jpg'导入图像
导出默认值{
名称：“ MyView”，
成分： {
BaseContainer
}，
数据（） {
返回 {
内容，
图像
}
}
}

然后，您将使用vue-router根据当前URL指定要加载的视图组件。
3
|
您可能需要使用组件和组件中的插槽。
是的，您需要为每个零件创建一个组件。每个组件都有一个模板。
然后，您将拥有一个主要组件，将所有这些组件放在一起。使用您已经拥有的更精细的组件（您的局部组件）。
现在，如果模板结构（每个组件的html）来自服务器，则可以使用插槽https://vuejs.org/v2/guide/components-slots.html，这是VueJ允许组件接收自定义标记的一种方式实例化组件时（请参阅文档中的示例）
对于应用程序的常规布局和UI组件，您可能需要查看https://element.eleme.io/#/en-US/component/layout，它是较流行的Vuetify的不错替代品。
2个
|
你的答案
StackExchange.ifUsing（“ editor”，function（）{
StackExchange.using（“ externalEditor”，function（）{
StackExchange.using（“ snippets”，function（）{
StackExchange.snippets.init（）;
}）;
}）;
}，“代码段”）；
StackExchange.ready（function（）{
var channelOptions = {
标签：“” .split（“”），
id：“ 1”
};
initTagRenderer（“”。split（“”），“” .split（“”），channelOptions）;
StackExchange.using（“ externalEditor”，function（）{
//如果启用了摘要，则必须在摘要后触发编辑器
如果（StackExchange.settings.snippets.snippetsEnabled）{
StackExchange.using（“ snippets”，function（）{
createEditor（）;
}）;
}
别的 {
createEditor（）;
}
}）;
函数createEditor（）{
StackExchange.prepareEditor（{
useStacksEditor：否，
heartbeatType：“答案”，
autoActivateHeartbeat：否，
convertImagesToLinks：是，
noModals：是的，
showLowRepImageUploadWarning：是的，
声望：ToPostImages：10，
bindNavPrevention：是的，
后缀：“”，
imageUploader：{
brandingHtml：“采用\ u003ca href = \“ https：//imgur.com/ \” \ u003e \ u003csvg class = \“ svg-icon \” width = \“ 50 \” height = \“ 18 \” viewBox = \“ 0 0 50 18 \” fill = \“ none \” xmlns = \“ http：//www.w3.org/2000/svg \” \ u003e \ u003cpath d = \“ M46.1709 9.17788C46.1709 8.26454 46.2665 7.94324 47.1084 7.58816C47.4091 7.46349 47.7169 7.36433 48.0099 7.26993C48.9099 6.97997 49.672 6.73443 49.672 5.93063C49.672 5.22043 48.9832 4.61182 48.1414 4.61182C47.4335 4.61182 46.7256 4.91628 46.0943 5.50789C45.74.5 4.313.6662 4.313.6662 43.1481 6.59048V11.9512C43.1481 13.2535 43.6264 13.8962 44.6595 13.8962C45.6924 13.8962 46.1709 13.2535 46.1709 11.9512V9.17788Z \“ / \ u003e \ u003cpath d = \” M32.492 10.1419C32.492 12.6954 34.1182 14.048437.04.0 14.0484 41.5985 12.6954 41.5985 10.1419V6.59049C41.5985 5.28821 41.1394 4.66232 40.1061 4.66232C39.0732 4.66232 38.5948 5.28821 38.5948 6.59049V9.60062C38.5948 10.8521 38.2696 11.5455 37.0451 11.5455C35.8209 11.5455 35.4954 10.8 521 35.4954 9.60062V6.59049C35.4954 5.28821 35.0173 4.66232 34.0034 4.66232C32.9703 4.66232 32.492 5.28821 32.492 6.59049V10.1419Z \“ / \ u003e \ u003cpath fill-rule = \” evenodd \“ clip-rule = \” evenodd \“ d = \“ M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.45024.66231C28.9913 4.66231 28.4555 4.94978 28.1109 5.50789C27.499 4.86533 26.7335 4.56087 25.7005 4.56087C23.1369 4.56087 21.0134 6.57349 21.0134 9.27932C21.0134 11.9852 23.003 13.913 25.3754 13.913C26.5612 13.913 27.4607 13.4902 28.1109 16.616C28.1169 .1256 12.8854 28.1301 12.9342 28.1301 12.983C28.1301 14.4373 27.2502 15.2321 25.777 15.2321C24.8349 15.2321 24.1352 14.9821 23.5661 14.7787C23.176 14.6393 22.8472 14.5218 22.5437 14.5218C21.7977 14.5218 21.2429 15.0123 21.2429 22.5.67374.123 9.27932C24.1317 7.94324 24.9928 7.09766 26.1024 7.09766C27.2119 7.09766 28.0918 7.94324 28.0918 9.27932C28.0918 10.6321 27.2311 11.5116 26.1024 11.5116C24.9737 11.5116 24.1317 10.6491 24.1317 9.4.132Z \“ / \ u003e \ u003c路径16.11 .8045 13.2535 17.2637 13.8962 18.2965 13.8962C19.3298 13.8962 19.8079 13.2535 19.8079 11.9512V8.12928C19.8079 5.82936 18.4879 4.62866 16.4027 4.62866C15.1594 4.62866 14.279 4.98375 13.3609 5.88013C12.653 5.05154 11.6581 4.62866 10.3573 4.62866C9.34336 4.62866 8.57809 4.89931 7.9466 5.5079C7.58314 4.9328 7.10506 4.66232 6.51203 4.66232C5.47873 4.66232 5.00066 5.28821 5.00066 6.59049V11.9512C5.002.6 13.6962 6.9623.76.8962 13.2535 8.0232 11.9512V8.90741C8.0232 7.58817 8.44431 6.91179 9.53458 6.91179C10.5104 6.91179 10.893 7.58817 10.893 8.94108V11.9512C10.893 13.2535 11.3711 13.8962 12.4044 13.8962C13.4375 13.8962 13.9157 13.2535 13.9157 11.9512V8.90741911 3.911 .4027 6.91179 16.8045 7.58817 16.8045 8.94108V11.9512Z \“ / \ u003e \ u003cpath d = \” M3.31675 6.59049C3.31675 5.28821 2.83866 4.66232 1.82471 4.66232C0.791758 4.66232 0.313354 5.28821 0.313354 6.59049V11.9512C0.313354 13.2535 13.8962C2.85798 13.8962 3.31675 13.2535 3.31675 11.9512V6.59049Z \“ / \ u003e \ u003cpath d = \” M1.87209 0.400291C0.843612 0.400291 0 1.1159 0 1.98861C0 2.87869 0.822846 3.57676 1.87209 3 .57676C2.90056 3.57676 3.7234 2.87869 3.7234 1.98861C3.7234 1.1159 2.90056 0.400291 1.87209 0.400291Z \“ fill = \”＃1BB76E \“ / \ u003e \ u003c / svg \ u003e \ u003c / a \ u003e”，
contentPolicyHtml：“根据\ u003ca href = \“ https：//stackoverflow.com/help/licensing \” \ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \“ https://stackoverflow.com获得许可的用户贡献/ legal / content-policy \“ \ u003e（内容策略）\ u003c / a \ u003e”，
allowUrls：是
}，
onDemand：是的，
dispatchSelector：“。discard-answer”
，立即ShowMarkdownHelp：true，enableTables：true，enableSnippets：true
}）;
}
}）;
感谢您为Stack Overflow提供答案！
请务必回答问题。提供详细信息并分享您的研究！
但是要避免...
寻求帮助，澄清或回答其他答案。
根据意见发表声明；用参考或个人经验来备份它们。
要了解更多信息，请参阅我们撰写出色答案的提示。
草稿已保存
草稿丢弃
注册或登录
StackExchange.ready（function（）{
StackExchange.helpers.onClickDraftSave（'＃login-link'）;
}）;
使用Google注册
使用Facebook注册
使用电子邮件和密码注册
提交
以访客身份发布
姓名
电子邮件
必需，但从未显示
StackExchange.ready（
功能 （） {
StackExchange.openid.initPostLogin（'。new-post-login'，'https％3a％2f％2fstackoverflow.com％2fquestions％2f59119547％2fw-is-the-vue-js等效的表情车把节％ 23new-answer”，“ question_page”）；
}
）;
以访客身份发布
姓名
电子邮件
必需，但从未显示
发表您的答案
丢弃
点击“发布答案”，即表示您同意我们的服务条款，隐私政策和Cookie政策
不是您要找的答案？浏览标记为javascript node.js vue.js handlebars.js express-handlebars的其他问题，或提出您自己的问题。