Nuxt是一个框架,给开发者提供强大的体系结构。它可逐步采用,可用于创建从静态登录页面到复杂的企业就绪Web应用程序。
本质上通用,它支持不同的目标(服务器,无服务器或静态),并且服务器端呈现是可切换的。
它可以通过强大的模块生态系统进行扩展,可以轻松连接REST或GraphQL端点,收藏夹CMS,CSS框架等。PWA和AMP支持只是Nuxt项目的一个模块。
NuxtJS是您的Vue.js项目的基础,它提供了结构,使您可以放心地构建项目,同时保持灵活性。
同时Nuxtjs 支持vue2、vue router、vuex、vue server renderer、vue-meta。它的架构图如下:
它的工作流大致为:Incoming Request浏览器发出请求,服务端接收请求后检查有没有nuxtServerlnit配置项,有的话执行middelware,做任何你想做的功能,validate()配合路由做验证,asyncDate()、fetch()用来获取数据,区别在于前者用来渲染组件,或者用来修改vuex store。
一、Nuxt.js的安装
vue init nuxt-community/koa-template
二、路由示例
import Router from 'koa-router'
const router = new Router({
prefix: '/city'
})
router.get('/list', async (ctx) => {
ctx.body = {
list: ['长沙', '武汉']
}
})
export default router
三、页面模板示例
公共组件放在模板里,新建的页面会默认找到模板文件,模板是自定义的,都会带出来。
在layouts下都是模板,没有声明时都是用default.vue。如下图所示:
四、异步数据示例
asyncData方法:有时,我们只想获取数据并在服务器上预渲染而不使用存储。 asyncData每次在加载页面组件之前都会调用。导航到其他路由时,它将一次称为服务器端(在对Nuxt应用程序的第一个请求时),而在客户端称为一次。
Nuxt.js您提供了不同的使用方式asyncData:
返回promise,Nuxt.js将在渲染组件之前等待承诺被解决。
使用异步/等待(下面使用的方法)
显示数据:asyncData的结果将与数据合并。我们可以像过去那样在模板中显示数据:
<template>
<h1>{{ title }}</h1>
</template>
<template>
<div class="page">
Page is search
<ul>
<li v-for="(item,idx) in $store.state.navbar.app" :key="idx">{{item}}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
layout: 'search',
data() {
return {
list: []
}
},
async asyncData() {
let {status, data: {list}} = await axios.get('http://localhost:3000/city/list')
if (status === 200) {
return {
list
}
}
}
}
</script>
<style lang="css">
</style>
以上就是Nuxt.js的基础示例,想要更深入的了解可以查看官网文档:https://nuxtjs.org/