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>
效果实现啦