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

1.Nuxt学习 搭建项目 渲染页面基本操作

Nuxt官方网站

搭建项目

使用 npx nuxi init nuxt-app 来创建一个nuxt的项目

在项目目录中我们新建一个pages文件夹,并在下面新建index.vue文件 作为项目入口文件,在过程中 删除一些暂时用不到的文件夹

pages下面的index文件内容 

<template>
  <div>
    hello world
  </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

然后我们需要在app.vue文件中加入入口配置

<template>
  <div>
    <!-- 类似于vue文件 router-view的作用 -->
    <NuxtPage />
  </div>
</template>

 然后页面就可以展示渲染效果了

路由切换页面

我们可以在pages文件夹中定义路由页面文件,然后通过编辑页面路径的形式就可以实现页面路由的切换 

 

 

layouts布局文件

在建立的layouts文件夹中,可以编写页面的布局文件 我们在layouts文件夹下 建立默认文件 default.vue(官网指定文件名)

在default.vue中 我们需要使用<slot /> 绑定入口文件 并且添加一个上下的文字描述来看效果

<template>
  <div>
    上方
    <slot />
    下方
  </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

我们还需要在app.vue入口文件中 给NuxtPage标签包裹NuxtLayout标签来实现作用

<template>
  <div>
    <!-- 使用NuxtLayout标签包裹NuxtPage来实现layouts文件的作用 -->
    <NuxtLayout>
      <!-- 类似于vue文件 router-view的作用 -->
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

效果实现啦 

 

 

  


http://www.kler.cn/a/442865.html

相关文章:

  • 如何用 ESP32-CAM 做一个实时视频流服务器
  • 第33 章 - ES 实战篇 - MySQL 与 Elasticsearch 的一致性问题
  • MySQL程序之:简要概述
  • Linux常用指令
  • golang单元测试
  • 实用操作系统学习笔记
  • RabbitMQ的核心组件有哪些?
  • 【操作系统】每日 3 题(七十一)
  • 深度学习物体检测之YOLOV5源码解读
  • 为markdown导出的pdf添加页眉页脚
  • 分享一次接口性能摸底测试过程
  • qt 鼠标点击事件
  • Servlet学习中遇到的一些问题及解决
  • 从零开始学习 sg200x 多核开发之 sophpi 编译生成 fip.bin 流程梳理
  • docker修改容器网络
  • Cobalt Strike 4.8 用户指南-第十四节 Aggressor 脚本
  • 强化学习Q-learning及其在机器人路径规划系统中的应用研究,matlab代码
  • ubuntu禁用内核更新
  • 【Java入门指南 Day15:Java网络编程】
  • C# 如何使用多线程
  • 深入理解数据库 JOIN 操作
  • 【Tomcat】第一站:理解tomcat与Socket
  • 【面试问题】JIT 是什么?和 JVM 什么关系?
  • IDEA下加载音频文件操作
  • Linux 查看文件末尾命令 tail 详细介绍
  • [LeetCode-Python版] 876. 链表的中间结点