【郑州校区】Nuxt.js实战 上

1.前言1.1.web渲染模式

在传统的web项目中，对于页面的展示，在程序上一共有两种渲染模式，分别是： 客户端渲染和服务器端渲染。

1.1.1.客户端渲染

​        所谓的客户端渲染指的是:  客户端(浏览器)使用AJAX向服务端发起http请求，服务端响应对应的json数据，客户端拿着数据这些数据之后，客户端生成Dom元素开始渲染html网页，并最终将html页面展示给用户。

1.1.2.服务器端渲染

​        所谓的服务端渲染指的是：客户端(浏览器)发送请求到服务器，由服务器来生成html，然后响应给浏览器，浏览器展示html页面。

1.1.3.发展过程中的问题

​        随着移动互联网新时代的到来，越来越多的网站会要求web前后端实现分离开发，也就是说服务端只专注业务，前端只专注用户体验，也正式因为这样，大量的前端渲染技术被应用了起来，比如流行的vue.js、react等框架，都提供了功能强大的前端渲染技术。

​        前端渲染技术的特点是在浏览器端生成DOM元素，渲染页面， 这就意味着网站的很多操作， 其实是通过js代码来实现的， 也正是因为这样， 网站将无法把搜索引擎的spider， 通过超链接的url引入服务端， 从而会导致搜索引擎无法顺利抓取网页， 网站的搜索排名下滑，对网站的"SEO"就造成了很大的影响。

​        PS :  SEO是网站为了提高自已的网站排名，获得更多的流量，对网站的结构及内容进行调整优化，以便搜索引擎（百度，google等）更好抓取到更优质的网站的内容。

1.2.为什么要用Nuxt.js

在web的两种渲染方式中，客户端渲染对网站的"SEO"很不友好，我们需要把一部分"需要SEO优化的界面"的渲染模式，修改为"服务器端渲染"，就能解决这个问题。

但是，服务器端渲染在一定程度上违背了我们的"前后端分离开发模式"的原则，所以，直接使用服务器端渲染也不是很好。那有没有一种即能很好的实现前后端分离，又能实现服务端渲染的技术呢？ Nuxt.js

2.Nuxt.js介绍

Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

优点：

• 基于 Vue.js
• 自动代码分层
• 服务端渲染
• 强大的路由功能，支持异步数据
• 静态文件服务
• ES6/ES7 语法支持
• 打包和压缩 JS 和 CSS
• HTML头部标签管理
• 本地开发支持热加载
• 集成ESLint
• 支持各种样式预处理器： SASS、LESS、 Stylus等等
  
  

3.Nuxt.js实战3.1.概述

​        本次演示将以案例的形式，演示Nuxt.js的使用方式。案例名字为"黑马旅游网"，案例最终效果及要求，如下所述：

3.2.最终效果
3.3.案例要求

• 页面的头部，属于模版部分，该网站所有页面默认引入。
  
  

2.导航菜单栏，从数据库中获取，并在页面动态展示

3.页面的尾部，也属于模版部分，该网站所有页面默认引入

4.网站前台页面，必须使用Nuxt.js来实现
4.环境搭建4.1 准备-安装Vue-cli

​        Nuxt.js 是一个基于 Vue.js 的通用应用框架。所以，如果搭建Nuxt.js项目，则需要Vue的支持。因此，我们需要先安装Vue-cli。

4.2 创建项目4.2.1 创建项目存放位置

  注意: 如果项目存放位置已存在，则无需创建

4.2.2 进入项目存放的位置
4.2.3 创建项目

在创建项目时，可以使用nuxt.js项目模版创建

语法: vue init 模版名称 项目名

当前项目采用nuxt-community/starter-template模版，项目名为first-nuxt

注意: 项目名中不能有大写字母 此时，在 D:\VUEProjects 就多出来了一个 first-nuxt 文件夹

4.3 初始化项目

4.3.1 进入 first-nuxt 文件夹 4.3.2 安装依赖包，进行初始化 当看到下列信息时，表示初始化成功

4.4.启动项目

​        安装成功后，输入 npm run dev 启动项目

​        当出现项目的访问路径时，表示启动成功

4.5.打开项目

​        此时，在浏览器访问http://localhost:3000，即可看到界面效果（如下图），说明nuxt项目搭建成功。

