安装
Nuxt.js 官方提供了一个模板,可以使用 vue-cli 直接安装。
$ vue init nuxt-community/starter-template <project-name>
默认模板
Nuxt为我们提供了超简单的默认模板定制方法,只要在根目录下创建一个app.html就可以实现了。现在我们希望每个页面的最上边都加入”Hello Nuxt”这几个字,我们就可以使用默认模板来完成。
<!DOCTYPE html>
<html lang="en">
<head>
{{HEAD}}
</head>
<body>
<p>Hello Nuxt</p>
{{APP}}
</body>
</html>
这里的{{HEAD}}读取的是nuxt.config.js里的信息,{{APP}}就是我们写的pages文件夹下的主体页面了。需要注意的是HEAD和APP都需要大写。
*这里还有一个小坑需要注意,就是如果你建立了默认模板后,记得要重启服务器。 但是默认布局不用重启服务器。
默认布局
页面都需要有一个布局,默认为layouts/default.vue。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的 标签中。
总结:要区分默认模板和默认布局的区别,模板可以订制头部信息,包括IE版本的判断;布局只能订制