1、什么是Nuxt.js?
- Nuxt.js 是一个基于 Vue.js 的通用应用框架。
- 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI 渲染。
- Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。
2、什么是SEO?
-
SEO:搜索引擎优化(Search Engine Optimization), 通过各种技术(手段)来确保,我们的Web内容被搜索引擎最大化收录,最大化提高权重,最终带来更多流量。
-
非常明显,SPA程序不利于SEO
-
SEO解决方案:提前将
页面和数据
进行整合- 前端:采用SSR
- 后端:页面静态化 (freemarker 、thymeleaf、velocity)
3、什么是SSR技术?
-
服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端。
- 在SSR中,前端分成2部分:前端客户端、前端服务端
- 前端服务端,用于发送ajax,获得数据
- 前端客户端,用于将ajax数据和页面进行渲染,渲染成html页面,并响应给调用程序(浏览器、爬虫)
- 如果爬虫获得html页面,就可以启动处理程序,处理页面内容,最终完成SEO操作。
4、入门案例
4.1 create-nuxt-app 介绍
- Nuxt.js 提供了脚手架工具
create-nuxt-app
create-nuxt-app
需要使用npx
- npx 命令为 NPM版本5.2.0默认安装组件
4.2 安装
npx create-nuxt-app <project-name>
- 例如
npx create-nuxt-app demo_nuxt02
- nuxtjs改善
4.3 启动
npm run dev
4.4 访问
http://localhost:3000