nuxt.js1-6
Nuxt的默認模版和默認佈局
在開發應用時，常常會用到一些公用的元素，好比網頁的標題是同樣的，每一個頁面都是如出一轍的標題。這時候咱們有兩種方法，第一種方法是做一個公用的組件出來，第二種方法是修改默認模版。這兩種方法各有利弊，好比公用組件更加靈活，可是每次都須要本身手動引入；模版比較方便，可是隻能每一個頁面都引入。這節課咱們就學習一下如何使用Nuxt的默認模版和默認佈局功能。html
默認模板
Nuxt爲咱們提供了超簡單的默認模版訂製方法，只要在根目錄下建立一個app.html就能夠實現了。如今咱們但願每一個頁面的最上邊都加入「JSPang.com 技術胖的博客」 這幾個字，咱們就可使用默認模版來完成。vue
<!DOCTYPE html> <html lang="en"> <head> {{ HEAD }} </head> <body> <p>jspang.com 技術胖的博客</p> {{ APP }} </body> </html>
這裏的{{ HEAD }}讀取的是nuxt.config.js裏的信息，{{APP}} 就是咱們寫的pages文件夾下的主體頁面了。須要注意的是HEAD和APP都須要大寫，若是小寫會報錯的。服務器
這裏還有一個小坑須要你們注意，就是若是你創建了默認模板後，記得要重啓服務器，不然你的顯示不會成功；可是默認佈局是不用重啓服務器的。app
默認佈局
和默認模板相似的功能還有默認佈局，可是從名字上你就能夠看出來，默認佈局主要針對於頁面的統一佈局使用。它在位置根目錄下的layouts/default.vue。須要注意的是在默認佈局裏不要加入頭部信息，只是關於<template>標籤下的內容統一訂製。jsp
仍是上邊的需求，咱們在每一個頁面的最頂部放入「JSPang.com 技術胖的博客」 這幾個字，看一下在默認佈局裏的實現。佈局
<template>
<div>
<p>JSPang.com 技術胖的博客</p>
<nuxt/>
</div>
</template>
這裏的<nuxt/>就至關於咱們每一個頁面的內容，你也能夠把一些通用樣式放入這個默認佈局裏，可是我的不建議這樣寫，會增長頁面的複雜程度。學習
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
