Nuxt.js学习笔记

2024-01-28 17:29:34

定义：是一个基于Vue.js的通用应用框架，注重于UI的渲染。

1. 路由：路由无需配置，nuxt会根据pages目录下面的 .vue 文件自动生成路由信息

　　1》页面之间跳转使用路由，使用<nuxt-link> 标签。如下所示：

<template>
  <nuxt-link to="/">首页</nuxt-link>
</template>

　　2》基本路由结构如下：

　　　　3》动态路由结构如下：

　　　名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。

　　　如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件。

　　在 pages/users/_id.vue 组件里面需要对路由参数进行基本的校验：校验如下：

export default {
  validate({ params }) {
    // 必须是number类型
    return /^\d+$/.test(params.id)
  }
}

　　如果校验失败，将自动加载显示404错误页面或500错误页面

2. 视图：

　　1》模板：相当于vue项目的public/index.html文件，定制化默认的 html 模板，只需要在 src 文件夹下（默认是应用根目录）创建一个 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>

　　2》布局：layouts:

　　　　《1》默认布局：可通过添加 layouts/default.vue 文件来扩展应用的默认布局。默认布局代码如下：

<template>
　　<div>
  　　<nuxt />
　　</div>
</template>

　　　　《2》自定义布局：

　　　　　　假设我们要创建一个 博客布局 并将其保存到layouts/blog.vue:

<template>
  <div>
    <div>我的博客导航栏在这里</div>
    <nuxt />
  </div>　　
</template>

　　然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局：

<template>
  <!-- Your template -->
</template>
<script>
  export default {
    layout: 'blog'
    // page component definitions
  }
</script>

　　3》错误页面：

　　你可以通过编辑 layouts/error.vue 文件来定制化错误页面.

<template>
  <div class="container">
    <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>

　　4》HTML头部：

　　Nuxt.js 使用了 vue-meta 更新应用的 头部标签(Head) and html 属性。

　　Nuxt.js 使用以下参数配置 vue-meta如下：

{
  keyName: 'head', // 设置 meta 信息的组件对象的字段，vue-meta 会根据这 key 值获取 meta 信息
  attribute: 'n-head', // vue-meta 在监听标签时所添加的属性名
  ssrAttribute: 'n-head-ssr', // 让 vue-meta 获知 meta 信息已完成服务端渲染的属性名
  tagIDKeyName: 'hid' // 让 vue-meta 用来决定是否覆盖还是追加 tag 的属性名
}

　　5》默认 Meta 标签

　　Nuxt.js 允许你在 nuxt.config.js 里定义应用所需的所有默认 meta 标签，在 head 字段里配置就可以了：

head: {
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  ],
  link: [
    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
  ]
}

码农公寓

相关文章