《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》全文电子档将分章节陆续在“nuxt”微信订阅号原创发布,敬请关注。如果您等不及,急切提前阅读和实操,可以在订阅号中有偿获取完整电子教程和后续持续更新版本。
本教程配套示例在线预览网址:https://www.dvtop.cn
页面组件必须放在项目根目录的components目录下,Nuxt3会自动导入此目录中的所有组件,然后就可以在任何页面或其他组件中使用这些组件。
如果组件文件名中有.client.vue或.server.vue分别表示仅为客户端或服务端使用的组件。
注意:如果组件加载较慢,可通过<NuxtLoadingIndicator>组件加到~/app.vue或布局(layouts)里,为加载页面或组件显示进度条。
4.3.1 约定引用
组件名称约定为目录加上组件文件名的camelCase(驼峰式)命名方法。以下创建两个组件并在页面中直接引用。
~/components/TheFooter.vue |
<template> <div class="app-box"> 这里是页脚组件。页面传递参数值:{ {props.pdate}} </div> </template> <script setup> const props = defineProps(['pdate']) </script> |
~/components/base/foo/ |