Nuxt学习_基础知识(一)

news2024/11/24 16:17:40

文章学习来源,nuxt中文网

1. 安装nuxt

  • 指令
    • npx create-nuxt-app t_nuxt
    • yarn create nuxt-app f_nuxt
  • 执行指令后按需选择添加自己所需要的相关依赖,若安装出现报错等问题
    • 清除npm、yarn缓存 npm cache clean --force yarn cache clean
    • 切换安装命令
    • 切换包管理工具
  • cd t_nuxt -> npm run dev

2. 路由信息

  • 无需配置路由信息,在pages下面创建文件自动生成对应的路由配置
  • 若pages下面是文件夹/页面.vue,会识别成 /文件夹/页面.vue路径

2.1 根据目录生成路由信息

通过pages下面的目录结构,会自动生成对应的路由信息,无需单独设置路由文件并在其中定义规则,动态路由以下划线_为开头

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue

以上页面结构对应的路由信息是

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: '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?',如果想将其设置为必选的,需要在其对应的目录下一级,创建一个index.vue文件,比如/:slug

2.2 路由参数校验

若我们想要在详情页中,规定了对应的详情页根据列表中具体的某个id来实现跳转,为了保障合法性,规定id只为纯数字类型,那么我们在对应动态路由页面可以对当前页面路由进行参数校验。

在对应动态路由页面增加validate方法,按照自定义规则对内容进行校验,如果校验结果为true,则正常运行与展示,如果返回结果为false,nuxt将自动加载错误页面

  validate({params}) {
    return /^\d+$/.test(params.id)
  },

3. 实现页面切换时的动画效果

3.1 nuxt.config.js 配置全局css文件

  css: [
    '@/assets/css/main.css'
  ],

3.2 全局css文件定义

  • assets/css/main.css
.page-enter-active, .page-leave-active {
  transition: opacity 0.5s;
}
.page-enter, .page-leave-to /* .page-leave-active 在 <2.1.8 版本中 */ {
  opacity: 0;
}

.test-enter-active,
.test-leave-active {
  transition: opacity 0.5s;
}
.test-enter,
.test-leave-active {
  opacity: 0;
}

我们看到有两种动画过渡样式,page-X代表页面间切换默认的动画效果,若还有其他类型的切换效果,比如下面的test-X,我们可以在对应页面中进行配置

export default {
	transition: 'test'
}

3.3 页面跳转

  • <nuxt-link to="/">返回首页</nuxt-link>
  • this.$router.push('/')

4. 路由中间件

中间件允许您定义一个自定义函数在一个页面或一组页面渲染之前,中间件放置在middleware目录下,文件名称就是中间件的名称,例如:我们可以在页面渲染前确认当前页面是否有访问权限。中间件可以修改context中的内容信息

4.1 定义中间件功能

export default function (context) {
  console.log(context, '获取到的context指的是什么')
}

4.2 全局应用中间件

全局中间件在nuxt.config.js中定义

export default {
  router: {
    middleware: 'globalSolve', // 中间件的名称就是定义中间件那个文件的文件名
  },
}

4.3 部分页面应用中间件

在页面中配置middleware

export default Vue.extend({
	middleware: 'auth',
})

4.4 中间件执行流程顺序

  • nuxt.config.js
  • 匹配布局
  • 匹配页面

4.5 中间件异步执行

中间件可以异步执行,只需要返回一个Promise或使用第二个callback作为第一个参数

import axios from 'axios'

export default function ({ route }) {
  return axios.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}

5. 视图布局

页面布局代码,放置在layouts文件夹中,常见的布局方式有导航栏、侧边栏、底部栏等等,我们可以在layouts中将不同类型的布局进行定义,在对应页面中进行引入

5.1 全局默认layouts

layouts布局分为全局和部分,layouts/default.vue为全局默认布局,在所有页面都自动应用,除非在页面的layout中定义了其他的layout,不配置的默认全部执行default.vue

layouts/default.vue

<template>
  <div class="flex">
    <div class="left">
      定义一个侧边栏吧
    </div>
    <div class="right">
      <nuxt /> // 表示布局中将自定义内容在此处显示,如若不加nuxt占位符,只会展示这个default.vue中的内容,不会展示对应路由页面文件中定义的内容
    </div>
  </div>
</template>
<style scoped>
.flex {
  display: flex;
}
.left {
  width: 300px;
  min-height: 100vh;
  background-color: aqua;
}
.right {
  flex: 1;
  background-color: antiquewhite;
}
</style>

5.2 自定义布局

全局有默认布局,但如果部分页面有其他的布局方式,可以在页面中设置layout来覆盖全局默认的布局方式

例如只有部分页面有header,我们在layouts/header.vue中定义header方式的布局

layouts/header.vue

<template>
  <div>
    <div class="top">
      顶部导航栏
    </div>
    <div>
      <nuxt />
    </div>
  </div>
</template>
<style scoped>
.top {
  height: 88px;
  width: 100vw;
  background-color: burlywood;
}
</style>

在对应使用页面中应用header布局方式
pages/xx.vue页面中

