Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。
npx create-nuxt-app nuxt-demo
> Generating Nuxt.js project in xx/code/nuxt-demo
? Project name nuxt-demo
? Project description My fantastic Nuxt.js project
? Use a custom server framework koa
? Choose features to install Axios
? Use a custom UI framework element-ui
? Use a custom test framework none
? Choose rendering mode Universal
? Author name xx
? Choose a package manager npm
执行cd nuxt-demo && npm run dev
报错
error in ./server/index.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.
由于element-ui更新,nuxt依赖旧的模块导致,降级到旧版本element-ui即可
npm i element-ui@2.7.2 -S
page目录下的文件名即路由(创建即配置)
模板在layouts目录下
page目录下的组件,会插入到layout组件中nuxt
标签中
page下的vue组件,可以指定使用模板
// page/about.vue
export default {
name: 'about',
layout: 'about'
}
// layout/about.vue
<template>
<div>
<h1>about header</h1>
<nuxt />
<div class="footer">about footer</div>
</div>
</template>
接口路由
// server/interface/city.js
const Router = require('koa-router')
const router = new Router({
prefix: '/city'
})
router.get('/list', async(ctx) => {
ctx.body = ['北京', '上海']
})
module.exports = router
使用路由中间件
// server/index.js
...
const cityInterface = require('./interface/city')
...
app.use(cityInterface.routes(), cityInterface.allowedMethods())
...
// page/about.vue
...
async created() {
this.list = await this.$axios.$get('/city/list')
}
// page/about.vue
...
async asyncData({ $axios }) {
const list = await $axios.$get('/city/list')
return { list }
}
Nuxt.js 会尝试找到应用根目录下的 store 目录,如果该目录存在,它将做以下的事情:
引用 vuex 模块
将 vuex 模块 加到 vendors 构建配置中去
设置 Vue 根实例的 store 配置项
Nuxt.js 支持两种使用 store 的方式,你可以择一使用:
普通方式: store/index.js 返回一个 Vuex.Store 实例
模块方式: store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 (当然,index 是根模块)
fetch 方法用于在渲染页面前填充应用的状态树(store)数据, 与 asyncData 方法类似,不同的是它不会设置组件的数据
// store/city.js
export const state = () => ({
list: []
})
export const mutations = {
add (state, text) {
state.list = text
}
}
export const actions = {
async ADD ({ commit }) {
const data = await this.$axios.$get('/city/list')
commit('add', data)
}
}
// page/about.vue
export default {
computed: {
lists () {
return this.$store.state.city.list
}
},
async fetch ({ store, params }) {
await store.dispatch('city/ADD');
}
}
Classic mode for store/ is deprecated and will be removed in Nuxt 3
报错解决
由于Nuxt对store做了一个是否方法的判断,如果我们export的是一个方法就会出现本文中的警告信息。可以直接export我们的state、mutations、actions等等。不使用 new Vuex.Store(...)
方式