Skip to content

组件类型

· 2 min

一个 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.