[JavaScript知识库]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