iT 邦幫忙 | nuxt layout
經過了十天,稍微回顧一下,目前的進度:我們現在有一個Nuxt2.0應用,UIframework是使用Vuetify,並透過storybook協助UI元件的開發。以及,使用pug作為模板引擎,使用stylus作為css預處理器,使用plop,方便快速建立新元件的目錄結構與預設內容。到目前為止還沒有真正開始開發blog所需要的程式碼。從今天的第11篇開始來介紹一下,layout簡介layout是一個page的最外層,通常可以包涵header,footer,aside這些幾乎每個頁面都相同的東西,不必在每個pagecomponent中,再引入重複的東西,讓開發可以專注在頁面的內容,不會受到其他無關的東...
經過了十天,稍微回顧一下,目前的進度:
我們現在有一個 Nuxt 2.0 應用,UI framework 是使用 Vuetify,並透過 storybook 協助 UI 元件的開發。
以及,使用 pug 作為模板引擎,使用 stylus 作為 css 預處理器,使用 plop,方便快速建立新元件的目錄結構與預設內容。
到目前為止還沒有真正開始開發 blog 所需要的程式碼。
從今天的第 11 篇開始來介紹一下,
layout 簡介layout 是一個 page 的最外層,通常可以包涵 header, footer, aside 這些幾乎每個頁面都相同的東西,不必在每個 page component 中,再引入重複的東西,讓開發可以專注在頁面的內容,不會受到其他無關的東西影響,覺得 Nuxt 的作者實在是太神啦,乾乾淨淨的 code splitting,許多理所當然的東西,背後藏著前人的智慧呢!另外可以根據不同 page 分別指定不同 layout。
開發 layouts這個 blog 會用到的兩個 layout[1],
default: 預設 blog 基礎樣板 (含有簡易 RWD) admin: 編輯文章模式 (含有簡易 RWD) error: 錯誤頁 (跟 layout 無關)咦?
啊不是說兩個 layout 嗎?這裡怎麼有三個?
errorerror.vue 是一個特別的存在,可以在這個 layout 透過 props: error 處理 error.statusCode (404, 500 等等)然而 error 這個 layout 也是可以選擇 layout 的,error.vue 會填補其他 layout 中的 <nuxt/> 的空缺,因此 error.vue 本身不需要使用 <nuxt/>看到最後就會明白了,請接著往下看吧!
因為要在 30 天內完成整個 blog,沒辦法所有程式碼逐一解釋,切版的部分會盡量跳過,讓文章內容能多專注在功能與流程的完整介紹。以下...