1 使用组件

1.1 功能组件

我们一般会把网站中的每个小的功能模块制作成一个组件，比如，翻页组件、导航条组件等。每个

组件就是一个 .vue 文件，都保存在 components 目录中。

比如：导航组件：

1.2 使用组件

使用这些功能组件的流程是：

1. 使用 import 引入组件

2. 注册组件

3. 模板中使用

比如：

作业：实现组件，同时实现组件的样式

2 代码执行的时机

2.1 服务器端执行的代码

Nuxt 是一个SSR(服务器端渲染)的框架，那么什么叫服务器端渲染？

就是 代码是在服务端 执行的，浏览器中看到的结果，是代码在服务端执行完之后的代码。

前端项目客户端渲染：浏览器解析js代码

前端项目服务器端渲染：node服务器解析js代码，if、for都在服务器执行解析完成，发HTML页面

给客户端

2.1.1 页面中已经包含了数据

由于代码是在服务器端执行的，所以客户端看到的页面中已经存在数据了，这样有利于SEO。比

如，我们创建一个 pages/test.vue 的页面：

浏览页面，并查看页面的源代码，会发现数据已经在页面中了(原来使用vue时页面中是没有数据

的！)：

2.1.2 不能执行客户端代码

当使用客户端特有的代码时会报错，比如：alert、localStorage、window、location、document

等只有浏览器才有的。比如，以下代码在运行时会报错：localStorage is no defined

2.2 客户端运行的代码

Nuxt中的代码也并不都是运行在服务器端，有一部分函数中的代码是在客户端执行的。

2.2.1 客户端触发的函数

由客户端触发的函数，比如，页面中有一个按钮，在点击时触发一个函数，这个函数中的代码就是

在客户端执行的，因为只有在客户端才能被点击，所以在这个函数中使用 alert 就正常。

2.2.2 生命周期钩子函数

8个生命周期函数

创建前beforeCreated ：执行两次，服务端和客户端都会执行一次

创建后created ：执行两次,服务端和客户端都会执行一次

挂载前

挂载后

更新前

更新后

销毁前

销毁后

Vue 中有8个生命周期钩子函数，其中除了 beforeCreated 和 created 2个之外，其它的6个基

本都是在客户端执行的。beforeCreated 和 created 这两个钩子函数会在服务器和客户端分别被执行一次。

以前我们获取页面初始数据时都是写在 created 函数中的，但是因为created 会在服务器和客户端

分别被执行一次(共执行两次)，所以我们现在一般使用 mounted(挂载前) 来初始化页面数据。

export default {

data:function(){

return {

carts:[]

}

},

// 获取初始数据

mounted:function(){

axios.get('/carts').then((res)=>{

this.carts = res.data.data

})

}

}

3 使用axios--方式一

3.1 下载 axios

npm install --save axios

3.2 配置文件中设置引入一次

有一个值得注意的问题是，如果我们在另外一个页面内也引用了 axios ，那么在应用打包发布的

时候 axios 会被打包两次，而实际上我们只需要打包一次。这个问题可以通过在 nuxt.config.js 里

的配置 build.vendor 来解决：

module.exports = {

build: {

vendor: ['axios']

}

}

3.3 引入axios

在需要使用 axios 时需要使用 import 指令引入即可：

import axios from 'axios'

3.4 执行 A JAX 请求数据

4 使用axios--方式二

第一步：安装axios--与nuxt插件的 方式安装axios

npm install @nuxtjs/axios

第二步：配置axios

第三步、使用axios

5 异步数据(有利于SEO)(*)

5.1 什么是异步数据？

使用 A JAX 获取的数据都属于异步数据，这种数据默认是无法直接写在页面中的，也就是说在页面的源代码中是看不到 A JAX 的数据的(在网页源代码中并没有)。

A JAX获取的数据并不利于SEO，所以为了解决这个问题，Nuxt中提供了一个 asyncData ，可以让我们在服务器端获取 A JAX 的数据，返回给客户端一个已经拥有A JAX数据的页面。

5.2 asyncData

我们在 页面组件 中可以定义一个 asyncData 函数，这个函数中最终 return 的数据会直接写入到

页面中，这些数据可以是A JAX获取的：

总结：

1. 用来做SEO

2. 用来静态化

3. 如果要在异步数据中接收 URL参数，需要在函数上添加一个参数

说明：

1. params 中保存的是路由参数。

2. asyncData 方法返回的数据会和 data 方法返回的数据后合并起来给模板使用