安装和启动nuxt.js项目
npx create-nuxt-app <项目名>
npm run dev
在pages目录下创建的vue组件会直接展示在页面上,也就是在创建的v这个ue组件时一起创建了一个aaa的路由
假如创建了一个aaa.vue组件,那么访问http://localhost:3000/aaa就能直接访问到这个组件页面
示例:创建一个服务端接口来返回数据
在server目录下创建interface目录,此目录下新建city.js路由文件,写入
const router = require('koa-router')()
router.prefix('/city')
router.get('/list', async (ctx) => {
ctx.body = ['beijing', 'tianjing']
})
module.exports = router
我们只是声明了这个路由,还需要在server的index.js入口文件中引入这个路由
const ciryInterface = require('./interface/city')
// app.use(ctx => {
// ctx.status = 200
// 在这之后调用ciryInterface
app.use(ciryInterface.routes()).use(ciryInterface.allowedMethods())
然后新建一个aaa.vue中使用axios获取数据并展示,这样就获取了服务端的接口数据并展示在页面上
<template>
<div>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'aaa',
data () {
return {
list: []
}
},
async mounted () {
let {status, data: {list}} = await axios.get('/city/list')
if (status === 200) {
this.list = list
}
}
}
</script>
但是这样的方式数据并没有渲染进浏览器中,而是直接从服务端获取,所以我们在浏览器渲染之前要异步的去获取 数据
所以我们要把mounted改成异步的asyncData
asyncData用来处理组件的数据,fetch用来处理Vuex的数据
async asyncData () {
let {status, data: {list}} = await axios.get('/city/list')
if (status === 200) {
return {
list
}
}
}
Vuex示例
在store下形成图示目录
city.js和bavbar.js中分别写入
const state = () => ({
list: ['a','b']
})
const mutations = {
add (state, text) {
state.list.push(text)
}
}
const actions = {
add: ({commit}, text) => {
commit('add', text)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
const state = () => ({
app: []
})
const mutations = {
add (state, text) {
state.app.push(text)
}
}
const actions = {
add: ({commit}, text) => {
commit('add', text)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
index.js中导入这2个模块并使用Vuex
import Vue from 'vue'
import Vuex from 'vuex'
import city from './modules/city'
import navbar from './modules/navbar'
Vue.use(Vuex)
const store = {
modules: {
city,
navbar
},
actions: {}
}
export default store
然后在aaa.vue中以$store.state.city.list方式使用这个公用数据,就可以在/aaa页面显示数据了
先使用state总数据,查找总数据下的city模块下的list数据
<template>
<div>
<ul>
<li v-for="(item,index) of $store.state.city.list" :key="index">{{item}}</li>
</ul>
</div>
</template>
nuxt.js基础总结
我们在做项目时要写页面,放在components目录下,
我们想用静态资源,放在assets目录下
我们想对页面的一些结构做一些复用,放在layouts目录下,利用layout模板复用
我们想去创建路由,就用好pages目录,在pages下的每一个组件都是一个页面
我们想共用一些数据,放在store目录下
我们想用服务端数据渲染,可以在pages下的组件中使用async asyncData ()函数和axios异步获取数据
如果在初始时刻想提交一些状态,可以用async fetch ()