服务端渲染技术NUXT

1、服务端渲染技术NUXT

       1.1 什么是服务端渲染

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

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

       如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再进行页面内容的抓取。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。

       另外，使用服务器端渲染，我们可以获得更快的内容到达时间(time-to-content)，无需等待所有的 JavaScript 都完成下载并执行，产生更好的用户体验，对于那些内容到达时间(time-to-content)与转化率直接相关的应用程序而言，服务器端渲染(SSR)至关重要。

       1.2 什么是NUXT
       Nuxt.js是一个基于 Vue.js 的轻量级应用框架，可用来创建服务端渲染 (SSR) 应用，也可充当静态站点引擎生成静态站点应用，具有优雅的代码结构分层和热加载等特性。

       官网网站：https://zh.nuxtjs.org/

2、NUXT环境初始化

       2.1 下载压缩包

       https://github.com/nuxt-community/starter-template/archive/master.zip

       也可以通过官网进行下载，本案例下载的是以上链接的压缩包。

       2.2 解压

       将解压之后项目中的template文件夹中的内容复制到自己新建的test-site文件夹中（test-site文件夹名字自己取的）。

       2.3 修改package.json

       name、description、author（必须修改这里，否则项目无法安装）

{
  "name": "test-site",
  "version": "1.0.0",
  "description": "test项目",
  "author": "一源星河",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
...
}

       2.4 修改nuxt.config.js

       修改title: ‘{{ name }}’、content: ‘{{escape description }}’

       这里的设置最后会显示在页面标题栏和meta数据中

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'yygh-site',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'test项目' }
    ],
…

       2.5 终端中进入项目目录安装依赖

npm install

       2.6 引入element-ui

       1、下载element-ui

npm install element-ui

       2、在plugins文件夹下创建myPlugin.js文件

       3、在myPlugin.js文件引入element-ui

import Vue from 'vue'
import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI

       
       4、在nuxt.config.js文件中使用myPlugin.js，在build下面添加内容：

plugins: [
    { src: '~/plugins/myPlugin.js', ssr: false }
  ]

       
       2.7 测试运行

npm run dev

       访问项目：http://localhost:3000/
       
       通过访问http://localhost:3000/出现以上路径，也就证明项目的环境搭建完成！此时，终端会出现一个错误信息，具体如下：

       错误解析：属性或方法“name”不是在实例上定义的，而是在呈现期间引用的。

       解决方案：将pages文件夹中的index.vue中的{{ name }}和{{ description }}删除掉就可以了。

       再次访问http://localhost:3000/，终端就不会再有错误信息打印。

       2.8 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 应用的个性化配置，以便覆盖默认配置。

3、封装axios

       3.1 安装axios

       执行安装命令

npm install axios

       3.2 封装axios

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

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
// 创建axios实例
const service = axios.create({
    baseURL: 'http://localhost',
    timeout: 15000 // 请求超时时间
})
// http request 拦截器
service.interceptors.request.use(
    config => {
    // token 先不处理，后续使用时在完善
    return config
},
  err => {
    return Promise.reject(err)
})
// http response 拦截器
service.interceptors.response.use(
    response => {
        if (response.data.code !== 200) {
            Message({
                message: response.data.message,
                type: 'error',
                duration: 5 * 1000
            })
            return Promise.reject(response.data)
        } else {
            return response.data
        }
    },
    error => {
        return Promise.reject(error.response)
})
export default service