nuxt.js

825 阅读1分钟

安装

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版本的判断;布局只能订制