今天打算重新从头学习nuxt，根据文档来总结一下需要注意的小知识点：
1、
请注意: 从Nuxt 2.0开始，~/alias将无法在CSS文件中正确解析。你必须在url CSS引用中使用~assets（没有斜杠）或@别名，即background:url("~assets/banner.svg")
2、
组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
3、
布局目录 layouts 用于组织应用的布局组件。
若无额外配置，该目录不能被重命名。
4、
你可以定制化 Nuxt.js 默认的应用模板。
定制化默认的 html 模板，只需要在src文件夹下（默认是应用根目录）创建一个 app.html 的文件。
默认模板为：
默认模板为： <!DOCTYPE html> <html {{ HTML_ATTRS }}> <head {{ HEAD_ATTRS }}> {{ HEAD }} </head> <body {{ BODY_ATTRS }}> {{ APP }} </body> </html>
根据文档说明，我们可以在项目根目录下创建一个app.html来自定义模板
5、
Nuxt.js 允许你扩展默认的布局，或在 layout 目录下创建自定义的布局。
layouts 目录中的每个文件 (顶级) 都将创建一个可通过页面组件中的 layout 属性访问的自定义布局。
假设我们要创建一个 博客布局 并将其保存到layouts/blog.vue:
<template> <div> <div>我的博客导航栏在这里</div> <nuxt/> </div> </template>
然后我们必须告诉页面 (即pages/blog.vue) 使用您的自定义布局：
<template> <div> 我是博客页面 </div> </template> <script> export default { layout:"blog" } </script>
6、
你可以通过编辑 layouts/error.vue 文件来定制化错误页面.
警告: 虽然此文件放在 layouts 文件夹中, 但应该将它看作是一个 页面(page).
这个布局文件不需要包含 <nuxt/> 标签。你可以把这个布局文件当成是显示应用错误（404，500等）的组件。
举一个个性化错误页面的例子 layouts/error.vue:(补充一下，最好不要把它当404页面使用)
<template> <div> <h1 v-if="error.statusCode === 404">页面不存在</h1> <h1 v-else>应用发生错误异常</h1> <nuxt-link to="/">首 页</nuxt-link> </div> </template> <script> export default { props: [‘error‘], layout: ‘blog‘ // 你可以为错误页面指定自定义的布局 } </script>
。
原文：https://www.cnblogs.com/fqh123/p/12818235.html