Nuxt.js学习笔记

定义：是一个基于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' }
  ]
}

3. 异步数据：

　　asyncData：设置组件的数据之前能异步获取或处理数据

　　asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。

　　在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用asyncData方法来获取数据。

　　由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过this来引用组件的实例对象。

　　具体使用后续再更新。。。。。。

4. 资源文件

　　默认情况下Nuxt使用vue-loader、file-loader以及url-loader这几个Webpack加载器来处理文件的加载和引用。

　　对于不需要通过Webpack处理的静态资源文件，可以放置在static目录中。

　　Nuxt 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下，像 robots.txt 或 sitemap.xml 这种类型的文件就很适合放到 static 目录中。

<!-- 引用 static 目录下的图片 -->
<img src="/my-image.png" />

<!-- 引用 assets 目录下经过 webpack 构建处理后的图片 -->
<img src="~/assets/my-image-2.png" />

　　assets里面的静态资源文件是需要走webpack的，webpack可以对资源进行压缩、改名、转换等等的操作。

　　static文件下面的静态资源文件就不会走webpack,资源文件保持原有的。

5.插件

　　Nuxt.js允许我们在运行vue.js应用程序之前执行js插件

　　需要注意的是，在任何Vue组件的生命周期内，只有beforeCreate和created这两个方法会在客户端和服务端被调用。

　　其他生命周期函数仅在客户端被调用。

　　1》使用第三方插件就不再多作说明

　　2》使用Vue插件

　　　　假如我们想使用 vue-notifications 显示应用的通知信息，我们需要在程序运行前配置好这个插件。

　　　　首先增加文件 plugins/vue-notifications.js：

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

　　　　然后，在 nuxt.config.js 内配置plugins 如下：

module.exports = {
  plugins: ['~/plugins/vue-notifications']
}

　　3》只在客户端使用的插件

　　不支持ssr的系统，插件只在浏览器里使用，这种情况下，你可以用 ssr:false ,使得插件只会在客户端运行

　　nuxt.config.js:

module.exports = {
  plugins: [{ src: '~/plugins/vue-notifications', ssr: false }]
}

<!-- 引用 static 目录下的图片 -->
<img src="/my-image.png" />

<!-- 引用 assets 目录下经过 webpack 构建处理后的图片 -->
<img src="~/assets/my-image-2.png" />

posted @ 2020-11-23 11:27 晚睡的猫阅读(351) 评论(1) 收藏举报

刷新页面返回顶部

Nuxt.js学习笔记

公告