浅谈前端nuxt（ssr）

SSR： 服务端渲染（Server Side Render），即：网页是通过服务端渲染生成后输出给客户端。

一、那为什么要使用SSR呢？

我用一句话理解的就是降低SPA(Single Page Application)首屏渲染的时间，解决SPA不利于SEO(Search Engine Optimization)的优化。

那Nuxt是什么呢？跟SSR有什么关系呢？

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

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

我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

Nuxt.js 预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。

除此之外，我们还提供了一种命令叫：nuxt generate，为基于 Vue.js 的应用提供生成对应的静态站点的功能。

我们相信这个命令所提供的功能，是向开发集成各种微服务（microservices）的 Web 应用迈开的新一步。

作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

Nuxt.js是受到了React SSR框架Next.js的启发，使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架。

二、nuxt.js的优势

1）就是我们无需为了路由划分而烦恼，你只需要按照对应的文件夹层级创建 .vue 文件就行。

2）无需考虑数据传输问题，nuxt 会在模板输出之前异步请求数据（需要引入 axios 库），而且对 vuex 有进一步的封装。

3）内置了 webpack，省去了配置 webpack 的步骤，nuxt 会根据配置打包对应的文件。

4）中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。

三、开始Nuxt项目的搭建

1.首先根据官方网站教程创建一个项目。

为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app。

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

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

或者用yarn ：

$ yarn create nuxt-app <项目名>

它会让你进行一些选择:

1. 在集成的服务器端框架之间进行选择:
   • None (Nuxt默认服务器)
   • Express
   • Koa
   • Hapi
   • Feathers
   • Micro
   • Adonis (WIP)
2. 选择您喜欢的UI框架:
   • None (无)
   • Bootstrap
   • Vuetify
   • Bulma
   • Tailwind
   • Element UI
   • Ant Design Vue
   • Buefy
3. 选择你想要的Nuxt模式 (Universal or SPA)
4. 添加 axios module 以轻松地将HTTP请求发送到您的应用程序中。
5. 添加 EsLint 以在保存时代码规范和错误检查您的代码。
6. 添加 Prettier 以在保存时格式化/美化您的代码。

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

$ npm run dev

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

2.引入axios,封装axios和请求api(使用的easy-mock请求模拟数据)

1) 安装依赖：npm i axios -S

2) 新建一个文件夹service,存放axios及api相关文件。

3)service目录下新建index.js（封装axios）

 /**
  * Created by yuchen on 2019/2/20.
  */
 import axios from 'axios'
 import qs from 'qs'
 import config from './config'
 import {API, API_URL} from './api'

 if (process.server){
   config.baseURL = `http://${process.env.HOST || 'localhost'} : ${process.env.PORT || 3000}`
 }

 const service = axios.create(config)

 // POST 传参序列化
 service.interceptors.request.use(
   config => {
     if (config.method === 'post') config.data = qs.stringfy(config.data)
     return config
   },
   error => {
     return Promise.reject(error)
   }
 )

 // 返回结果处理
 service.interceptors.response.use(
   res => {
     return res.data
   },
   error => {
     return Promise.reject(error)
   }
 )

 const get = (url) => {
   let temp = API[url]
   let URL = `${API_URL}${temp}`
   return service({
     method: 'get',
     url:URL
   })

 }

 const post = (url, params, showLoading) => {
   let temp = API[url]
   let URL = `${API_URL}${temp}`
   axios.post(URL, params, {
     showLoading: showLoading
   })
 }

 export default {
  get
 }

4) 新建config.js自定义配置

 /**
  * Created by yuchen on 2019/2/20.
  */
 import http from 'http'
 import https from 'https'

 export default {
   // 自定义的请求头
   headers: {
     post: {
       'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
     },
     'X-Requested-With': 'XMLHttpRequest'
   },
   // 超时设置
   timeout: 10000,
   // 跨域是否带Token
   withCredentials: true,
   // 响应的数据格式 json / blob /document /arraybuffer / text / stream
   responseType: 'json',
   // 用于node.js
   httpAgent: new http.Agent({
     keepAlive: true
   }),
   httpsAgent: new https.Agent({
     keepAlive: true
   })
 }

5) 新建api.js存放相关请求api(easy-mock模拟)

 /**
  * Created by yuchen on 2019/2/25.
  */
 let API_URL = 'https://easy-mock.com/mock'
 const API = {
   'mockTest':'/5c7387403b7ff2219057c6bb/example/mock'
 }
 export {
   API_URL,
   API
 }

6) 在plugins下新建http.js(挂载$http到vue上)

 /**
  * Created by yuchen on 2019/2/25.
  */
 import Vue from 'vue'
 import http from '~/service/index'
 Vue.prototype.$http = http
 Vue.use(http)

7) 在nuxt.config.js下引入插件plugins下的http.js

 /**
  * Created by yuchen on 2019/2/25.
  */
 import Vue from 'vue'
 import http from '~/service/index'
 Vue.prototype.$http = http
 Vue.use(http)

3.跨域处理

使用过 vue 的同学，肯定知道对于项目中的跨域，vue-cli 对 webpack 中的 proxy 选项进行了一层封装。它暴露出来的是一个叫 proxyTable 的选项，是对 webpack 中的 proxy 和其三方插件 http-proxy-middleware 的一个整合。

不幸的 Nuxt 中没有 proxyTable 这么一个配置项来进行跨域的配置。当然幸运的是，在 Nuxt 中你可以直接通过配置 http-proxy-middleware 来处理跨域。更幸运的是 Nuxt 官方提供了两个包来处理 axios 跨域问题。

• @nuxtjs/axios
• @nuxtjs/proxy

首先，进行安装

npm i @nuxtjs/axios @nuxtjs/proxy -D

然后在 nuxt.config.js 文件里进行配置

 modules: [
   '@nuxtjs/axios'
 ],
 axios: {
   proxy: true
 },
 proxy: {
   '/api': {
     target: 'xxx.target.com',
     pathRewrite: { '^/api': '' }
   }
 }

4.同理引入第三方插件element-ui

在plugins下新建element-ui.js(可全局和按需引用)，然后在nuxt.config.js引入

 /**
  * Created by yuchen on 2019/2/20.
  */
 import Vue from 'vue'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'

 Vue.use(ElementUI)

 // import { Radio } from 'element-ui'
 // Vue.component(Radio.name, Radio )

5.官方教程引入css预处理器less

styleResources

• 类型: Object
• 默认: {}

当您需要在页面中注入一些变量和mixin而不必每次都导入它们时，这非常有用。

Nuxt.js 使用 https://github.com/nuxt-community/style-resources-module 来实现这种行为。

您需要为css预处理器指定要包含的 模式 / 路径 ： less, sass, scss 或 stylus

您不能在此处使用路径别名(~ 和 @)，

:warning: You cannot use path aliases here (~ and @)，你需要使用相对或绝对路径。

安装 style-resources：

$ yarn add @nuxtjs/style-resources

根据需要安装：

• SASS: $ yarn add sass-loader node-sass
• LESS: $ yarn add less-loader less
• Stylus: $ yarn add stylus-loader stylus

如果使用的npm,则变为npm install less-loader less

修改 nuxt.config.js:

   modules: [
     '@nuxtjs/style-resources'
   ],
   styleResources:{
     less:'./assets/common.less'
   }

四、项目地址及Demo展示

此nuxt项目在脚手架新建的基础上增加了axios,elemet-ui,less,跨域处理,路由nuxt会帮你创建对应的路由，你只需要在page创建对应层级文件。

项目地址传送门：nuxt-ssr