服务端渲染技术Nuxt

1.什么是服务端渲染技术

  • 服务端渲染又称SSR(Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。服务器端渲染(SSR)的优势主要在于∶更好的SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
  • 如果你的应用程序初始展示loading菊花图，然后通过Ajax获取内容，抓取工具并不会等待异步完成后再进行页面内容的抓取。也就是说，如果SEO对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。
  • 另外，使用服务器端渲染，我们可以获得更快的内容到达时间(time-to-content)，无需等待所有的JavaScript都完成下载并执行，产生更好的用户体验，对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言，服务器端渲染(SSR)至关重要。

2.什么是Next

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

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

下图阐述了 Nuxt.js 应用一个完整的服务器请求到渲染（或用户通过 <nuxt-link> 切换路由渲染页面）的流程：

服务端渲染技术Nuxt - 图1

3.特性

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

4.Nuxt目录结构

  • 资源目录
    • assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
  • 组件目录
    • 组件目录 components 用于组织应用的 Vue.js 组件。
    • Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
  • 布局目录
    • 布局目录 layouts 用于组织应用的布局组件。
    • default.vue 设置头信息、尾信息的布局
    • 若无额外配置，该目录不能被重命名。
  • 中间件目录
    • middleware 目录用于存放应用的中间件。
  • 页面目录
    • 页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
    • 若无额外配置，该目录不能被重命名。
  • 插件目录
    • 插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
  • 静态文件目录
    • 静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
    • 举个例子: /static/robots.txt 映射至 /robots.txt
    • 若无额外配置，该目录不能被重命名。*
  • Store 目录
    • store 目录用于组织应用的 Vuex 状态树 文件。
    • Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。
    • 若无额外配置，该目录不能被重命名。
  • nuxt.config.js 文件
    • nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。
    • 若无额外配置，该文件不能被重命名。
  • package.json 文件
    • package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。
    • 该文件不能被重命名。
  • 别名

    • 默认情况下，srcDir 和 rootDir 相同。 | 别名 | 目录 | | —- | —- | | ~
      或 @ | srcDir | | ~~
      或 @@ | rootDir |

5.安装

确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）：

  1. $ npx create-nuxt-app <项目名>

它会让你进行一些选择:

  1. 在集成的服务器端框架之间进行选择:
  1. 选择您喜欢的 UI 框架:
  1. 选择您喜欢的测试框架:
  1. 选择你想要的 Nuxt 模式 (Universal or SPA)
  2. 添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。
  3. 添加 EsLint 以在保存时代码规范和错误检查您的代码。
  4. 添加 Prettier 以在保存时格式化/美化您的代码。
  5. 添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。
  6. 添加 EsLint 以在保存时代码规范和错误检查您的代码。
  7. 添加 Prettier 以在保存时格式化/美化您的代码。

当运行完时，它将安装所有依赖项，因此下一步是启动项目:

  1. # 进入目录输入
  2. $ npm run dev

应用现在运行在 http://localhost:3000 上运行。

注意：Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。

项目前端

一、幻灯片插件

1.安装插件

  1. $ npm install vue-awesome-swiper

2.配置插件

在plugins文件夹下新建文件nuxt-swiper-plugin.js内容是

  1. import Vue from 'vue'
  2. import VueAwesomeSwipter from 'vue-awesome-swiper/dist/ssr'
  4. Vue.use(VueAwesomeSwipter)

在nuxt.config.js文件中配置插件

将plugins和css节点复制到module.exports节点下

  1. module.exports = {
  2.     //some nuxt config...
  3.     plugins: [
  4.         { src: '~/plugins/next-swiper-plugin.js', ssr: false}
  5.     ],
  6.     css: [
  7.         'swiper/dist/css/swiper.css'
  8.     ]
  9. }

注意如果文件名不一致会导致启动报错

需要导入vue@2.6.14 

  1. $ npm install --save vue@2.6.14

最新版vue-awesome-swiper使用的是vue@3.x版本，vue@2.x版本可使用vue-awesome-swiper@3.1.3 

  1. $ npm install vue-awesome-swiper@3.1.3

3.复制项目使用的静态资源

二、nuxt路由

第一种 固定路由

路径是固定地址，不发生变化

服务端渲染技术Nuxt - 图2

第二种 动态路由

每次生成的路由

创建方式

如果我们需要根据id查询一条记录，就需要使用动态路由。Nuxt的动态路由是以下划线开头的vue文件，参数名为下划线后面的文件名

通过id查询就在目录下创建_id.vue