当前位置: 首页 > news >正文

Nuxt 菜鸟入门学习笔记三:视图

文章目录

  • 入口文件
  • 组件 Components
  • 页面 Pages
  • 布局 Layouts

Nuxt
Nuxt 官网地址: https://nuxt.com/

Nuxt 提供多个组件层来实现应用程序的用户界面。

  • 入口文件 App.vue
  • 组件 Components
  • 页面 Pages
  • 布局 Layouts

下面逐一进行介绍。

入口文件

默认情况下,Nuxt 会将 app.vue 文件视为入口点,并在应用程序的每个路由中呈现其内容。下面的代码片段是 app.vue 文件的基础代码结构:

// App.vue<template><div><h1>Welcome to the homepage</h1></div>
</template>

如果您熟悉 Vue,可能会想知道 main.js 在哪里(通常创建 Vue 应用程序的文件)。Nuxt 在幕后完成了这项工作。

组件 Components

大多数组件都是用户界面中可重复使用的部分,如按钮和菜单。在 Nuxt 中,您可以在 components/ 目录中创建这些组件,它们将自动在您的应用程序中可用,而无需显式导入。

  • 创建组件
    在 components 目录下创建 AppAlert.vue 文件,即是创建了一个名为AppAlert的组件,应用启动后,它就被自动加载,无需导入即可使用。
// components/AppAlert.vue<template><span class="warning"><slot /></span>
</template><style scoped>
.warning {color: orange;
}
</style>
  • 使用组件
    在其他页面(如 app.vue)中直接使用:
// app.vue<template><div><h1>Welcome to the homepage</h1><AppAlert>AppAlert Component.</AppAlert></div>
</template>

页面 Pages

页面代表每个特定路由模式的视图。pages/ 目录中的每个文件都代表了显示其内容的不同路由。

通过在 pages/ 目录下创建 .vue 文件以创建更多页面及其相应路由,并在 app.vue 中添加 <NuxtPage /> 组件来加载匹配当前路由模式的。

下面创建两个页面做示例:

  • 创建 pages/index.vue 文件
<template><div><h1>@ index page</h1><AppAlert>AppAlert Component.</AppAlert></div>
</template>
  • 创建 pages/about.vue 文件
<template><div><h1>@ about page</h1><AppAlert>AppAlert Component.</AppAlert></div>
</template>

创建的页面如何通过路由访问呢?此处先做简单介绍,后续会写一篇专门介绍路由的文章。

  • 首先需要 nuxt.config.ts 增加配置项 pages:true
  • 在 App.vue 文件中增加 <NuxtPage /> 组件来展示请求的路由对应文件内容。
  • pages 目录下 index.vue 文件将映射到应用程序的 / 根路由,其他文件则以文件名为路由。也就是说访问 http://localhost:3000 就展示 index.vue 的内容,访问 http://localhost:3000/about 就展示 about.vue 的内容

注意:pages/index.vue 只能通过 http://localhost:3000 来访问,不能通过 http://localhost:3000/index 访问(访问会报 404 错)。

布局 Layouts

布局是围绕包含多个页面的公共用户界面的页面的包装器,例如页眉和页脚显示。
布局是使用 组件显示页面内容的 Vue 文件。默认情况下将使用 layouts/default.vue 文件。
布局被放置在 layouts/目录中,使用时将通过异步导入自动加载。

如果您的应用程序中只有一个布局,我们建议您使用带有 NuxtPage 组件的 app.vue 代替。

默认布局的使用方法是将 <NuxtLayout> 添加到 app.vue 中。(更多自定义布局使用方法后续会写专篇文章来做分享)

  • 创建默认布局文件
// layouts/default.vue<template><div><div class="header">header Block</div><slot /><div class="footer">footer Block</div></div>
</template><style scoped>
.header {border-bottom: 1px solid #e0e0e0;text-align: center;
}.footer {border-top: 1px solid #e0e0e0;text-align: center;
}
</style>
  • 使用布局

