nuxt项目小注意点归纳

今天打算重新从头学习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>

。

nuxt项目小注意点归纳

猜你喜欢