export default Vue.extend({
  name: 'IndexPage',
  layout: 'header',
})

5.3 错误页面

5.3.1 默认错误页面

当跳转过程中有发生错误页面时,可以有一个默认的全局错误页面,但如果在不同的错误情形中有一些自定义的错误展示时,此时我们可以通过定制错误模板传参数的方式实现自定义错误页面

layouts/error.vue

<template>
  <div>
    <h1>当前页面似乎发生了一些问题</h1>
    <nuxt-link to="/">返回至首页</nuxt-link>
  </div>
</template>

5.3.2 自定义错误页面

  • layouts/error.vue 错误信息页面
<template>
  <div>
    <h1 v-if="error.statusCode === 404">页面未找到</h1>
    <h1 v-else>发生错误</h1>
    <nuxt-link to="/">返回首页</nuxt-link>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  props: ['error'],
  layout: 'error-layout'
})
</script>
  • layouts/error-layout.vue 错误信息模板页面
<template>
  <div>
    <h1>公共错误页面头部</h1>
    <nuxt />
    <h1>公共错误页面底部</h1>
  </div>
</template>

5.4 页面

nuxt中page页面组件实际上是Vue组件,在nuxt.js中为这些页面中增加了一些新的配置项(对应了nuxt.js提供的功能特性),方便我们可以快速开发
在这里插入图片描述

5.5 注意事项

  • 布局layout中一定要增加<nuxt />标签,标签所占的位置就是页面除了布局外其他定义的内容所在的位置,相当于slot,若无该标签,则所有页面都展示布局内容,其他内容无法显示

6.注意事项

  • index页面无需路由拼接,直接/路径
  • pages页面不可名称重复,识别重复不区分大小写
  • <template>模板之间只有一个根标签
  • 在页面中使用components组件,无需import,直接使用即可
  • 在components中,若想对组件用文件夹分类,直接使用文件夹中页面.vue组件的名称即可完成使用,也无需import
  • 使用this.$router.push等方法在TypeScript状态下会有警告,可以通过以下方法来进行解决
    import Vue from "vue";
    export default Vue.extend({
      methods: {
        backToHome() {
          this.$router.push('/')
        }
      }
    })
    

如果有用,点个赞呗~

总结用法,希望可以帮助到你,
我是Ably,你无须超越谁,只要超越昨天的自己就好~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2058421.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

NSIS - 创建桌面应用程序(Client-Side, CS 或者称为本地应用程序)的安装包

B站视频 C# winform Costura.Fody将多个dll打包生成一个可执行的exe文件中_哔哩哔哩_bilibili 博客 NSIS打包教程 Wnform程序打包-罗分明网络博客 补充:(以下面代码为例) ; 该脚本使用 HM VNISEdit 脚本编辑器向导产生; 安装程序初始定义常量 !define PRODUCT_NAME "sql…

9个超强查找下载化学学科文献的数据库 建议收藏

一、CAS&#xff08;美国化学文摘社&#xff09;数据库 CAS SciFinder Discovery Platform 是由全球科学信息引领者CAS&#xff08;美国化学文摘社&#xff09;出品的新一代的权威科学研究工具&#xff0c;是化学及相关学科智能研究平台&#xff0c;提供全球全面、可靠的化学及…

图片转PDF?小case!这几步操作,让你秒变职场小旋风

嘿&#xff0c;大家在忙碌的工作里&#xff0c;经常得处理一堆文件和照片&#xff0c;尤其是当你想把一堆照片弄成一个PDF文件时&#xff0c;这事儿就显得特别重要。不管是为了做报告、提项目建议还是整理日常工作资料&#xff0c;把照片转成PDF格式&#xff0c;都能让我们工作…

知识付费小程序引领线上直播

亲爱的朋友们&#xff0c;欢迎来到“探索未知领域&#xff0c;知识付费小程序引领知识新探索”线上直播课程&#xff01; 在这个信息爆炸的时代&#xff0c;知识的获取从未如此便捷&#xff0c;但高质量、有深度的知识却仍需我们精心筛选。本次直播课程&#xff0c;将聚焦于知识…

conda切换32位运行环境,解决无法在64位系统中安装32位py

当前系统大部分都64位的&#xff0c;我的conda也是64位的&#xff0c;但是如果需要创建32位的py环境&#xff0c;会发现 conda create -n DouyinLive32 python3.7 --force创建的仍然是32位的&#xff0c;为此我们可以使用切换命令切换。 按一下Windows键&#xff0c;输入Prom…

大数据-94 Spark 集群 SQL DataFrame DataSet RDD 创建与相互转换 SparkSQL

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

数据资产入表,全流程实施指南!

数据成为生产要素已是社会共识&#xff0c;但不是所有数据都有资产价值。数据资源当中被重复使用的那部分才会资产化&#xff0c;具有流通中的定价&#xff0c;有些数据资产被专业开发变成数据产品&#xff0c;具有商品价值。从数据原始资源到数据产品&#xff0c;再到数据资产…

华为LTC流程体系的内涵(附PPT分享)

