有關(guān)如何使用頁(yè)眉、頁(yè)腳和內(nèi)容部分創(chuàng)建基本布局組件的指南。
布局組件
組件是應(yīng)用程序 UI 的可重用獨(dú)立部分。布局組件是用于在多個(gè)頁(yè)面之間共享公共部分的組件。布局組件大多具有通用頁(yè)眉、側(cè)邊欄和頁(yè)腳部分。
1. 創(chuàng)建應(yīng)用
2. 文件夾結(jié)構(gòu)
3. 創(chuàng)建標(biāo)頭組件
4. 創(chuàng)建頁(yè)腳組件
5. 創(chuàng)建布局組件
6. 將布局添加到根組件
1. 創(chuàng)建應(yīng)用
使用create-vue
如果您不確定某個(gè)選項(xiàng),只需立即按回車鍵進(jìn)行選擇即可。創(chuàng)建項(xiàng)目后,請(qǐng)按照說(shuō)明安裝依賴項(xiàng)并啟動(dòng)開發(fā)服務(wù)器:No
2. 文件夾結(jié)構(gòu)
在組件文件夾內(nèi)創(chuàng)建布局文件夾。此外,創(chuàng)建頁(yè)眉和頁(yè)腳組件。
3. 創(chuàng)建標(biāo)頭組件
使用以下代碼創(chuàng)建頁(yè)眉和頁(yè)腳組件
src/components/Layout/Header/Header.vue
4. 創(chuàng)建頁(yè)腳組件
src/components/Layout/Footer/footer.vue
5. 創(chuàng)建布局組件
現(xiàn)在我們要?jiǎng)?chuàng)建我們的組件。將頁(yè)眉和頁(yè)腳組件導(dǎo)入到布局組件中。用于顯示組件的內(nèi)容。Layout
src/components/Layout/Layout.vue
6. 將布局添加到根組件
App 組件是我們應(yīng)用程序的根組件。將布局添加到根組件。
src/App.vue
輸出
堆棧閃電戰(zhàn)應(yīng)用
我們成功地創(chuàng)建了自己的布局組件。這是一個(gè)基本的 Vue 布局組件,希望它能幫助你理解基本的布局流程。