Vue SSR Nuxt 初探

1. 准备

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

1.1 初始化项目

npx create-nuxt-app nuxt-demo

> Generating Nuxt.js project in xx/code/nuxt-demo
? Project name nuxt-demo
? Project description My fantastic Nuxt.js project
? Use a custom server framework koa
? Choose features to install Axios
? Use a custom UI framework element-ui
? Use a custom test framework none
? Choose rendering mode Universal
? Author name xx
? Choose a package manager npm

1.2 报错

执行cd nuxt-demo && npm run dev 报错

error  in ./server/index.js

Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.

由于element-ui更新，nuxt依赖旧的模块导致，降级到旧版本element-ui即可

npm i element-ui@2.7.2 -S

2.nuxt 基础

• 路由
• 模板
• 异步数据
• vuex

2.1 路由

page目录下的文件名即路由（创建即配置）

2.2 模板

模板在layouts目录下
page目录下的组件，会插入到layout组件中nuxt标签中
page下的vue组件，可以指定使用模板

// page/about.vue
export default {
    name: 'about',
    layout: 'about'
}

// layout/about.vue
<template>
  <div>
    <h1>about header</h1>
    <nuxt />
    <div class="footer">about footer</div>
  </div>
</template>

2.3 异步数据

2.3.1 服务端接口

接口路由

// server/interface/city.js
const Router = require('koa-router')

const router = new Router({
  prefix: '/city'
})

router.get('/list', async(ctx) => {
  ctx.body = ['北京', '上海']
})

module.exports = router

使用路由中间件

// server/index.js
...
const cityInterface = require('./interface/city')
...
app.use(cityInterface.routes(), cityInterface.allowedMethods())
...

2.3.2 客户端请求数据

// page/about.vue
...
async created() {
   this.list = await this.$axios.$get('/city/list')
}

2.3.3 服务端数据渲染

// page/about.vue
...
async asyncData({ $axios }) {
  const list = await $axios.$get('/city/list')
  return { list }
}

2.4 vuex 使用

Nuxt.js 会尝试找到应用根目录下的 store 目录，如果该目录存在，它将做以下的事情：

引用 vuex 模块
将 vuex 模块 加到 vendors 构建配置中去
设置 Vue 根实例的 store 配置项
Nuxt.js 支持两种使用 store 的方式，你可以择一使用：

普通方式： store/index.js 返回一个 Vuex.Store 实例
模块方式： store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 （当然，index 是根模块）

fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据

// store/city.js
export const state = () => ({
  list: []
})

export const mutations = {
  add (state, text) {
    state.list = text
  }
}

export const actions = {
  async ADD ({ commit }) {
    const data = await this.$axios.$get('/city/list')
    commit('add', data)
  }
}

// page/about.vue
export default {
    computed: {
      lists () {
        return this.$store.state.city.list
      }
    },
    async fetch ({ store, params }) {
      await store.dispatch('city/ADD');
    }
}

Classic mode for store/ is deprecated and will be removed in Nuxt 3报错解决
由于Nuxt对store做了一个是否方法的判断，如果我们export的是一个方法就会出现本文中的警告信息。可以直接export我们的state、mutations、actions等等。不使用 new Vuex.Store(...)方式