往期回顾&#xff1a; 企业4A架构&#xff1a;数字化转型的底层方法论&#xff08;附TOGAF资料下载&#xff09; PPT分享&#xff1a;数据治理的方法论、设计思路与方案&#xff08;干货&#xff09; 浅谈数字化转型方法论 110页PPT:xx业务流程优化&#xff08;BPR&#xff…

Linux压缩和解压

目录 压缩和解压类 gzip/gunzip指令 zip/unzip指令 tar指令 压缩和解压类 gzip/gunzip指令 gzip用于压缩文件&#xff0c;gunzip用于解压缩文件。 解压后去掉了gz的后缀。 zip/unzip指令 ​​​​​​​ 将文件压缩后发给别人&#xff0c;别人再解压。 将整个文件压…

Python | Leetcode Python题解之第354题俄罗斯套娃信封问题

题目&#xff1a; 题解&#xff1a; class Solution:def maxEnvelopes(self, envelopes: List[List[int]]) -> int:if not envelopes:return 0n len(envelopes)envelopes.sort(keylambda x: (x[0], -x[1]))f [1] * nfor i in range(n):for j in range(i):if envelopes[j]…

利用srs进行视频流转发

框图如下 docker-compose.yaml如下 rtmp2rtc.conf的配置如下 就增加了 #配置如下 forward {enabled on;#开启转发backend http://192.168.0.131:6789/api/v1/forward; #有视频流数据后会调用这个接口} #回调的参数如下 Received payload: {actionon_forward, server_idvid-k2…

字节微前端框架Garfish

Garfish 是字节跳动开源的微前端框架&#xff0c;旨在应对现代 Web 应用在前端生态繁荣与应用日益复杂化背景下的挑战。本文将介绍如何使用 Garfish&#xff0c;提供代码示例&#xff0c;并与另一流行的微前端框架 Qiankun 进行对比分析。 安装 Garfish 首先&#xff0c;安装…

深度学习11--GAN进阶与变种

基础 GAN 存在的问题 在开始讲解变种之前&#xff0c;首先讲一下GAN 存在的问题。第一个问题就是判别器D太强了&#xff0c;损失都是0。假设判别器D能力强&#xff0c;G vl生成的图片与真实图片相差巨大&#xff0c;G v2生成的图片与真实图片相差不多&#xff0c;但是判别器都能…

01. 真正实现一键自动化生成pdf报告

easypdf使用手册 1. 项目介绍1.1 关于1.2 easypdf 有什么优势1.2 easypdf 可以用来做什么1.3 我们该做哪些准备&#xff1f;如何获取easypdf&#xff1f;1.4 项目演示 文章头部展示的附件pdf文档easypdf是项目执行生成的pdf文档 1. 项目介绍 1.1 关于 \qquad easypdf 是我在基…

Floyd算法(最短路问题)

文章目录 Floyd算法介绍Floyd算法思路代码及讲解 Floyd算法介绍 Floyd算法是一种用于找出加权图中所有顶点间最短路径的动态规划方法。它通过逐步考虑每个顶点作为中转点&#xff0c;检查是否有更短路径。算法首先初始化一个权值矩阵&#xff0c;然后通过三层循环更新矩阵&…

linux操作系统命令-文件系统-用户系统-网络-磁盘-进程-常用特殊字符-重定向-

Shell命令格式 命令提示符&#xff1a; 通常显示为 用户名主机名:目录名 $ 或 用户名主机名:目录名 #&#xff08;对于root用户&#xff09;。~ 表示当前用户的家目录。 命令格式&#xff1a; bash $ 命令 [-选项] [参数1] [参数2] ... $ 或 # 是命令提示符&#xff0c;$…

Go操作Redis基础方法小全

前言 在前一篇文章中&#xff0c;我们聊了Go操作Redis安装和使用&#xff0c;接下来这篇内容&#xff0c;就简单说一下&#xff0c;Go中操作Redis基础方法&#xff0c;通常是通过第三方库来实现的&#xff0c;如go-redis/redis&#xff08;现在可能已经是v9或更高版本&#xf…

宋红康JVM调优思维导图

文章目录 1. 概述2. JVM监控及诊断命令-命令行篇3. JVM监控及诊断工具-GUI篇4. JVM运行时参数5. 分析GC日志 课程地址 1. 概述 2. JVM监控及诊断命令-命令行篇 3. JVM监控及诊断工具-GUI篇 4. JVM运行时参数 5. 分析GC日志

ubuntu安装minio

# 下载MinIO的可执行文件 curl -O https://dl.min.io/server/minio/release/linux-amd64/minio # 添加执行权限 chmod x minio # 运行MinIO (需要先创建存储数据和存储存储桶的目录) nohup ./minio server /home/lighthouse/minioDir/data /home/lighthouse/minioDir/bucke…

[JAVA]创建多线程的三种方式与区别

继承Thread类创建线程实现Runnable接口创建线程Callable接口创建线程 要学习创建线程&#xff0c;我们要通过代码来演示&#xff0c;这里我们可以通过实现以下参赛者跑步的场景来展开。 模拟以下场景 模拟10秒短跑程序 假设&#xff0c;这里有三名参赛者&#xff0c;十秒钟时…