基础操作

一 ，目录说明以及创建

1,Nuxt 4 核心目录结构（必须懂）

nuxt4-app

├──  app/  # 应用目录

├──  app.vue  # 入口文件

├──  pages/  # 页面路由（自动生成）

├──  components/  # 组件（自动导入）

├──  server/  # 后端接口（自动API）

├──  composables/  # 全局函数（自动导入）

├──  public/  # 静态资源

Nuxt 4 最大特点：不用写路由、不用导入组件、不用导入函数，全部自动！

2，创建核心目录

touch  nuxt4-app/app/pages

touch  nuxt4-app/app/components

touch  nuxt4-app/app/server

touch  nuxt4-app/app/composables

二 ，创建页面（自动路由）

1，创建首页路由

pages/index.vue

<template>

<div  class="home">

<h1>Nuxt  4  实战首页</h1>

<p>当前时间：{{  now  }}</p>

<NuxtLink  to="/about">关于页</NuxtLink>

<NuxtLink  to="/contact">联系页</NuxtLink>

</div>

</template>

<script setup>

const  now  =  new  Date().toLocaleString()

</script>

2，创建关于页路由

pages/about.vue

<template>

<div  class="about">

<h1>Nuxt  4  实战关于页</h1>

<p>这是一个关于页</p>

</div>

</template>

<script setup>

</script>

3，创建联系页路由

pages/contact.vue

<template>

<div  class="contact">

<h1>Nuxt  4  实战联系页</h1>

<p>这是一个联系页</p>

</div>

</template>

<script setup>

</script>

4，修改入口文件app.vue

<template>

<div  class="app">

<NuxtLayout>

<NuxtPage />

</NuxtLayout>

</div>

</template>

<script setup>

</script>

访问：

• / → 首页

• /about → 关于页

• /contact → 联系页

不用配置任何路由！

三 ，创建组件（自动导入）

1，创建全局组件

app/components/global.vue

<template>

<div  class="global">

<h3>自动导入的组件</h3>

<p>{{  msg  }}</p>

<NuxtLink  to="/">首页</NuxtLink>/

<NuxtLink  to="/about">关于页</NuxtLink>/

<NuxtLink  to="/contact">联系页</NuxtLink>

</div>

</template>

<script setup>

const  msg  =  "Nuxt4 组件无需导入！"

</script>

<style scoped>

.global  {  padding:  10px; background:  #f5f5f5; }

</style>

2，引入组件

app/pages/index.vue

<template>

<div  class="global">

<h3>自动导入的组件</h3>

<p>{{  msg  }}</p>

</div>

</template>

<script setup>

const  msg  =  "Nuxt4 组件无需导入！"

</script>

<style scoped>

.global  {  padding:  10px; background:  #f5f5f5; }

</style>

3，修改关于页引入组件

app/pages/about.vue

.

.

.

<div  class="about">

<h1>Nuxt  4  实战关于页</h1>

<p>这是一个关于页</p>

<Global />

</div>

.

.

.

4，修改联系页引入组件

app/pages/contact.vue

.

.

.

<div  class="contact">

<h1>Nuxt  4  实战联系页</h1>

<p>这是一个联系页</p>

<Global />

</div>

.

.

.

访问：

• / → 首页

• /about → 关于页

• /contact → 联系页

结果如下