需要在 app.vue 文件中添加 <NuxtLayout> 组件:

// app.vue<template><div><NuxtLayout><NuxtPage /></NuxtLayout></div>
</template>

此时再访问 http://localhost:3000 和 http://localhost:3000/about 就可以看到 layout 的效果了。

相关文章:

Nuxt 菜鸟入门学习笔记三:视图

文章目录 入口文件组件 Components页面 Pages布局 Layouts Nuxt 官网地址&#xff1a; https://nuxt.com/ Nuxt 提供多个组件层来实现应用程序的用户界面。 入口文件 App.vue组件 Components页面 Pages布局 Layouts 下面逐一进行介绍。 入口文件 默认情况下&#xff0c;Nu…...

Python Opencv实践 - 霍夫线检测(Hough Lines)

import cv2 as cv import numpy as np import matplotlib.pyplot as plt import randomimg cv.imread("../SampleImages/GreenBoard.jpg") print(img.shape) plt.imshow(img[:,:,::-1])#将图像转为二值图 gray cv.cvtColor(img, cv.COLOR_BGR2GRAY) plt.imshow(gra…...

Weblogic漏洞(四)之 CVE-2018-2894 任意文件上传漏洞

CVE-2018-2894 任意文件上传漏洞 漏洞影响 Weblogic受影响的版本&#xff1a; 10.3.6.012.1.3.012.2.1.212.2.1.3 漏洞环境 此次我们使用的是vnlhub靶场搭建的环境&#xff0c;是vnlhub中的Weblogic漏洞中的CVE-2018-2894靶场&#xff0c;我们 cd 到 CVE-2018-2894&#x…...

C++:string的[ ],at,push_back

1.[ ]运算符和at函数 返回的是string的当前字符串的合法的索引位置的引用,所谓的合法是指小于size的索引 #include <string> #include <iostream>using namespace std;int main() {string str = "hello";cout<<"str:"<<str<…...

C语言(第三十六天)

4. 位操作符&#xff1a;&、|、^ 位操作符有&#xff1a; & //按位与 | //按位或 ^ //按位异或 注&#xff1a;他们的操作数必须是整数。 直接上代码&#xff1a; #include <stdio.h> int main() { int num1 -3; int num2 5; num1 & num2; num1 | num2; nu…...

005_C++数学库常用函数

数学库常用函数 函数 我们其实已经掌握了一些函数,比如主函数main()。还有其他的函数比如一些库中的函数,例:<stdio.h>头文件对应标准输入输出库中的printf()和scanf()、<stdlib.h>标准库头文件对应的标准库中的srand()和rand(),除此之外在C++中常用的还有数…...

Briefings in Bioinformatics投稿经验分享

期刊名: BRIEFINGS IN BIOINFORMATICS期刊名缩写:BRIEF BIOINFORM期刊ISSN:1467-5463E-ISSN:1477-40542023年影响因子/JCR分区:9.5/Q1latex模板:http://static.primary.prod.gcms.the-infra.com/static/site/journals/document/oup-authoring-template.zip?node=7987de4…...

【原创】jmeter并发测试计划

bankQPS 创建线程组 设置并发参数 HTTP请求GET 添加HTTP请求 GET请求 查看结果树 HTTP请求 POST 添加HTTP请求 参数必须设置头信息格式&#xff1a; 添加HTTP头信息 查看结果树 可以选择&#xff0c;仅查看错误日志 汇总报告...

飞腾PSPA可信启动--1 非对称加密

最近计划在梳理下飞腾安全平台架构PSPA&#xff0c;就先从可信启动开始吧。有一些基础的密码学知识&#xff0c;各位在研究可信固件的时候可能会有一些不解&#xff0c;为了便于大家理解&#xff0c;编了几个小故事&#xff0c;希望能够帮助大家理清其中的各种关系。目前可信启…...

基于RabbitMQ的模拟消息队列需求文档

