运行新创建的这个 Nuxt 项目的开发服务以后，界面上会显示一个欢迎界面，这个界面是一个组件，这个组件来自 Nuxt 框架。

在项目里打开 app.vue，这个单文件组件可以看成是 Nuxt 应用的入口文件。在一般的 Vue 应用里，可能需要一个 main.js 或者 main.ts 作为应用的入口，在里面会创建一个 Vue 应用，然后把它挂载到页面上，这些事情 Nuxt都帮我们做好了，所以这个 app.vue 组件可以看成是应用的入口。

在这个组件里用了一个名字是 NuxtWelcome 的组件，它来自 Nuxt 框架，显示的东西就是刚才我们在浏览器上看到的那个欢迎界面。注意在使用这个组件的时候，并没有导入与注册这个组件，直接就可以用。

这是因为 Nuxt 框架有自动导入的功能，允许我们可以直接使用 Nuxt 框架本身自带的一些东西，也就是当你发现在组件或者其它地方使用的东西并没有明确地导入它，就是用了 Nuxt 框架的自动导入功能。

除了可以自动导入 Nuxt 框架自带的东西，也可以自动导入我们自己创建的一些东西，比如一些 components 或者 composables 等等。下面可以测试一下。

自动导入组件

在项目根目录下在新建一个目录，名字叫 components，自定义的组件都可以放在这个目录的下面，在这个目录下面的组件都可以自动导入。在它里面新建一个组件文件，名字是 app-home.vue，文件里定义一个组件，添加一组 template，在组件的模板里面，添加一组大标题，内容是首页，下面再添加一组 div，包装的是一行文字，我在宁皓网学习 Nuxt.js。

打开 app.vue，去掉 NuxtWelcome 组件，换成一个 组件，你会发现输入组件名字的时候，编辑器会自动提示可用的组件。保存一下文件，应用的首页现在会显示 app-home 这个组件。

在 app 组件里使用在 components 目录下面定义的组件的时候，我们并没有明确地导入这个组件，可以直接使用，这就是因为 Nuxt 框架的自动导入功能在起作用。

在 components 里面可以创建一个子目录，然后在这些子目录里再去创建需要的组件，在生成的组件的名字里面会包含子目录的名字。比如把这个 app-home.vue 放在 app 这个目录的下面，组件文件的名字改成 home.vue。最终在使用这个组件的时候，它的名字就会是 AppHome。

如果子目录的名字与它里面的组件文件的名字有重复的部分，重复的部分会在组件的名字里被去掉。比如在 app 这个子目录下面，有个 app-home.vue，最终这个组件的名字不是 AppAppHome，也是 AppHome。