02. Nuxt3的基础目录结构

默认的项目里就如下几个文件和目录，让我们一起看看每个文件的作用。

- .nuxt               // 自动生成的目录，用于展示结果
- node_modules        // 项目依赖包存放目录
- .gitignore          // Git 的配置目录，比如一些文件不用 Git 管理就可以在这个文件中配置
- app.vue             // 项目入口文件，你可以在这里配置路由的出口
- nuxt.config.ts      // nuxt 项目的配置文件 ，这个里边可以配置 Nuxt 项目的方法
- package-lock.json   // 锁定安装时包的版本，以保证其他人在 npm install 时和你保持一致
- package.json        // 包的配置文件和项目的启动调式命令配置
- README.md           // 项目的说明文件
- tsconfig.json       // TypeScript 的配置文件

随着我们的开发目录也会越来越多，比如常用的还有下面三个目录。

- pages               // 开发的页面目录
- components          // 组件目录
- assets              // 静态资源目录
- layouts             // 项目布局目录

接下来，现在我们对 Nuxt3 的基础目录了解后，接下来我们试着去作一个 HelloWorld 的程序。

编写 Hello World 程序

通过上面的学习，我们知道了App.vue 这个文件是项目的入口文件。用 VSCode 打开文件，可以看到文件的基础结构。

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

其中<NuxtWelcom /> 就是一个框架自带的组件，我们直接删除就可以，不用纠结删除这个组件。删除后，在 components 目录下新建一个文件，叫做HelloWorld.vue 然后编写下面的代码。

<template>
  <div >
    <h1>Hello World</h1>
  </div>
</template>

<script setup>
import {} from "vue";
</script>

<style scoped></style>

然后再回到app.vue文件中直接写入这个 HelloWorld组件：

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

打开 VSCode 的内置终端，然后输入 npm run dev 或 yarn dev 就可以启动调试服务了。 打开浏览器，在地址栏输入[http://localhost:3000/](http://localhost:3000/)就可以看到 HelloWord 效果了。