文章目录 一、项目背景二、需求分析1.核心概念2.BrokerServer核心组件3.核心API4.交换机类型5.持久化6.网络通信7.消息应答 三、消息队列模块划分 一、项目背景 什么是消息队列&#xff1f; 消息队列就是&#xff0c;基于阻塞队列&#xff0c;封装成一个独立的服务器程序&#…...

“北科Java面试宝典(211最详细讲解)“

Version : V1.0 北科Java面试宝典一、Java基础面试题【24道】二、JVM虚拟机面试题【14道】三、集合相关面试题【17道】四、多线程 【25道】五、IO【5道】六、网络编程 【9道】七、MySQL以及SQL面试题【20道】八、常用框架【19道】九、中间件和分布式 【54道】十、设计模式面试 …...

自动化测试工具Selenium的语法续.

OK&#xff0c;那么上篇博客我们介绍了如何搭建基于Javaselenium的环境&#xff0c;并且使用selenium的一些语法给大家演示了如何进行自动化测试的案例&#xff0c;那么本篇博客我们来继续学习selenium的一些其他的比较重要的语法&#xff0c;感谢关注&#xff0c;期待三连~ 目…...

稳恒电路直观理解

图v0 图v1 图v2 图v3 图v4 自由正电荷s&#xff0c;定向移动过程中&#xff0c;在任何一位置处受力都是平衡的&#xff0c;即s所受总合力为0&#xff0c; 即s处于匀速运动&#xff1a;直导体中匀速直线运动、拐弯处匀速圆周运动 起初t0时刻, s的势能是最高的E0&#xff0c;之…...

LeetCode面试经典150题(day 3)

169. 多数元素 难度&#xff1a;简单 给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1&#xff1a; 输入&#xff1a;nums …...

掌握这个工具,轻松管理所有物流信息

在电子商务高度发达的今天&#xff0c;物流快递行业在全球范围内发挥着至关重要的作用。然而&#xff0c;在如此复杂的物流环境中&#xff0c;快递退回件的管理和查询成为了一个难题。为了解决这个问题&#xff0c;我们有一个神奇的工具——快递批量查询高手。 快递批量查询高…...

1.Python操作txt文本

文章目录 1.Python读取一个txt文件的内容并将其写入到另一个txt文件2.Python读取一个未知编码的文件并将其设置为指定编码格式3.Python实现txt文件中字符串的替换 1.Python读取一个txt文件的内容并将其写入到另一个txt文件 # -*- encoding:gb2312 -*- import chardetdef read_…...

Redis 主从复制和哨兵模式

一、概念 主从复制&#xff0c;是指将一台 Redis 服务器的数据&#xff0c;复制到其他的 Redis 服务器。前者称为主节点&#xff08;master/leader&#xff09;&#xff0c;后者称为从节点&#xff08;slave/follower&#xff09;。数据的复制是单向的&#xff0c;只能由主节点…...

【已解决】在 SpringBoot 中使用 CloseableHttpClient 调用接口时,接收参数中的中文变为“?“

问题描述 由于项目需要&#xff0c;需要在代码中使用POST请求去调用另一个服务的接口&#xff0c;即不通过前端&#xff0c;A 项目直接在方法中发起HTTP请求调用 B 项目的接口&#xff0c;当请求体中的参数有中文时&#xff0c;参数接收后中文会变为“?”。 具体原因是参数的…...

研磨设计模式day15策略模式

场景 问题描述 经常会有这样的需要&#xff0c;在不同的时候&#xff0c;要使用不同的计算方式。 解决方案 策略模式 定义&#xff1a; 解决思路&#xff1a;...

Densenet模型详解

模型介绍 DenseNet的主要思想是密集连接&#xff0c;它在卷积神经网络&#xff08;CNN&#xff09;中引入了密集块&#xff08;Dense Block&#xff09;&#xff0c;在这些块中&#xff0c;每个层都与前面所有层直接连接。这种设计可以让信息更快速地传播&#xff0c;有助于解…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...