Nuxt.js 基础
1）基本介绍
2) 基础使用
- 初始项目
- 官方文档
- 方式一：使用 create-nuxt-app
- 方式二：手动创建
- 已有的 Node.js 服务端项目
- 直接把 Nuxt 当做一个中间件集成到 Node Web Server 中
- 现有的 Vue.js 项目
- 非常熟悉 Nuxt.js
- 至少百分之 10 的代码改动
3）路由
- 基础路由
// 目录
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
// Nuxt.js 自动生成的路由配置如下
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}
- 动态路由
在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
- 嵌套路由
创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
Warning: 别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。
4）Nuxt.js 视图
- 结构
- 模板
定制化默认的 html 模板，只需要在 src 文件夹下（默认是应用根目录）创建一个 app.html 的文件
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
// 默认的内容最终会注入到这里
{{ APP }}
</body>
</html>
- 布局
可通过添加 layouts/default.vue 文件来扩展应用的默认布局。
提示: 别忘了在布局文件中添加 <nuxt/> 组件用于显示页面的主体内容。
<template>
<div>
<div>我的博客导航栏在这里</div>
//页面出口，类似于子路由出口
<nuxt />
</div>
</template>
- 页面
5）异步数据 --- asyncData
- 基本用法
- 它会将 asyncData 返回的数据融合组件 data 方法返回数据一并给组件
- 调用时机：**服务端渲染期间 **和 客户端路由更新之前
- 注意事项
- 只能在页面组件中使用
- 没有 this，因为它是在组件初始化之前被调用的
