关于Vue服务端渲染（nuxt）的简单学习

近期我司开始了一个新项目，由于上一个项目完成的差很少了，因此将这个项目交给了我（其实就是我先踩踩坑，后续你们在一块儿开发）。由于客户要求要作SEO优化，因此一开始的决定是使用原声js加jq作，我本身也花了俩三天时间来作了一个demo，可是老大以为效果不理想，周一上午开会决定用服务端渲染的形式实现，说实话到如今我还不是特别的可以理解这套框架的，可是仍是想把本身这几天遇到的问题，以及如何解决的跟你们一块儿分享一下（毕竟第一次在掘金上发表东西，欢迎你们吐槽 ---- >_< ）

Nuxt.js 是什么？

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

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

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

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

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

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

做为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。（官方说明-。- 建议你们在学习以前先将官方文档看一遍，大致有个了解而后再来进行实际操做）

安装Nuxt

好了，不吡吡了其余没用的了，下面开始正文；
使用Nuxt有两种方式：
1.使用官方给的新手模版：

$ vue init nuxt-community/starter-template <project-name>复制代码

project-name 是你创建的项目的名称

$ cd <project-name>
$ npm install # Or yarn复制代码

进入你创建好的项目的文件夹下 ，而后安装项目所须要的依赖；
建议使用yarn安装依赖

$ npm run dev复制代码

执行启动命令，启动成功以后打开浏览器输入：http://localhost:3000 就能够看到你创建的项目了

2.若是不想使用官方推荐的哪一种方式也能够本身手动配置一个（我的建议，新手上路仍是使用官方推荐的那种方式）
首先新建一个文件夹

$ mkdir <项目名>
$ cd <项目名>复制代码

而后在你创建的文件夹下新建一个package.json文件 该文件用来配置如何运行nuxt：

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}复制代码

上面配置咱们经过npm run dev来运行nuxt
安装nuxt：

npm install --save nuxt复制代码

而后新建一个pages文件夹

$ mkdir pages复制代码

在pages文件夹下新建一个index.vue文件（Nuxt.js 会依据 pages 目录中的全部 *.vue 文件生成应用的路由配置。）

<template>
  <h1>Hello Nuxt!</h1>
</template>复制代码

启动项目

$ npm run dev复制代码

最后打开浏览器访问 http://localhost:3000 就像能够了

本文将的是使用官方给的模版进行搭建的项目（毕竟我还年轻-。-）

项目目录结构

assets文件夹 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
components文件夹 用于放置项目公用的组件。
config文件夹 一些基本配置，好比 env.js fetch.js等。
layouts文件夹 用于组织应用的布局组件。
middleware文件夹 用于放置一些项目的中间件。
pages文件夹 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下全部的 .vue 文件并自动生成对应的路由配置。
plugins 用于放置项目所用到的插件，好比axios element-ui 等。
server 用于放置项目服务器配置，好比配置express 或者你本身作的假数据等。
static 用于放置一些静态文件，而且这个文件夹下的资源是不会被nuxt使用webpack进行打包编译的，服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下建立一个 index.js 文件可激活这些配置。
backpack.config.js是由于我项目中配置server使用的。
nuxt.config.js是nuxt相关的基础配置。
其中须要重点了解的是nuxt.config.js，nuxt.js在项目的搭建的时候已经给你配置好了一些相关的基础配置，当你的项目须要修改这些配置的时候，就须要在next.config.js进行操做了，他会将默认的配置进行覆盖，已达到你项目中须要的效果。官方连接

路由

在使用nuxt.js的过程当中你会发现你不须要进行路由的配置，只须要根据本身项目的需求将对应的文件建在pages文件夹下就能够了，nuxt.js会根据这个文件的目录结构自行的进行路由的配置。

视图

包括模版，页面，布局，html头部

数据处理

Nuxt.js 扩展了 Vue.js，增长了一个叫 asyncData 的方法，使得咱们能够在设置组件的数据以前能异步获取或处理数据。
你能够在你的页面里这样配置：

async asyncData () {
    let { data } = await axios.get('/api/teacherList')
    return {
      teacherList: data.teacherList
    }
}复制代码

asyncData方法会在组件（限于页面组件）每次加载以前被调用。它能够在服务端或路由更新以前被调用。（就是你们须要的服务端渲染 >_< ）

asyncData方法也具有错误处理的能力
Nuxt.js 在上下文对象context中提供了一个 error(params) 方法，你能够经过调用该方法来显示错误信息页面。params.statusCode 可用于指定服务端返回的请求状态码。

以返回 Promise 的方式举个例子：

export default {
  asyncData ({ params, error }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
    })
  }
}复制代码

固然也能够经过回调函数进行处理，这个文档将的也很是清楚

有同窗可能会问，那若是我要是须要作数据交互怎么办，其实这个更简单，就是跟你们平时作vue的项目是同样的：

methods:{
    getMore (){
        axios.get('/api/messageList').then((res)=>{
            this.messageList = this.messageList.concat(res.data);
        })
    }
}复制代码

vuex

vuex的使用其实和平时的vue项目中使用vuex是相似的，若是你在vue中可以熟练使用vuex，那么在nuxt当中对于你来讲也不会特别困难。这里我就不给你们将vuex里，我怕我越说你们可能与没法理解🤦 （我理解的vuex就是一个能够看成全局变量使用的一个东西，也有大佬将vuex比作是前端项目的数据库 nuxt中使用vuex文档）

server

最后跟你们说一下个人server吧
index是我使用express的一些配置，便于我写的假数据可以进行正常的请求
api文件里面是我本身配置的一些假数据。（这些数据简直不忍直视 -。- 你们凑合着看吧）

最后给你们附上个人项目地址（一个简单到爆的项目，欢迎你们的吐槽 🐶）