Nuxt.js + koa2 入门

nuxt.js项目初始化

官方api文档

Nuxt是基于Vue的一个应用框架，采用服务端渲染（SSR），可以让用户的Vue单页面应用（SPA）也可以有利于SEO。
非常方便做vue ssr：省去了很多配置的过程
安装项目：
1. 由于使用的是vue3，vue2的很多命令不能用
npm install -g @vue/cli-init
2. 然后进行初始化项目
vue init nuxt-community/koa-template nuxt-learn
3. 进入项目文件,安装模块
cd nuxt-learn
npm install
4. 启动项目
npm run dev
如果vue是vue3以上的版本，会出现初始化模板错误 必须调整三个插件的版本才能继续跑通
backpack-core 升级到最新版本
eslint3+ 和 eslint-loader 2+也需要升级.
cnpm i backpack-core@latest eslint-loader@latest -D

说明项目启动成功：用 http://localhost:3000/ 访问

怎么关闭nuxt的eslint

找到文件nuxt.config.js,删掉build中的以下内容即可。

 build: {
    /*
     ** Run ESLINT on save
     */
   /*  extend (config, ctx) {
      if (ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    } */
  }

nuxt.js项目目录结构介绍

1. 在page文件夹里创建一个 .vue文件就是一个路由
2. layouts文件里面的全部都是模板文件
3. components文件里的全部都是公共组件
4. server文件里都是请求接口相关配置
5. nuxt.config.js文件里是nuxt的全局配置文件，全局配置文件在这里配置，可以点击这里查看api文档

自定义模板实现

1. 在layouts文件里面新建layouts/search.vue

<template>
  <div class="layout-search">
    <h2>search layout header</h2>
    <nuxt />
    <footer>search layout footer</footer>
  </div>
</template>
<script>
export default {};
</script>
<style lang="css" scoped>
.layout-search {
  color: red;
}
</style>

2. 在pages文件里面新建layouts/search.vue

<template>
  <div>
    <h3>search page</h3>
  </div>
</template>
<script>
export default {
    layout: "search",
};
</script>

效果如下

接口路由配置实现

1. 在server目录新建interface/city.js

import Router from 'koa-router'
const router = new Router({
  prefix: '/city'
})
router.get('/list', async (ctx) => {
  ctx.body = {
    list: ['北京', '上海', '江西']
  }
})
export default router

2. 在server/index.js中引入新建路由

import Koa from 'koa'
import { Nuxt, Builder } from 'nuxt'
// 引入新建接口路由
import cityInterface from './interface/city'
// 使用新建接口路由
app.use(cityInterface.routes()).use(cityInterface.allowedMethods())

3. 从新建接口中获取数据

<template>
  <div>
    <h3>search page</h3>
    <ul>
      <li>我是接口获取的数据</li>
      <li v-for="(item, index) in list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>
<script>
import axios from "axios";
export default {
  layout: "search",
  data() {
    return {
      list: ["11", "22", "33"]
    };
  },
  /* async mounted() {
    let res = await axios.get('/city/list')
    console.log(res)
    if(res.status===200){
      this.list = res.data.list
    }
  } */

  async asyncData() {
    let res = await axios.get("http://localhost:3000/city/list");
    if (res.status === 200) {
      return {
        list: res.data.list
      };
    }
  }
};
</script>

结果如下

注意
asyncData 方法
当调用接口是，如果使用mounted方法，页面渲染数据会发生闪烁

async mounted() {
    let res = await axios.get('/city/list')
    console.log(res)
    if(res.status===200){
      this.list = res.data.list
    }
  } 

应该私用asyncData方法:使得我们可以在设置组件的数据之前能异步获取或处理数据。

 async asyncData() {
    let res = await axios.get("http://localhost:3000/city/list");
    if (res.status === 200) {
      return {
        list: res.data.list
      };
    }
  }

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

使用 Vuex 状态树

对于每个大项目来说，使用状态树 (store) 管理状态 (state) 十分有必要。这就是为什么 Nuxt.js 内核实现了 Vuex。
1. 在项目根目录中新建文件夹 store,里面新建文件夹modules
2. 新建文件store/modules/city.js

const state = () => ({
    list: ['路飞','索隆','娜美']
  })

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

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

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

3. 新建文件store/modules/navbar.js

const state = () => ({
    appList: ['蒙奇D','罗罗诺亚']
  })

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

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

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

4. 新建文件store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import city from './modules/city'
import navbar from './modules/navbar'
Vue.use(Vuex)
const store = () => new Vuex.Store({
  modules: {
    city,
    navbar
  },
  actions: {
    //严格模式，不需要二次登录
    /* nuxtServerInit({
      commit
    }, {
      req
    }) {
      if (req.session.user) {
        commit('city', req.session.user)
      }
    } */
  }
})
export default store

vuex仓库建立完成
5. 在页面中渲染，找到pages/search.vue

<template>
  <div>
    <h3>search page</h3>
    <ul>
      <li>我是接口获取的数据</li>
      <li v-for="(item, index) in list" :key="index">{{item}}</li>
      <li>我是vuex中city模块里获取的数据</li>
      <li v-for="(item, index) in $store.state.city.list" :key="index">{{item}}</li>
      <li>我是vuex中mavbar模块里获取的数据</li>
      <li v-for="(item, index) in $store.state.navbar.appList" :key="index">{{item}}</li>
    </ul>
  </div>
</template>
<script>
import axios from "axios";
export default {
  layout: "search",
  data() {
    return {
      list: ["11", "22", "33"]
    };
  },
  /* async mounted() {
    let res = await axios.get('/city/list')
    console.log(res)
    if(res.status===200){
      this.list = res.data.list
    }
  } */

  async asyncData() {
    let res = await axios.get("http://localhost:3000/city/list");
    if (res.status === 200) {
      return {
        list: res.data.list
      };
    }
  }
};
</script>

效果如下

总结

最近学了很多新东西，但是都只停留在会简单安装，简单使用的阶段，对于这些刚学的内容(koa2,redis,nuxt等等)还需要经过漫长的总结，使用，才能更深入的了解其原理，只是会用是不够的。也不可能总依靠有人能会教你怎么使用，自己学会看api，查文档，自学，实践才是唯一的方法。虽然现在很多东西都不懂，但希望：这条路上一直有光！！！