[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页面
建立默认模板后,记得要重启服务器,不然显示不会成功;默认布局不用重启服务器
1.3、测试:
在开发应用时,经常会用到一些公用的元素,比如网页的标题是一样的,每个页面都是一模一样的标题。这时候我们有两种方法,第一种方法是作一个公用的组件出来,第二种方法是修改默认模版。这两种方法各有利弊,比如公用组件更加灵活,但是每次都需要自己手动引入;模版比较方便,但是只能每个页面都引入。