源码时代前端干货分享|Nuxt开发使用文档

一、Nuxt概述

Nuxt官方理解是Vue的通用框架，它的作用主要是用来作SSR（服务器端渲染）。而Vue是开发SPA（单页应用）的js框架。Nuxt采用Vue开发多页应用，并在服务端完成渲染，可以直接用npm run generate命令将制作的vue项目生成为静态html

服务器渲染SSR的好处

SSR渲染的页面主要方便SEO进行搜索优化，比如：新闻 博客 电影等网站，就需要大量的进行搜索提供流量查询，这些网站就需要使用SSR进行优化处理，当然并不是所有网站都需要用到SSR，这个就需要看每个公司的产品的用处了

服务器渲染流程

图片11.png

客户端发送url请求到服务器端，服务器端根据接收到的url信息在服务器端完成html+data页面的渲染， 然后将组装成的页面返回给客户端

Nuxt描述

Nuxt中就包含了 Vue开发服务端渲染的应用所需要的各种配置。

在node环境中使用命令nuxt generate 就可以将基于 Vue的应用提供生成对应的静态站点的功能。

Nuxt提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等

Nuxt特性

基于 Vue.js

自动代码分层

服务端渲染

强大的路由功能，支持异步数据

静态文件服务

ES2015+ 语法支持

打包和压缩 JS 和 CSS

HTML 头部标签管理

本地开发支持热加载

集成 ESLint

支持各种样式预处理器： SASS、LESS、 Stylus 等等

支持 HTTP/2 推送

二、Nuxt项目搭建

方式一：运用Nuxt手脚架(create-nuxt-app)安装

1. 确保安装了npx(npx在npm5.0以上自动安装)后，运行命令

图片12.png

2. 项目选项

![图片13.png](https://img.haomeiwen.com/i13211021/1d87e3caa6f3e2b8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

3. 进入项目

![图片14.png](https://img.haomeiwen.com/i13211021/701d48a6655730bf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

4. 启动项目

   图片15.png

5. 在浏览器中访问：<u>http://localhost:3000</u>或者 <u>http://127.0.0.1:3000</u>

    ![图片16.png](https://img.haomeiwen.com/i13211021/13fb80671f556e84.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
   

方式二：使用Vue安装Nuxt项目

1. 在全局安装Vue手脚架

图片17.png

使用vue -V测试是否安装成功

2. 在指定的位置创建项目文件名

图片18.png

3. Vue命令初始化Nuxt项目

图片19.png

4. 创建项目名

图片20.png

5. 进入项目，安装依赖

图片21.png

6. 启动项目

图片22.png

7. 在浏览器中访问：<u>http://localhost:3000</u>或者 <u>http://127.0.0.1:3000</u>

三、Nuxt目录结构

图片23.png

四、Nuxt个性化配置文件描述(nuxt.config.js)

图片24.png

五、端口配置

方式一： 在package.json文件中配置

"config": {

"nuxt": {

  "host": "127.0.0.1",

  "port": "9999"

} 

},

方式二： 在nuxt.config.js中配置

server: {

port: 8000, // 端口号

host: '127.0.0.1', // 主机名

}

六、全局CSS样式配置

1.创建重置样式表normalize.css文件

图片25.png

2.配置nuxt.config.js文件中css属性

图片26.png

创建的所有页面中就具有重置表的样式

七、路由

1. 页面之间跳转

原始方式： <a href=”/”></a>

            <a href=”/news”></a>

        <a href=”/about”></a>

推荐方式： <nuxt-link :to=****”****/****”****></nuxt-link>

** <nuxt-link :to=****”****/news****”****></nuxt-link>**

<nuxt-link :to=****”****/about****”****></nuxt-link>

2. nuxt已经配置好了路由，无需再配置就可以直接使用

   比如：

图片27.png

Nuxt自动配置的路由如下：

图片28.png

3. 动态路由

   注意：定义带参数的动态路由，需要在文件中创建以_开头的vue文件或者文件目录

   比如：

   图片29.png

采用vue中router-link方式写法

图片30.png

接收方式

图片31.png

4. 路由验证

   Nuxt提供了一个专门验证的路由的方法validate方法

   图片32.png

八、过渡动效

1. 全局过渡效果设置

注意： 默认使用过渡效果名称： page

在assets/normalize.css文件中设置

图片33.png

然后在nuxt.config.js中css属性引用就可以让所有页面进入和离开都有过渡效果

图片34.png

2. 单个页面过渡动效设置

在assets/normalize.css文件中设置

图片35.png

在_id.vue页面中调用transtion属性

图片36.png

九、视图模板

1. 定义全局默认HTML视图模板，在全局目录中创建app.html文件

图片37.png

2. 页面布局视图模板

A. 在layout/default.vue中定义默认的视图

![图片38.png](https://img.haomeiwen.com/i13211021/87aece861a606d14.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

B. 自定义模板视图

1. 可以在layout中创建lgo.vue文件

图片39.png

2. 在page中其他组件文件中引用layout属性，值为lgo

图片40.png

C. 错误页面

1. 通常在layout文件夹中创建一个error.vue页面,虽然他在layout中，但是我们应该把他当作页面，而不是视图模板，而且布局中不需要<nuxt />这个路由出口

图片41.png

D. 自定义头部信息

图片42.png

十、异步数据

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

1. Nuxt提供了几种不同的方法来操作asyncData方法

A. promise ( 没有追求 )

B. async 和 await( 有追求 )

2. Prosmise

图片43.png

3. async 和 await

图片44.png

渲染页面：

图片45.png