vue全家桶+Koa2开发笔记(5)--nuxt

1. nuxt项目初始化报错

• 下面是使用 koa 模板方法初始化一个项目，使用该方法需要将 nuxt 的版本降至1.4.2；
• 官方 https://zh.nuxtjs.org/guide/installation 还要提供了脚手架工具，可用使用最新的nuxt2.0版本初始化一个项目。

$ vue init nuxt-community/koa-template <project-name>
$ cd <project-name>
$ npm run dev

<!--
    1. 如果有报错： Plugin/Preset files are not allowed to export objects, only functions
        需要降低nuxt版本至1.4.2：
        npm uninstall nuxt
        npm install nuxt@1.4.2

    2.  升级eslint-plugin-html
        $ npm i eslint-plugin-html@^3
-->

在server文件夹中定义koa2的路由信息，并且在server/index中挂载注册路由信息；
在layouts文件夹中定义模板文件；在pages文件夹下编辑前端页面；

2、使用layout模板

例如在layouts文件夹中设置search模板

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

<script>
import MyFooter from '../components/Footer.vue'

export default {
  components: {
    MyFooter
  }
}
</script>

这里注意 <nuxt>相当于 vue-router 中的

<!-- 对应的组件内容渲染到router-view中 -->
<router-view></router-view>   

然后在 page 文件中 引入该模板：

<script>
export default {
  layout:'search',
}
</script>

3、自己定义接口并获取接口

定义接口在koa-router，获取接口数据在page vue中：

在server/interface/city 文件下，设置接口信息

const router = require('koa-router')()
router.prefix('/city')
router.get('/list', (ctx) => {
    ctx.body = {
        list:['北京','天津']
    }
})
module.exports = router

然后在server/index.js文件下挂载注册：

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

app.use(city.routes(), city.allowedMethods())

以上为服务器端接口设置，接下来是前端页面请求数据：

<template>
  <div>
      <ul>
          <li v-for="(item,idx) in cities" :key="idx"> {{item}} </li>
      </ul>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  layout:'search',
  data(){
      return {
          cities:[]
      }
  },
//   async mounted() { //该方法是前端渲染页面
//     let cities;
//     let {status,data} = await axios.get('/city/list');
//     console.log(data.list); //在浏览器端出现
//     if(status == 200){
//         this.cities = data.list
//     }
//   },
  async asyncData() { //再render之前  获取异步数据 是服务器端渲染页面
    let cities;
    let {status,data} = await axios.get('http://localhost:3000/city/list');//由于是服务端渲染，需写全路径
    console.log(data.list);//在服务器端出现
    if(status == 200){
         return {
            cities:data.list //return返回data同名数据
         }
    }
  }
}
</script>

<style scoped>

</style>

4. 引入vuex 框架

注意引入vuex 使用普通方式的状态树，需要添加 store/index.js 文件，并对外暴露一个 Vuex.Store 实例：

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

Vue.use(Vuex)//安装注册vuex

const store = () => new Vuex.Store({//实例话vuex，并引入两个vuex定义的函数
    modules:{
        citys,
    }
})
export default store

如上所示，需要实例化 vuex再抛出，和之前直接抛出 vuex的不一样。

5 见文章    Nuxt开发经验分享，让你踩少点坑