Node.js

Nuxt.js + koa2 入门

Nick · 2月23日 · 2020年 · 本文4286字 · 阅读11分钟2,167

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
Nuxt.js + koa2 入门-左眼会陪右眼哭の博客
说明项目启动成功:用 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项目目录结构介绍

Nuxt.js + koa2 入门-左眼会陪右眼哭の博客
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>
  1. 在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
  1. 在server/index.js中引入新建路由
import Koa from 'koa'
import { Nuxt, Builder } from 'nuxt'
// 引入新建接口路由
import cityInterface from './interface/city'
// 使用新建接口路由
app.use(cityInterface.routes()).use(cityInterface.allowedMethods())
  1. 从新建接口中获取数据
<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>

结果如下
Nuxt.js + koa2 入门-左眼会陪右眼哭の博客
注意
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
  }
  1. 新建文件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
  }
  1. 新建文件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,查文档,自学,实践才是唯一的方法。虽然现在很多东西都不懂,但希望:这条路上一直有光!!!

0 条回应
在线人数:1人 来访统计
隐藏