全局安装nuxt_Nuxt爬坑

nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架，用Vue开发多页应用，并在服务端完成渲染，可以直接用命令把我们制作的vue项目生成为静态html。

1.那 服务器 端渲染到底有什么好处呢？

主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作，Nuxt.js适合作新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。如果你要作移动端的项目，就没必要使用这个框架了。

2.什么是SSR？

在认识 SSR 之前，首先对 CSR 与 SSR 之间做个对比。

首先看一下传统的web开发，传统的web开发是，客户端向服务端发送请求，服务端查询数据库，拼接 HTML 字符串(模板)，通过一系列的数据处理之后，把整理好的 HTML 返回给客户端,浏览器相当于打开了一个页面。这种比如我们经常听说过的 jsp , PHP , aspx 也就是传统的 MVC 的开发。

SPA 应用，到了 Vue 、 React ，单页面应用优秀的用户体验，逐渐成为了主流，页面整体式 javaScript 渲染出来的，称之为客户端渲染 CSR 。 SPA 渲染过程。由客户端访问 URL 发送请求到服务端，返回 HTML 结构(但是 SPA 的返回的 HTML 结构是非常的小的，只有一个基本的结构，如第一段代码所示)。客户端接收到返回结果之后，在客户端开始渲染 HTML ，渲染时执行对应 javaScript ，最后渲染 template ，渲染完成之后，再次向服务端发送数据请求，注意这里时数据请求，服务端返回 json 格式数据。客户端接收数据，然后完成最终渲染。

SPA 虽然给服务器减轻了压力，但是也是有缺点的：

首屏渲染时间比较长：必须等待 JavaScript 加载完毕，并且执行完毕，才能渲染出首屏。

SEO 不友好：爬虫只能拿到一个 div 元素，认为页面是空的，不利于 SEO 。

为了解决如上两个问题，出现了 SSR 解决方案，后端渲染出首屏的 DOM 结构返回，前端拿到内容带上首屏，后续的页面操作，再用单页面路由和渲染，称之为服务端渲染( SSR )。

SSR 渲染流程是这样的，客户端发送 URL 请求到服务端，服务端读取对应的 url 的模板信息，在服务端做出 html 和 数据 的渲染，渲染完成之后返回 html 结构，客户端这时拿到的之后首屏页面的 html 结构。所以用户在浏览首屏的时候速度会很快，因为客户端不需要再次发送 ajax 请求。并不是做了 SSR 我们的页面就不属于 SPA 应用了，它仍然是一个独立的 spa 应用。

SSR 是处于 CSR 与 SPA 应用之间的一个折中的方案，在渲染首屏的时候在服务端做出了渲染，注意仅仅是首屏，其他页面还是需要在客户端渲染的，在 服务端 接收到请求之后并且渲染出首屏页面，会携带着剩余的路由信息预留给 客户端 去渲染其他路由的页面。

Nuxt.js是特点(优点)：

基于 Vue

自动代码分层

服务端渲染

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

静态文件服务

EcmaScript6 和 EcmaScript7 的语法支持

打包和压缩 JavaScript 和 Css

HTML 头部标签管理

本地开发支持热加载

集成 ESLint

支持各种样式预编译器 SASS 、 LESS 等等

支持 HTTP/2 推送

第二节：Nuxt环境搭建

1.nuxt.js安装

在使用npm前你需要安装Node到系统中。若没有安装参考此链接 www.cnblogs.com/zhouyu2017/…

(1)用npm来安装vue-cli这个框架。

npm install vue-cli -g

复制代码

安装完成后可以使用vue -V 来测试是否安装成功。(注意：这里要使用大写的V，小写无效)。

(2)使用vue安装 nuxt

安装好vue-cli后，就可以使用init命令来初始化Nuxt.js项目。

vue init nuxt/starter

复制代码

这时候他会在github上下载模版，然后会询问你项目的名称叫什么，作者什么的，这些完全可以根据自己的爱好填写。

(3)使用npm install安装依赖包

npm install

复制代码

这个过程是要等一会的，如果你这个过程安装失败，可以直接诶删除项目中的node_modules文件夹后，重新npm install进行安装。

