19321
11782 
我使用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:28 
對於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的其他問題，或提出您自己的問題。