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