(4)使用npm run dev 启动服务

(5)在浏览器输入 localhost:3000,可以看到结果,如下：

2.第一个Nuxt应用程序安装

npm i create-nuxt-app -g

create-nuxt-app my-nuxt-demo

cd my-nuxt-demo

npm run dev

复制代码

安装向导：

Project name // 项目名称

Project description // 项目描述

Use a custom server framework // 选择服务器框架

Choose features to install // 选择安装的特性

Use a custom UI framework // 选择UI框架

Use a custom test framework // 测试框架

Choose rendering mode // 渲染模式

Universal // 渲染所有连接页面

Single Page App // 只渲染当前页面

复制代码

3.Nuxt 渲染流程

一个完整的服务器请求到渲染的流程

通过上面的流程图可以看出，当一个客户端请求进入的时候，服务端有通过 nuxtServerInit 这个命令执行在 Store 的 action 中，在这里接收到客户端请求的时候，可以将一些客户端信息存储到 Store 中，也就是说可以把在服务端存储的一些客户端的一些登录信息存储到 Store 中。之后使用了 中间件 机制，中间件其实就是一个函数，会在每个路由执行之前去执行，在这里可以做很多事情，或者说可以理解为是路由器的拦截器的作用。然后再 validate 执行的时候对客户端携带的参数进行校验，在 asyncData 与 fetch 进入正式的渲染周期， asyncData 向服务端获取数据，把请求到的数据合并到 Vue 中的 data 中，

第三节 ：Nuxt目录结构

# 目录结构介绍

└─my-nuxt-demo

├─.nuxt // Nuxt自动生成，临时的用于编辑的文件，build

├─assets // 用于组织未编译的静态资源如LESS、SASS或JavaScript,对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中

├─components // 用于自己编写的Vue组件，比如日历组件、分页组件

├─layouts // 布局目录，用于组织应用的布局组件，不可更改:star:

├─middleware // 用于存放中间件

├─node_modules

├─pages // 用于组织应用的路由及视图,Nuxt.js根据该目录结构自动生成对应的路由配置，文件名不可更改:star:

├─plugins // 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

├─static // 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。文件夹名不可更改。:star:

└─store // 用于组织应用的Vuex 状态管理。文件夹名不可更改。:star:

├─.editorconfig // 开发 工具 格式配置

├─.eslintrc.js // ESLint的配置文件，用于检查代码格式

├─.gitignore // 配置git忽略文件

├─nuxt.config.js // 用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。文件名不可更改。:star:

├─package-lock.json // npm自动生成，用于帮助package的统一设置的，yarn也有相同的操作

├─package.json // npm 包管理配置文件

├─README.md

复制代码

# 配置文件

const pkg = require('./package')

module.exports = {

mode: 'universal', // 当前渲染使用模式

head: { // 页面head配置信息

title: pkg.name, // title

meta: [ // meat

{ charset: 'utf-8' },

{ name: 'viewport', content: 'width=device-width, initial-scale=1' },

{ hid: 'description', name: 'description', content: pkg.description }

],

link: [ // favicon，若引用css不会进行打包处理

{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }

]

},

loading: { color: '#fff' }, // 页面进度条

css: [ // 全局css(会进行webpack打包处理)

'element-ui/lib/theme-chalk/index.css'

],

plugins: [ // 插件

'@/plugins/element-ui'

],

modules: [ // 模块

'@nuxtjs/axios',

],

axios: {},

build: { // 打包

transpile: [/^element-ui/],

extend(config, ctx) { // webpack自定义配置

}

}

}

复制代码

# Nuxt运行命令

{

"scripts": {

// 开发环境

"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",

// 打包

"build": "nuxt build",

// 在服务端运行

"start": "cross-env NODE_ENV=production node server/index.js",

// 生成静态页面

"generate": "nuxt generate"

}

}

复制代码

第四节：Nuxt常用配置项

1.配置IP和端口

开发中经常会遇到端口被占用或者指定IP的情况。我们需要在根目录下的package.json里对config项进行配置。比如现在我们想把IP配置成127.0.0.1，端口设置1000。

/pack