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

时间:2021-08-22 07:34:43

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
-->

vue全家桶+Koa2开发笔记(5)--nuxt
在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开发经验分享,让你踩少点坑