Nuxt简介

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>
1

• 例如

npx create-nuxt-app demo_nuxt02
1

• nuxtjs改善
  

4.3 启动

npm run dev
1

4.4 访问

http://localhost:3000
1