一、Nuxt.js是什么
二、Nuxt.js的使用方式
- 初始项目
- 已有的Node.js服务端项目
- 直接吧Nuxt当做一个中间件集成到Node Web Server 中
- 现有的Vue.js项目
- 非常熟悉Nuxt.js
- 至少百分之十的代码改动
三、从头开始新建项目
mkdir <项目名> // 创建文件夹
cd <项目名> // 进入文件目录
npm init -y // 初始化package.json文件
npm install --save nuxt // 安装nuxt包
// 修改package.json 文件，创建命令
// 下面的配置使得我们可以通过运行 npm run dev 来运行 nuxt。
{
"name": "my-app",
"scripts": {
"dev": "nuxt"
}
}
- 创建第一个页面 pages/index.vue
<template>
<h1>Hello world!</h1>
</template>
- 运行
npm run dev
// 现在我们的应用运行在 http://localhost:3000 上运行
四、NuxtJS案例代码分支说明
git init // 初始化本地仓库
- 创建 .gitignore 文件 把不需要git管理的资源文件排除
node_modules
.nuxt
- 查看
git status
- 添加所有文件至暂存区
git add .
- 提交
git commit -m '初始化Nuxt.js项目'
- 创建分支
git branch 02-router
- 查看分支
git branch
- 切换分支
git checkout 02-router
五、Nuxt.js 基础路由
假设 pages 的目录结构如下：
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'
}
]
}
六、路由-路由导航
- 切换并且新建分支
git checkout -b 03-路由导航
- a标签：它会刷新整个页面，不要使用
- nuxt-link组件
https://router.vuejs.org/zh/api/#router-link-props
要在页面之间使用路由，我们建议使用<nuxt-link>标签。
<template>
<nuxt-link to="/">首页</nuxt-link>
</template>
methods:{
onClick(){
this.$router.push('/')
}
}
七、路由-动态路由
- Vue Router 动态路由匹配
-
Nuxt动态路由
以下目录结构：
pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue
Nuxt.js 生成对应的路由配置表为：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
},
{
name: 'slug',
path: '/:slug',
component: 'pages/_slug/index.vue'
},
{
name: 'slug-comments',
path: '/:slug/comments',
component: 'pages/_slug/comments.vue'
}
]
}
你会发现名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件。
- 路由参数校验
export default {
validate({ params }) {
// 必须是number类型
return /^\d+$/.test(params.id)
}
}
如果校验方法返回的值不为 true或Promise中 resolve 解析为false或抛出 Error ， Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。
想了解关于路由参数校验的信息，请参考 页面校验 API。
八、路由-嵌套路由
Nuxt.js嵌套路由
你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。
假设文件结构如：
pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue
Nuxt.js 自动生成的路由配置如下：
router: {
routes: [
{
path: '/users',
component: 'pages/users.vue',
children: [
{
path: '',
component: 'pages/users/index.vue',
name: 'users'
},
{
path: ':id',
component: 'pages/users/_id.vue',
name: 'users-id'
}
]
}
]
}
九、路由-路由配置
- 参考文档
- 根目录新建 nuxt.config.js 文件
/**
* Nuxt 路由配置
* base 自定义根目录名称 整个单页面应用的所有资源可以通过 /demo/ 来访问
*/
module.exports = {
router: {
base: '/demo/',
// routes : 一个数组 路由配置表
// resolve : 解析路由组建路径
extendRoutes(routes, resolve) {
routes.push({
path: '/hello',
name: 'hello',
component: resolve(__dirname, 'pages/about.vue'),
})
},
},
}
十、视图-模板
image.png
十一、视图-布局
- 自定义布局
layouts 目录中的每个文件 (顶级) 都将创建一个可通过页面组件中的 layout 属性访问的自定义布局。
假设我们要创建一个并将其保存到layouts/blog.vue:
<template>
<div>
<div>我的博客导航栏在这里</div>
<nuxt />
</div>
</template>
然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局：
<template>
<!-- Your template -->
</template>
<script>
export default {
layout: 'blog'
// 当前默认父组件为blog
}
</script>
十二、异步数据 - asyncData
- 文档
- 基本用法
- 它会将asyncData 返回的数据融合组件data方法返回数据一并给组件
- 调用时机：服务端渲染期间和客户端路由更新之前
- 注意事项
- 只能在页面组件中使用,子组件中不能使用
- 没有this,因为它是在组件初始化之前被调用的
<template>
<div>
<h1>页面</h1>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "homePage",
/**
* 当你想要动态页面内容有利于SEO
* 或者是提升首屏渲染速度的时候
* 就在asyncData中发请求拿数据
*
* 拿到的数据最终会合并到data中
*/
async asyncData() {
const res = await axios({
method: "GET",
url: "http://localhost:3000/data.json",
});
return res.data;
},
/***
* 如果是非异步数据或者普通数据
* 则正常初始化到data中即可
*/
data(){
return{
foo:'bar'
}
}
};
</script>
<style>
</style>
十三、异步数据 - 上下文对象
<template>
<div>
<h1>{{ article.title }}</h1>
<div>{{ article.body }}</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "articalPage",
async asyncData(context) {
const { data } = await axios({
method: "GET",
url: "http://localhost:3000/data.json",
});
// context.params.id 参数
const id = Number.parseInt(context.params.id);
return {
article: data.posts.find((item) => item.id === id),
};
},
};
</script>
<style>
</style>
