Nuxt.js 目录结构-JavaScript中文网-JavaScript教程资源分享门户

在开始构建基于 Nuxt.js 的项目之前，了解其默认的目录结构是非常重要的。这不仅有助于你更好地组织代码，还能让你更高效地进行开发工作。下面我们将详细解析 Nuxt.js 的目录结构。

项目根目录

Nuxt.js 项目的根目录中包含了几个重要的文件和目录：

nuxt.config.js：这是 Nuxt.js 配置文件。在这里你可以配置你的应用，包括路由、模块、构建选项等。
package.json：这个文件包含了项目的元数据以及依赖项。通过 npm install 命令可以安装所有依赖。
.env：环境变量文件，用于存储敏感信息或配置不同环境下的变量值。

`assets` 目录

在这个目录下，你可以存放静态资源文件，比如图片、样式表（CSS/SCSS/SASS）、字体文件等。这些文件在构建过程中会被复制到输出目录，并且可以通过路径直接访问。

使用静态资源

假设你在 assets/images/logo.png 存放了公司的Logo图片，那么在模板中就可以这样引用它：

<img src="~/assets/images/logo.png" alt="公司Logo">

`components` 目录

components 目录用于存放 Vue 组件。每个组件都应该是一个独立的 .vue 文件。Nuxt.js 会自动识别并注册这些组件，因此你可以在任何页面或布局中直接使用它们，而无需手动导入。

创建和使用组件

例如，创建一个简单的按钮组件 Button.vue：

// www.javascriptcn.com code example
<template>
  <button :class="['btn', color]">
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: ['color']
}
</script>

<style scoped>
.btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 1rem;
}

.red { background-color: red; }
.blue { background-color: blue; }
</style>

然后在其他页面或组件中使用这个按钮：

<template>
  <div>
    <Button color="red">点击我！</Button>
    <Button color="blue">点我试试</Button>
  </div>
</template>

`layouts` 目录

layouts 目录用来存放页面布局文件。布局文件定义了页面的基本结构，比如导航栏、页脚等。你可以根据需要创建多个布局，并在页面级别指定使用哪个布局。

自定义布局

假设你想要创建一个全屏背景色为浅灰色的布局，可以创建 default.vue 文件：

// www.javascriptcn.com code example
<template>
  <div class="layout">
    <header>网站头部</header>
    <main>
      <slot />
    </main>
    <footer>网站底部</footer>
  </div>
</template>

<style scoped>
.layout {
  background-color: #f8f9fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header, footer {
  padding: 1rem;
  text-align: center;
  background-color: #343a40;
  color: white;
}

main {
  flex-grow: 1;
  padding: 1rem;
}
</style>

然后在页面中指定使用这个布局：

<page layout="default">
  <h1>欢迎来到我的网站</h1>
  <p>这是一个示例页面。</p>
</page>

`middleware` 目录

中间件是运行在页面渲染之前的一段代码，用于处理一些通用逻辑，比如身份验证、权限检查等。你可以将这些逻辑放在中间件中，以便于复用。

创建中间件

假设你需要在用户登录后才能访问某些页面，可以创建一个名为 auth.js 的中间件：

export default function ({ store, redirect }) {
  // 如果用户未登录，则重定向到登录页面
  if (!store.state.auth.loggedIn) {
    return redirect('/login')
  }
}

然后在需要保护的页面中引用这个中间件：

<page middleware="auth">
  <!-- 页面内容 -->
</page>

`pages` 目录

pages 目录是 Nuxt.js 应用的核心部分，它决定了应用的路由结构。每个 .vue 文件都会自动生成一个对应的路由规则。

路由规则

假设你在 pages 目录下有以下文件：

index.vue
about.vue
users.vue
users/_id.vue

那么生成的路由规则如下：

/ 映射到 index.vue
/about 映射到 about.vue
/users 映射到 users.vue
/users/:id 映射到 users/_id.vue

动态路由参数

在 users/_id.vue 中，你可以通过 $route.params.id 来获取动态路由参数：

<template>
  <div>
    <h1>用户详情</h1>
    <p>ID: {{ $route.params.id }}</p>
  </div>
</template>

`plugins` 目录

插件文件夹用于存放那些需要在应用启动时执行的代码。插件可以用来初始化库、注入全局方法或混入等。

使用插件

例如，假设你需要全局引入一个日期格式化库：

// plugins/date.js
import dayjs from 'dayjs'

export default ({ app }, inject) => {
  inject('date', dayjs)
}

然后在其他地方使用这个插件：

<template>
  <div>
    <p>今天是 {{ date().format('YYYY-MM-DD') }}</p>
  </div>
</template>

`static` 目录

static 目录用于存放不经过任何处理的静态文件，比如图片、视频、PDF文档等。这些文件在构建过程中会被直接复制到输出目录，并且可以通过相对路径直接访问。

访问静态文件

假设你在 static/images/logo.png 放置了一个logo图片，那么可以通过如下方式引用：

<img src="/images/logo.png" alt="公司Logo">

`store` 目录

store 目录用于存放 Vuex 状态管理相关的内容。Vuex 是一种集中式存储管理的应用程序状态，使得状态管理更加直观和可控。

创建状态管理

假设你需要管理用户的登录状态，可以创建 index.js 文件：

// www.javascriptcn.com code example
export const state = () => ({
  loggedIn: false
})

export const mutations = {
  login(state) {
    state.loggedIn = true
  },
  logout(state) {
    state.loggedIn = false
  }
}

然后在页面或其他组件中使用这个状态：

<template>
  <div>
    <p v-if="!$store.state.loggedIn">请先登录</p>
    <button @click="$store.commit('login')">登录</button>
  </div>
</template>

以上就是 Nuxt.js 默认目录结构的详细介绍。理解并充分利用这些目录和文件，可以帮助你更好地组织和管理项目。希望本教程对你有所帮助！

Nuxt.js 目录结构

项目根目录

assets 目录