浅谈前端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）

 1 /**
 2  * Created by yuchen on 2019/2/20.
 3  */
 4 import axios from 'axios'
 5 import qs from 'qs'
 6 import config from './config'
 7 import {API, API_URL} from './api'
 8 
 9 if (process.server){
10   config.baseURL = `http://${process.env.HOST || 'localhost'} : ${process.env.PORT || 3000}`
11 }
12 
13 const service = axios.create(config)
14 
15 // POST 传参序列化
16 service.interceptors.request.use(
17   config => {
18     if (config.method === 'post') config.data = qs.stringfy(config.data)
19     return config
20   },
21   error => {
22     return Promise.reject(error)
23   }
24 )
25 
26 // 返回结果处理
27 service.interceptors.response.use(
28   res => {
29     return res.data
30   },
31   error => {
32     return Promise.reject(error)
33   }
34 )
35 
36 
37 const get = (url) => {
38   let temp = API[url]
39   let URL = `${API_URL}${temp}`
40   return service({
41     method: 'get',
42     url:URL
43   })
44 
45 }
46 
47 const post = (url, params, showLoading) => {
48   let temp = API[url]
49   let URL = `${API_URL}${temp}`
50   axios.post(URL, params, {
51     showLoading: showLoading
52   })
53 }
54 
55 export default {
56  get
57 }

View Code