本文已参与「新人创作礼」活动，一起开启掘金创作之路。

SSR——性能优化，服务端渲染

方案一：Nuxt.js

• Nuxt.js是一个基于vue.js的通用应用框架
• 预设了利用vue.js开发服务端渲染所需要的各种配置
• 提供静态站点、异步数据加载、中间件支持、布局支持等

创建一个nuxt-app

• 运行 create-nuxt-app，确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）或者yarn

  npx create-nuxt-app <项目名>
  

  yarn create nuxt-app <项目名>
  

  命令执行起来后，可以选择一些框架，UI框架选择常用的element UI，服务端框架暂时先不选择，选择nuxt axios，mode选择Universal通用模式，选择jsconfig.json。选择完成后，开始安装依赖，安装完成后，我们看一下nuxt项目的目录结构

  在nuxt项目目录结构中并没有src目录，所有的文件全部存放在了根目录下，而且没有router，nuxt的内置功能会通过pages里的页面形成动态的路由

  • layouts 视图，用于组织应用的布局组件
  • pages 页面、用于形成路由
  • components 存放应用通用的vue组件，这些组件不会像页面组件那样有asyncData方法的特性
  • assets 资源目录，用于阻止未编译的静态资源，如less、sass或js
  • plugins 插件配置，集成一些第三方的资源的库
  • middleware 用于存放应用的中间件
  • static 存放应用的静态文件，这类文件不会被Nuxt.js调用webpack进行构建编译处理，类似vue应用里的public目录，最终被拷贝到dist目录

• 自己从零新建

  不使用 Nuxt.js 提供的 starter 模板，我们也可以从头开始新建一个 Nuxt.js 应用项目

  mkdir <项目名>
  cd <项目名>
  npm init
  npm install --save nuxt
  

  {
    "name": "my-app",
    "scripts": {
      "dev": "nuxt"
    }
  }
  

  Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置，创建 pages 目录：

  mkdir pages
  

  创建我们的第一个页面 pages/index.vue：

  <template>
    <h1>Hello world!</h1>
  </template>
  

  然后启动项目：

  npm run dev
  

Nuxt异步数据（axios.nuxtjs.org/setup）

nuxt.js扩展了vue.js，增加了一个asyncData方法，用于异步获取数据

asyncData方法会在组件（限于页面组件）每次加载之前被调用，在方法内是没有办法通过 this 来引用组件的实例对象。

Universal Mode

链接的预取

nuxt.js auth模块

\