【郑州校区】Nuxt.js实战 上

1.前言1.1.web渲染模式

在传统的web项目中，对于页面的展示，在程序上一共有两种渲染模式，分别是： 客户端渲染和服务器端渲染。

1.1.1.客户端渲染

​        所谓的客户端渲染指的是:  客户端(浏览器)使用AJAX向服务端发起http请求，服务端响应对应的json数据，客户端拿着数据这些数据之后，客户端生成Dom元素开始渲染html网页，并最终将html页面展示给用户。

1.1.2.服务器端渲染

​        所谓的服务端渲染指的是：客户端(浏览器)发送请求到服务器，由服务器来生成html，然后响应给浏览器，浏览器展示html页面。

1.1.3.发展过程中的问题

​        随着移动互联网新时代的到来，越来越多的网站会要求web前后端实现分离开发，也就是说服务端只专注业务，前端只专注用户体验，也正式因为这样，大量的前端渲染技术被应用了起来，比如流行的vue.js、react等框架，都提供了功能强大的前端渲染技术。

​        前端渲染技术的特点是在浏览器端生成DOM元素，渲染页面， 这就意味着网站的很多操作， 其实是通过js代码来实现的， 也正是因为这样， 网站将无法把搜索引擎的spider， 通过超链接的url引入服务端， 从而会导致搜索引擎无法顺利抓取网页， 网站的搜索排名下滑，对网站的"SEO"就造成了很大的影响。

​        PS :  SEO是网站为了提高自已的网站排名，获得更多的流量，对网站的结构及内容进行调整优化，以便搜索引擎（百度，google等）更好抓取到更优质的网站的内容。

1.2.为什么要用Nuxt.js

在web的两种渲染方式中，客户端渲染对网站的"SEO"很不友好，我们需要把一部分"需要SEO优化的界面"的渲染模式，修改为"服务器端渲染"，就能解决这个问题。

但是，服务器端渲染在一定程度上违背了我们的"前后端分离开发模式"的原则，所以，直接使用服务器端渲染也不是很好。那有没有一种即能很好的实现前后端分离，又能实现服务端渲染的技术呢？ Nuxt.js

2.Nuxt.js介绍

Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

优点：

• 基于 Vue.js
• 自动代码分层
• 服务端渲染
• 强大的路由功能，支持异步数据
• 静态文件服务
• ES6/ES7 语法支持
• 打包和压缩 JS 和 CSS
• HTML头部标签管理
• 本地开发支持热加载
• 集成ESLint
• 支持各种样式预处理器： SASS、LESS、 Stylus等等
  
  

3.Nuxt.js实战3.1.概述

​        本次演示将以案例的形式，演示Nuxt.js的使用方式。案例名字为"黑马旅游网"，案例最终效果及要求，如下所述：

3.2.最终效果
3.3.案例要求

• 页面的头部，属于模版部分，该网站所有页面默认引入。
  
  

2.导航菜单栏，从数据库中获取，并在页面动态展示

3.页面的尾部，也属于模版部分，该网站所有页面默认引入

4.网站前台页面，必须使用Nuxt.js来实现
4.环境搭建4.1 准备-安装Vue-cli

​        Nuxt.js 是一个基于 Vue.js 的通用应用框架。所以，如果搭建Nuxt.js项目，则需要Vue的支持。因此，我们需要先安装Vue-cli。

4.2 创建项目4.2.1 创建项目存放位置

  注意: 如果项目存放位置已存在，则无需创建

4.2.2 进入项目存放的位置
4.2.3 创建项目

在创建项目时，可以使用nuxt.js项目模版创建

语法: vue init 模版名称 项目名

当前项目采用nuxt-community/starter-template模版，项目名为first-nuxt

注意: 项目名中不能有大写字母 此时，在 D:\VUEProjects 就多出来了一个 first-nuxt 文件夹

4.3 初始化项目

4.3.1 进入 first-nuxt 文件夹 4.3.2 安装依赖包，进行初始化 当看到下列信息时，表示初始化成功

4.4.启动项目

​        安装成功后，输入 npm run dev 启动项目

​        当出现项目的访问路径时，表示启动成功

4.5.打开项目

​        此时，在浏览器访问http://localhost:3000，即可看到界面效果（如下图），说明nuxt项目搭建成功。