详解Vue基于 Nuxt.js 实现服务端渲染（SSR）

vue init nuxt-munity/starter-template MyProject

 "config": {
  "nuxt": {
   "host": "0.0.0.0",
   "port": "7788"
  }
 },

<template>
 <div>
  <my-header></my-header>
  <nuxt/>
  <my-footer></my-footer>
 </div>
</template>

router: {
 routes: [
  {
   name: 'index',
   path: '/',
   ponent: 'pages/index.vue'
  },
  {
   name: 'about',
   path: '/about',
   ponent: 'pages/about.vue'
  },
  {
   name: 'classroom',
   path: '/classroom',
   ponent: 'pages/classroom.vue',
   children: [
    {
     path: 'student',
     ponent: 'pages/classroom/student.vue',
     name: 'student'
    },
    { //定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或目录
     path: ':id',
     ponent: 'pages/classroom/_id.vue',
     name: 'classroom-id'
    }
   ]
  }
 ]
}

asyncData ({ params, error }) {
  return axios.get(`api/posts/${params.id}`)
  .then((res) => {
   return { name: res.data.name}
  })
  .catch((e) => {
   error({ statusCode: 404, message: 'not found' })
  })
 }

 build: {
  vendor: ['~/plugins/elementUI.js']
 },
 plugins: [
  {src: '~/plugins/elementUI.js'},
 ]

// axios.js

import Vue from 'vue'
import axios from 'axios'

const service = axios.create({
 baseURL: '/api'
})

Vue.prototype.$ajax = axios
export default service

build: {
 vendor: ['~/plugins/axios.js']
}

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import Axios from '~/plugins/axios.js';

Vue.use(Vuex)

const store = () => new Vuex.Store({
 state: {
  author: 'WiseWrong',
  info: ''
 },
 mutations: {
  setInfo (state, val) {
   state.info = val
  }
 },
 actions: {
  loadAboutMeInfo ({mit, state}) {
   return Axios.get(`/about`)
    .then(res => {
     console.log('ajax is suess')
     console.log(res.data.info)
     mit('setInfo', res.data.info)
    })
    .catch(err => {
     console.log('error')
    })
  }
 }
})

export default store

// about.vue 

<template>
 <section class="container">
  <div>
   <img src="~/assets/about.png" alt="">
  </div>
  <h1>{{$store.state.info}}</h1>
 </section>
</template>

<script>
export default {
 fetch({ store }) {
  return store.dispatch('loadAboutMeInfo')
 },
 name: 'about',
 data () {
  return {}
 }
}
</script>