NuxtJS基础
NuxtJS是什么？
NuxtJS是一个基于Vue生态的第三方开源服务端渲染应用框架
它可以帮助我们轻松的使用Vue技术栈构建同构应用
Github仓库：https://github.com/nuxt/nuxt.js
NuxtJS的几种使用方式
- 使用NuxtJS来初始化创建新的应用（推荐）
- 使用
create-nuxt-app - 手动从零创建
- 使用
- 对于已有的Node.js服务端项目，直接把Nuxt当做中间件集成到Node Web Server中
- 对于已有的Vue.js项目，在非常熟悉Nuxt.js的情况下，至少百分之十以上的代码改动来迁移到使用Nuxt.js构建前端SPA应用（不推荐）
从零开始创建NuxtJS应用
-
创建NuxtJS应用目录
nuxt-demo -
使用
npm init -y或yarn init -y初始化 -
安装NuxtJS相关依赖
npm i nuxt或yarn add nuxt -
修改
package.json文件，添加scripts选项"scripts": { "dev": "nuxt" }
-
新建
pages目录，并在其中创建index.vue页面组件<template> <div>hello nuxt</div> </template> <script> export default { } </script> <style> </style>
-
执行
npm run dev或yarn dev运行nuxt，nuxt根据默认的选项完成Client与Server端的编译，并启动相应的服务
image-20210201211847488
路由
基础路由
NuxtJS的路由默认使用约定式路由，即按照约定的规则，根据组件文件路径自动生成路由配置
NuxtJS约定，所有的视图组件应当存放在
pages目录下，nuxt在编译时会读取该目录下的所有.vue文件，并自动生成相应的路由配置
pages的目录结构
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
--| about.vue
NuxtJS自动生成的路由配置如下
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'
},
{
name: 'about',
path: '/about',
component: 'pages/about.vue'
},
]
}
我们可以在编译生成的.nuxt/router.js文件中查看到nuxt自动生成的路由配置
image-20210201221248477
路由导航
NuxtJS中路由导航的几种形式
-
a标签- 不推荐使用，会刷新整个页面
-
nuxt-link组件- 用法同vue的
router-link
- 用法同vue的
- 编程式导航
- 用法同vue
<template>
<div>
<h1>about me</h1>
<!-- a链接 会刷新页面 -->
<h2>a链接</h2>
<a href="/">首页</a>
<!-- router-link组件 用法同vue的router-link -->
<h2>router-link</h2>
<router-link to="/">首页</router-link>
<!-- 编程式导航 -->
<h2>编程式导航</h2>
<button @click="onClick">首页</button>
</div>
</template>
<script>
export default {
name: 'AboutPage',
methods: {
onClick () {
// 编程式导航
this.$router.push('/')
}
}
}
</script>
<style>
</style>
动态路由
NuxtJS的约定式路由支持动态路由，自动生成的动态路由配置与Vue的动态路由配置方式相同
NuxtJS约定使用下划线
_前缀的目录或者视图组件文件会被作为动态路由
pages的目录结构
pages/
--| _slug/
-----| index.vue
--| user/
-----| _id.vue
--| index.vue
NuxtJS自动生成的路由配置如下
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'slug',
path: '/:slug',
component: 'pages/_slug/index.vue'
},
{
name: 'user-id',
path: '/user/:id?',
component: 'pages/user/_id.vue'
},
]
}
-
pages/user/_id.vue生成的路由/user/:id?中包含了?，表示:id这个参数是可选的，如果希望:id参数必选，则必须在_id目录下创建index.vue，即pages/_id/index.vue -
动态路由中的参数同样可以使用
$route.params.xxx来进行获取
嵌套路由
NuxtJS的约定式路由支持嵌套路由，自动生成的嵌套路由配置与Vue的嵌套路由配置方式相同
NuxtJS约定创建嵌套路由时，需要创建一个
.vue视图组件文件，同时需要创建一个同名的目录，用来存放子视图组件在父组件
.vue文件内，需增加<nuxt-child/>作为子视图出口来展示子视图内容
pages的目录结构
pages/
--| user.vue
--| user/
-----| _id.vue
--| index.vue
NuxtJS自动生成的路由配置如下
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user.vue'
children: [{
path: ":id?",
component: 'pages/user/_id.vue',
name: "user-id"
}]
},
]
}
自定义路由
NuxtJS支持对路由进行一些额外的自定义配置
通过创建自定义配置文件
nuxt.config.js，并使用router选项进行配置（具体可使用的自定义配置项参考NuxtJS官网文档）
示例：
// nuxt.config.js
module.exports = {
router: {
base: '/abc', // 路由根路径
extendRoutes (routes, resolve) { // 扩展路由
routes.push({
name: 'hello',
path: '/hello',
component: resolve(__dirname, 'pages/about.vue')
})
}
...
}
}
视图
Nuxt视图结构
image-20210201232244578
模板
NuxtJS默认的HTML页面模板，页面渲染的内容最终会放入{{ APP }}中
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
也可以通过创建app.html文件来自定义页面模板（重启生效）
可以通过自定义app.html的方式来为页面添加额外的JavaScript、CSS文件的引入，官方更推荐通过nuxt.config.js的配置项来达到同样的效果
布局
NuxtJS默认的布局
<template>
<nuxt />
</template>
我们可以通过创建layouts/default.vue文件来扩展默认布局（重启生效）
layouts目录下也可以创建其他的布局文件，布局文件中需要添加<nuxt/>组件来显示页面主体内容，在需要使用该布局的视图组件文件中，通过layout选项来指定布局名称
异步数据
asyncData
NuxtJS扩展了Vue，增加了
ayncData方法，使我们能在设置组件数据之前能异步获取或处理数据，可以用来优化首屏渲染与SEO，普通数据则应当初始化到data方法中
-
基本用法
-
asyncData返回的数据会与组件data方法返回的数据融合一并提供给组件使用 - 在服务端渲染期间与客户端路由更新之前会被调用
-
-
注意事项
- 只能在页面组件中使用（可以通过页面组件获取异步数据后传递给子组件来使用）
- 没有
this，因为是在组件初始化之前被调用
上下文对象
asyncData接收一个上下文对象context作为参数，由于asyncData在组件初始化之前被调用而无法访问this，我们可以使用上下文对象context来访问上下文相关的一些属性，例如context.params或者context.route.params，等同于this.$route.params(详细的可访问的属性可以参考Nuxt官方文档)
网友评论