踩坑之服务端渲染技术Nuxt--笔记

1、什么是服务端渲染

服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。

服务器端渲染(SSR)的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

• seo
  即 搜索引擎优化（Search Engine Optimization），它是指通过站内优化，如：网站结构调整、网站内容建设、网站代码优化以及站外优化等方法，来进行搜索引擎优化。

简单说： 通过各种技术（手段）来确保，你的Web内容被搜素引擎最大化收录，最大化提高权重，带来更多流量。目前SEO；流量是变现的快车道，SEO 是低成本获取流量的最佳方法。
如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再进行页面内容的抓取。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。

2:什么是NUXT

• Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。
• Nuxt.js是使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架，使用它，你可以不需要自己搭建一套 SSR 程序，而是通过其约定好的文件结构和API就可以实现一个首屏渲染的 Web 应用。

官网

环境初始化：

快速的初始化：nuxt为我们提供了模版：下载地址

• 1:解压
• 2:template中的内容复制到你的前端项目文件夹
• 3:安装ESLint（js检测插件）：可以讲之前做过的.eslintrc.js配置文件复制到当前项目下，这个配置文件就是这个插件的配置文件
• 4:修改package.json中的：name、description、author （必须修改，否则无法安装）

 "name": "项目名",
 "version": "1.0.0",
 "description": "项目的描述",
 "author": "作者",

• 5:修改nuxt.config.js：修改title: ‘{{ name }}’、content: ‘{{escape description }}’，这里的设置最后会显示在页面标题栏和meta数据中

初始化完即可安装，运行

• 1:在终端中进入此项目目录，在安装其依赖：npm install
• 2:测试运行：npm run dev

Nuxt的目录结构：

（1）资源目录 assets

用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

（2）组件目录 components

用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。

（3）布局目录 layouts

用于组织应用的布局组件。

（4）页面目录 pages

用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

（5）插件目录 plugins

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

（6）nuxt.config.js 文件

nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

Nuxt的页面布局：

1:复制静态资源的存放目录：

将静态原型中的css、img、js、photo目录拷贝至assets目录下
将favicon.ico复制到static目录下

2:定义布局

我们可以把页头和页尾提取出来，形成布局页
修改layouts目录下default.vue，从静态页面中复制首页，修改了原始文件中的资源路径为~/assets/，将主内容区域的内容替换成

<template>
  <div>
    <!-- 页头部分 -->
      
    <!-- 内容的区域 -->
    <nuxt/>
      
    <!-- 页尾部分 -->
  </div>
</template>

简单来说的话 我们可以在这个default.vue的布局中在前后加入其相关的布局， 等于是Vue中相当于一个占位符，匹配到的组件就在这个位置开始展示，而nuxt对于开发来说自定了一套规则，我们按照其规则来使用的话就可以减少很多配置

路由

<template>
  <div>
    <!-- 页头部分 -->
      <ul class="nav">
            <router-link to="/" tag="li" active-class="current" exact>
              <a>首页</a>
            </router-link>
            <router-link to="/course" tag="li" active-class="current">
              <a>课程</a>
            </router-link>
            <router-link to="/teacher" tag="li" active-class="current">
              <a>名师</a>
            </router-link>
            <router-link to="/article" tag="li" active-class="current">
              <a>文章</a>
            </router-link>
            <router-link to="/qa" tag="li" active-class="current">
              <a>问答</a>
            </router-link>
          </ul>
    <!-- 内容的区域 -->
    <nuxt/>
      
    <!-- 页尾部分 -->
  </div>
</template>

• "/"这个路由默认是在pages文件夹下的index.vue
• 比如我们要配置课程的路由，在pages下创建course，再在course目录下创建index.vue就是其课程的展示页面，如果需要传递参数，比如查看某课程，就要传递其课程的id，这样我们就可以创建==_id.vue== 这个配置文件；
  demo：首页是地址是http://localhost:3000，点击课程就是http://localhost:3000/course，其中切换只course文件夹下的index.vue组件，在课程中点击某个具体课程地址变成http://localhost:3000/course/1，此时其中切换只course文件夹下的_id.vue组件,在_id.vue中就可以通过params.id将其取出

渲染组件之前异步获取数据asyncData

import axios from 'axios'
  export default {
    //asyncData：渲染组件之前异步获取数据
    asyncData ({ params, error }) {
      return axios.get('http://localhost:8201/xxx/course')
        .then((response) => {
          console.log(response)// 在命令终端查看输出
          return { items: response.data.data.items }
        })
    }
  }

为了方便我们可以封装axios

创建utils文件夹，utils下创建request.js

import axios from 'axios'
// 创建axios实例 并做相关配置
const service = axios.create({
  baseURL: 'http://localhost:xxx', // api的base_url（网关）
  timeout: 20000 // 请求超时时间
})
export default service

在NUXT中配置插件（swiper/elementui）

swiper 使用及其配置

• 1:安装插件： npm install vue-awesome-swiper
• 2:配置插件：
  • 在 plugins 文件夹下新建文件 nuxt-swiper-plugin.js，内容是

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

Vue.use(VueAwesomeSwiper)

• 3:在 nuxt.config.js 文件中配置插件
  • 将 plugins 和 css节点 复制到 module.exports节点下

module.exports = {
  // some nuxt config...
  plugins: [
    { src: '~/plugins/nuxt-swiper-plugin.js', ssr: false }
  ],

  css: [
    'swiper/dist/css/swiper.css'
  ]
}

• plugins引入一些第三方插件的时候，如果不需要SSR，可以在后面选择ssr:false进行关闭。这样可以避免一些window未定义的问题。

swiper配置成功后既可以使用：按照官网上其的文档demo创建

html：

<div v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background: #040B1B;">
          <a target="_blank" href="/">
            <img src="~/assets/photo/banner/xxx.jpg" alt="首页banner">
          </a>
        </div>
        <div class="swiper-slide" style="background: #040B1B;">
          <a target="_blank" href="/" >
            <img src="~/assets/photo/banner/xxx.jpg" alt="首页banner">
          </a>
        </div>
      </div>
      <div class="swiper-pagination swiper-pagination-white"/>
      <div slot="button-prev" class="swiper-button-prev swiper-button-white"/>
      <div slot="button-next" class="swiper-button-next swiper-button-white"/>
    </div>

js中：

 data() {
    return {
      swiperOption: {
        // 配置分页
        pagination: {
          el: '.swiper-pagination'// 分页的dom节点
        },
        // 配置导航
        navigation: {
          nextEl: '.swiper-button-next', // 下一页dom节点
          prevEl: '.swiper-button-prev'// 前一页dom节点
        }
      }
    }
  }

这样即可以使用了 swiper

elementui的引用

• 1:安装同上
• 2:配置插件：
  • 在 plugins 文件夹下新建文件 element-ui.init.js，内容是：

import Vue from 'vue'

import Element from 'element-ui'

Vue.use(Element)

// 按需引用
// import { Button } from 'element-ui'
// Vue.component(Button.name, Button)

• 3:在 nuxt.config.js 文件中配置插件
  • 将 plugins 和 css节点 复制到 module.exports节点下

module.exports = {
  // some nuxt config...
  plugins: [
    '~/plugins/element-ui.init.js',
    .....
  ],

  css: [
    { src: 'element-ui/lib/theme-chalk/index.css' },
    .....
  ],
    build: {
    /* 此处要加vendor*/
    vendor: ['element-ui'],
    .....
    }
}

这样就配置成功就可以直接使用；