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 class="">
    <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 效果了。

以上关于02. Nuxt3的基础目录结构的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。