nuxt自定義布局頁(yè)
在根目錄下創(chuàng)建layouts（文件名必須是layouts）文件夾，在layouts文件夾下新建defult.vue文件（默認(rèn)自定義布局頁(yè)的模板）泄隔。default文件里要寫一個(gè)<slot />,插槽就是用來(lái)放自定義的組件的。
接下來(lái)去寫自定義的組件耙旦。在pages目錄下新建一個(gè)vue文件（jsls.vue），自定義的內(nèi)容需要用NuxtLayout標(biāo)簽包裹纵柿。
運(yùn)行后的頁(yè)面內(nèi)容如下圖
每一個(gè)插槽可以放一個(gè)組件也就是一個(gè)頁(yè)面序矩，在自定義模板中可以放置多個(gè)組件鸯绿，也就是可以寫多個(gè)slot，只要給每一個(gè)slot取上名字就可實(shí)現(xiàn)在頁(yè)面內(nèi)展示多個(gè)組件簸淀。
自定義內(nèi)容需要用template標(biāo)簽包裹并給一個(gè)#后面帶上插槽的名字楞慈。
運(yùn)行后的頁(yè)面效果如下圖
組件編寫
nuxt3的組件必須寫在components文件夾下面。
首先在根目錄下新建components文件夾啃擦，在components文件夾里新建文件，例如頭部組件饿悬。新建Header.vue文件令蛉。
在index.vue文件里引入這個(gè)組件。
運(yùn)行后的頁(yè)面效果如下圖狡恬。（有可能會(huì)報(bào)錯(cuò)珠叔，可以在終端內(nèi)重新跑一下項(xiàng)目）
也可以在布局模板里面使用組件，使用的方法和上面的方法一樣弟劲。在defult.vue文件里面引用Header組件祷安。
運(yùn)行后的頁(yè)面效果。
多層級(jí)組件
創(chuàng)建多層級(jí)組件兔乞。在components目錄下創(chuàng)建一個(gè)test文件夾汇鞭，test文件夾內(nèi)創(chuàng)建自定義組件文件，例如按鈕庸追。
在test目錄下新建MyButton文件
多層級(jí)組件在頁(yè)面內(nèi)的引用與上面的組件引用方法一致霍骄，不過(guò)多層級(jí)組件在引用時(shí)需要加上文件名。
運(yùn)行后的頁(yè)面效果如下圖
組件懶加載
頁(yè)面有很多內(nèi)容淡溯，需要過(guò)一段時(shí)間再顯示或者組件有時(shí)候顯示有時(shí)候不顯示的時(shí)候就可以使用組件懶加載读整。
在components目錄下新建LazyLoad.vue文件。
組件懶加載可以和v-if一起使用咱娶。
