Vue全家桶+SSR+Koa2全栈开发美团网⑤——Nuxt.js基础

安装和启动nuxt.js项目

npx create-nuxt-app <项目名>

npm run dev

在pages目录下创建的vue组件会直接展示在页面上，也就是在创建的v这个ue组件时一起创建了一个aaa的路由

假如创建了一个aaa.vue组件，那么访问http://localhost:3000/aaa就能直接访问到这个组件页面

示例：创建一个服务端接口来返回数据

在server目录下创建interface目录，此目录下新建city.js路由文件，写入

const router = require('koa-router')()

router.prefix('/city')

router.get('/list', async (ctx) => {
  ctx.body = ['beijing', 'tianjing']
})

module.exports = router

我们只是声明了这个路由，还需要在server的index.js入口文件中引入这个路由

const ciryInterface = require('./interface/city')


// app.use(ctx => {
//   ctx.status = 200
// 在这之后调用ciryInterface

app.use(ciryInterface.routes()).use(ciryInterface.allowedMethods())

然后新建一个aaa.vue中使用axios获取数据并展示，这样就获取了服务端的接口数据并展示在页面上

<template>
  <div>
    <ul>
      <li v-for="(item,index) of list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'aaa',
  data () {
    return {
      list: []
    }
  },
  async mounted () {
    let {status, data: {list}} = await axios.get('/city/list')
    if (status === 200) {
      this.list = list
    }
  }
}
</script>

但是这样的方式数据并没有渲染进浏览器中，而是直接从服务端获取，所以我们在浏览器渲染之前要异步的去获取 数据

所以我们要把mounted改成异步的asyncData

asyncData用来处理组件的数据，fetch用来处理Vuex的数据

async asyncData () {
    let {status, data: {list}} = await axios.get('/city/list')
    if (status === 200) {
      return {
        list
      }
    }
  }

Vuex示例

在store下形成图示目录

 

city.js和bavbar.js中分别写入

const state = () => ({
  list: ['a','b']
})

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

const actions = {
  add: ({commit}, text) => {
    commit('add', text)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

const state = () => ({
  app: []
})

const mutations = {
  add (state, text) {
    state.app.push(text)
  }
}

const actions = {
  add: ({commit}, text) => {
    commit('add', text)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

index.js中导入这2个模块并使用Vuex

import Vue from 'vue'
import Vuex from 'vuex'
import city from './modules/city'
import navbar from './modules/navbar'

Vue.use(Vuex)

const store = {
  modules: {
    city,
    navbar
  },
  actions: {}
}

export default store

然后在aaa.vue中以$store.state.city.list方式使用这个公用数据，就可以在/aaa页面显示数据了

先使用state总数据，查找总数据下的city模块下的list数据

<template>
  <div>
    <ul>
      <li v-for="(item,index) of $store.state.city.list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

nuxt.js基础总结

我们在做项目时要写页面，放在components目录下，

我们想用静态资源，放在assets目录下

我们想对页面的一些结构做一些复用，放在layouts目录下，利用layout模板复用

我们想去创建路由，就用好pages目录，在pages下的每一个组件都是一个页面

我们想共用一些数据，放在store目录下

我们想用服务端数据渲染，可以在pages下的组件中使用async asyncData ()函数和axios异步获取数据

如果在初始时刻想提交一些状态，可以用async fetch ()