NuxtJS服务端渲染技术

1.概念：

（1）服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容

（2）Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静

         态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

2.官网链接：

Nuxt - The Intuitive Vue Frameworkhttps://zh.nuxtjs.org/

3.NUXT环境初始化：

（3.1）下载压缩包：

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

（3.2）解压：

              将template中的内容复制到指定目录即可

              如图：目录结构

               

 

（3.3）修改package.json：

              注：name、description、author

        {
          "name": "指定存放template目录名",
          "version": "1.0.0",
          "description": "网页名",
          "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"
          },
          ......
        }

（3.4）修改nuxt.config.js：

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

        module.exports = {
          /*
          ** Headers of the page
          */
          head: {
            title: '指定存放template目录名',
            meta: [
              { charset: 'utf-8' },
              { name: 'viewport', content: 'width=device-width, initial-scale=1' },
              { hid: 'description', name: 'description', content: '网页名' }
            ],
            ......
          },
          ......
        }
​

（3.5）终端中进入项目目录安装依赖：

              如图：终端输入npm install命令

              

（3.6）引入element-ui：

           （3.6.1）下载element-ui

                           如图：输入npm install element-ui命令

                           

           （3.6.2）在plugins文件夹下创建myPlugin.js文件

                           如图：

                           

           （3.6.3）在myPlugin.js文件引入element-ui

                          myPlugin.js文件内容：

                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

           （3.6.4）在nuxt.config.js文件中使用myPlugin.js

                          如图：

                          

                          nuxt.config.js文件内容：

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

（3.7）测试运行

              如图：终端控制台输入npm run dev命令

              

（3.8）NUXT目录结构

            （3.6.4）资源目录 assets

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

            （3.6.4）组件目录 components

                           用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这

                           些组件不会像页面组件那样有 asyncData 方法的特性。

            （3.6.4）布局目录 layouts

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

            （3.6.4）页面目录 pages

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

                           生成对应的路由配置。

            （3.6.4）插件目录 plugins

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

            （3.6.4）nuxt.config.js 文件

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

4.封装axios：

  （4.1）安装axios：

                如图：终端控制台输入npm install axios命令

                

  （4.2）封装axios：

                如图：在utils目录中新建request.js文件

                

                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