Nuxt.js学习(五) --- Nuxt.js默认模板

最新推荐文章于 2024-06-18 09:40:42 发布

庭前云落

最新推荐文章于 2024-06-18 09:40:42 发布

阅读量865

点赞数

分类专栏：前端 --- Nuxt.JS 文章标签： vue java html js python

本文链接：https://blog.csdn.net/remsqks/article/details/108585971

版权

前端 --- Nuxt.JS 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

[TOC]

1、Nuxt.js的默认模板

1.1、官方文档:

定制化默认的 html 模板，只需要在应用根目录下创建一个 app.html 的文件。

默认模板为：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

举个例子，你可以修改模板添加 IE 的条件表达式：

<!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

1.2、实际操作(练习实例)

1.2.1、创建app.html

<!DOCTYPE html>
<html lang="en">
<head>
     {{HEAD}}
</head>
<body>
     <p>
         <a href="https://my.oschina.net/tingqianyunluo">庭前云落的博客</a>
     </p>
     {{APP}}
</body>
</html>

{{HEAD}}读取的是nuxt.config.js里的信息，{{APP}}就是我们写的pages文件夹下的index页面

建立默认模板后，记得要重启服务器，不然显示不会成功；默认布局不用重启服务器