组件类型

一个 Vue 项目：

• components：存放功能性组件
• views or pages：存放视图组件

Nuxt 框架是一个 opinionated 框架。

• opinionated：你的一切我全包了
  • 格式化工具 prettier
  • Spring boot(Java)
  • ThinkPHP(PHP)
  • …
• unopinionated：人人都是装机猿
  • express
  • koa
  • …

在 Nuxt 中，有严格的目录要求，不同类型或者说不同作用的组件，需要放置于对应的目录中。

• app.vue
• components
• pages
• layouts

app.vue

整个应用的入口文件。默认会有两个组件：

• NuxtRouteAnnouncer：用于增强无障碍访问的组件，在页面发生变化的时候会通知一些辅助设备（屏幕阅读器…）
• NuxtWelcome: 欢迎组件，开发时不会用到

components

放置功能性组件，支持自动导入。

能够自动导入的有：

1. Vue API：包括一系列的响应式 API，例如 ref、reactive、computed…
2. components 目录(存放功能性组件)下第一层组件
3. composables 目录(存放组合式函数)
4. pages: 视图组件
5. layouts：布局组件

pages

Nuxt里面的一大特性：文件路由

存放页面组件。在 Nuxt 中，会根据 pages 目录下文件自动生成路由。

目前的 pages 下面的文件结构，会自动生成如下的路由结构：

const routes = [
  {
    path: '/',
    component: '~/pages/index.vue',
    name: index,
  },
  {
    path: '/home',
    component: '~/pages/home.vue',
    name: home,
  },
  {
    path: '/about',
    component: '~/pages/about.vue',
    name: about,
  },
]

layouts

存放布局组件，一般用于放置公共的视图，也就是所有的视图都会显示部分，常见于 header、footer.