在Nuxt3项目中,可以在这些地方写UI界面代码
默认情况下,app.vue
是项目的入口文件,访问应用的每个页面,也都会渲染app.vue
的内容。
<template>
<div>
<h1>Welcome to the homepage</h1>
</div>
</template>
如何你熟悉Vue,你会想
main.js
去哪了。事际上,Nuxt在应用启动后自动创建了这个文件。
大部分组件是可复用的用户界面代码片断,比如按钮和菜单。在Nuxt中,你只要将组件代码放进/omponents
目录,你就可以在整个项目中自由使用组件,而无需手动引入。
components/AppAlert.vue
<template>
<span>
<slot />
</span>
</template>
app.vue:
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component.
</AppAlert>
</div>
</template>
无需在app.vue
中引用AppAlert
,就能够直接使用,非常方便。
/pages
目录中的每一个.vue
文件,就是一个路由文件。可以直接在这个文件中写界面代码。
比如创建个首页页面:/pages/index.vue
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component
</AppAlert>
</div>
</template>
Layouts是页面外层包装,包含多个页面共用的用户界面,如页头和页脚显示。Layouts本身也是个Vue文件,使用/layouts/default.vue
文件。自定义Layout可以作为页面元数据的一部分进行设置。
layouts/default.vue
<template>
<div>
<AppHeader />
<slot />
<AppFooter />
</div>
</template>
/pages/index.vue
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component
</AppAlert>
</div>
</template>