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開發經驗分享，讓你踩少點坑