Nuxt之默認模版和默認佈局

時間 2019-12-07

標籤 nuxt 默認模版佈局简体版

原文原文鏈接

在開發應用時，常常會用到一些公用的元素，好比網頁的標題是同樣的，每一個頁面都是如出一轍的標題，這個時候，nuxt爲咱們提供了兩種解決方法：默認模板，默認佈局
html

一. 默認模板

nuex的默認模板只須要在根目錄建立app.html就能夠了，若是咱們要在每一個頁面增長一段話：「Hello World」，咱們能夠這麼作：vue

/app.html:bash

<!DOCTYPE html>
<html lang="en">
  <head>
    {{HEAD}}
  </head>
  <body>
    <p>Hello World</p>
    {{APP}}
  </body>
</html>複製代碼

HEAD讀取的是：nuxt.config.js中的head裏面的內容；app

APP讀取的是：頁面主題內容jsp

注意：HEAD和APP必須大寫；佈局

另外，修改默認模板須要重啓服務才能生效post

和默認模板相似的功能還有默認佈局，可是從名字上你就能夠看出來，默認佈局主要針對於頁面的統一佈局使用。它在位置根目錄下的layouts/default.vue。須要注意的是在默認佈局裏不要加入頭部信息，只是關於<template>標籤下的內容統一訂製。
spa

<template>
  <div>
    <p>Hello World</p>
    <nuxt/>
  </div>
</template>複製代碼

這裏的<nuxt/>就至關於咱們每一個頁面的內容，你也能夠把一些通用樣式放入這個默認佈局裏，可是我的不建議這樣寫，會增長頁面的複雜程度。nuxt

總結：要區分默認模版和默認佈局的區別，模版能夠訂製不少頭部信息，包括IE版本的判斷；模版只能定製<template>裏的內容，跟佈局有關係。在工做中修改時要看狀況來編寫代碼。code

本文引用於技術胖nuxt教程，感謝胖哥

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。