vue-30（理解 Nuxt.js 目录结构）

理解 Nuxt.js 目录结构

Nuxt.js 基于 Vue.js 构建，简化了服务器端渲染（SSR）和静态生成 Web 应用的开发。使用 Nuxt.js 的关键方面之一是理解其目录结构。这种结构提供了组织代码的规范，使开发、维护和扩展应用更加容易。通过遵循这些规范，您可以利用 Nuxt.js 的功能并优化应用的性能。本课将全面概述 Nuxt.js 的目录结构，解释每个目录和文件的目的，以及它们如何为应用的整体功能做出贡献。

Nuxt.js 的核心目录

Nuxt.js 强制执行特定的目录结构以提供结构和自动化。让我们探索核心目录：

pages/

pages/ 目录可以说是 Nuxt.js 项目中最重要的目录。它根据此目录内的 Vue 文件自动生成应用程序的路由。此目录中的每个 .vue 文件都成为应用程序中的一个路由。

• 基本路由： 位于 pages/ 目录下名为 index.vue 的文件将成为根路由（/）。名为 about.vue 的文件将可在 /about 处访问。

  // pages/index.vue
  <template><h1>Welcome to the Home Page</h1>
  </template>
  

  // pages/about.vue
  <template><h1>About Us</h1>
  </template>
  

• 动态路由： Nuxt.js 允许你使用下划线前缀创建动态路由。例如，一个名为 _slug.vue 的文件将创建一个可以处理任何 slugs 的路由，例如 /blog/my-first-post 或 /products/some-product。

  // pages/_slug.vue
  <template><h1>Post: {{ slug }}</h1>
  </template><script>
  export default {computed: {slug() {return this.$route.params.slug;}}
  }
  </script>
  

• 嵌套路由： 您可以通过在 pages/ 目录内创建目录来创建嵌套路由。例如，如果您有一个名为 users/ 的目录，其中包含一个 index.vue 文件，那么路由将是 /users。如果您还有一个 users/_id.vue 文件，那么路由将是 /users/:id。

  // pages/users/index.vue
  <template><h1>User List</h1>
  </template>
  

  // pages/users/_id.vue
  <template><h1>User ID: {{ id }}</h1>
  </template><script>
  export default {computed: {id() {return this.$route.params.id;}}
  }
  </script>
  

layouts/

layouts/ 目录包含应用程序的布局模板。布局用于用常见的 UI 元素（如页眉、页脚和导航菜单）包裹你的页面。

• 默认布局： default.vue 文件位于 layouts/ 目录中，是所有页面使用的默认布局，除非指定了不同的布局。

  // layouts/default.vue
  <template><div><header><h1>My Website</h1><nav><nuxt-link to="/">Home</nuxt-link> |<nuxt-link to="/about">About</nuxt-link></nav></header><nuxt /><footer><p>&copy; 2023 My Website</p></footer></div>
  </template>
  

  <nuxt /> 组件是一个占位符，当前页面的内容将被注入其中。

• 自定义布局： 您可以为特定页面或页面组创建自定义布局。例如，您可能有一个包含侧边栏的博客文章布局。

  // layouts/blog.vue
  <template><div><header><h1>Blog</h1></header><div class="container"><aside><h2>Categories</h2><ul><li><a href="#">Technology</a></li><li><a href="#">Travel</a></li></ul></aside><article><nuxt /></article></div><footer><p>&copy; 2023 My Blog</p></footer></div>
  </template><style scoped>
  .container {display: flex;
  }aside {width: 200px;margin-right: 20px;
  }article {flex: 1;
  }
  </style>
  

  要使用自定义布局，您需要在页面组件中指定 layout 属性。

  // pages/blog/my-first-post.vue
  <template><h1>My First Blog Post</h1><p>This is the content of my first blog post.</p>
  </template><script>
  export default {layout: 'blog'
  }
  </script>
  

• 错误布局： 位于 layouts/ 目录中的 error.vue 文件用于显示错误页面。当出现错误时，Nuxt.js 会自动使用此布局。

  // layouts/error.vue
  <template><div class="container"><h1>Error</h1><p>An error occurred: {{ error.statusCode }}</p><p>{{ error.message }}</p><nuxt-link to="/">Go back to home</nuxt-link></div>
  </template><script>
  export default {props: ['error'],layout: 'default' // you can set a custom layout for the error page
  }
  </script>
  

components/

components/ 目录是您存放可重用 Vue 组件的地方。这些组件可以在您的页面、布局和其他组件中使用。

• 组件组织： 你可以根据组件的功能或用途将它们组织到子目录中。例如，你可能会有一个 components/ 目录，其中包含像 buttons/、forms/ 和 cards/ 这样的子目录。

  // components/buttons/PrimaryButton.vue
  <template><button class="primary-button"><slot /></button>
  </template><style scoped>
  .primary-button {background-color: #007bff;color: white;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;
  }
  </style>
  

• 组件使用： 要在页面或布局中使用组件，只需导入它并在 components 选项中注册。Nuxt.js 会自动注册此目录中的组件，因此您可以直接在模板中使用它们。

  // pages/index.vue
  <template><div><PrimaryButton>Click Me</PrimaryButton></div>
  </template><script>
  import PrimaryButton from '~/components/buttons/PrimaryButton.vue';export default {components: {PrimaryButton}
  }
  </script>
  

assets/

assets/ 目录用于存储您的未编译资源，例如图片、字体和样式表。Nuxt.js 使用 webpack 处理这些资源。

• 资源使用： 您可以使用相对路径在组件和样式表中引用资源。

  // components/MyComponent.vue
  <template><img src="~/assets/images/logo.png" alt="Logo">
  </template>
  

  /* assets/css/main.css */
  body {background-image: url('~assets/images/background.jpg');
  }
  

• CSS 预处理： 您可以通过安装适当的 webpack 加载器来使用 Sass 或 Less 等 CSS 预处理工具。

static/

static/ 目录用于存储您希望直接提供的服务静态文件，例如 robots.txt、favicon.ico 和站点地图。此目录中的文件不会被 webpack 处理。

• 直接访问：static/ 目录中的文件可以通过应用程序的根目录直接访问。例如，如果您有一个名为 static/robots.txt 的文件，它将在 /robots.txt 处可访问。

nuxt.config.js

nuxt.config.js 文件是您的 Nuxt.js 应用程序的主要配置文件。它允许您自定义应用程序的各个方面，例如构建过程、路由和模块。

• 配置选项： nuxt.config.js 文件导出一个 JavaScript 对象，其中包含各种配置选项。一些常见的选项包括：

  • head: 用于配置应用程序的 <head> 部分。
  • css: 用于在应用程序中包含 CSS 文件。
  • plugins: 用于注册插件。
  • modules: 用于添加 Nuxt.js 模块。
  • build: 用于自定义 webpack 构建过程。
  • router: 用于自定义 Vue Router 配置。
  • env: 用于定义环境变量。

  // nuxt.config.js
  module.exports = {head: {title: 'My Nuxt.js App',meta: [{ charset: 'utf-8' },{ name: 'viewport', content: 'width=device-width, initial-scale=1' },{ hid: 'description', name: 'description', content: 'My Nuxt.js application' }],link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]},css: ['~/assets/css/main.css'],modules: ['@nuxtjs/axios'],axios: {baseURL: '/'},build: {}
  }
  

可选目录和文件

Nuxt.js 还支持多个可选目录和文件，可用于扩展应用程序的功能。

store/

store/ 目录用于存放您的 Vuex 存储文件。Vuex 是 Vue.js 应用程序的状态管理库。

• 状态管理： 如果你有复杂的状态管理需求，可以使用 Vuex 来管理你的应用程序状态。当你的项目中存在 store/ 目录时，Nuxt.js 会自动与 Vuex 集成。

  // store/index.js
  import Vuex from 'vuex'const createStore = () => {return new Vuex.Store({state: {counter: 0},mutations: {increment (state) {state.counter++}},actions: {increment (context) {context.commit('increment')}},getters: {counter(state) {return state.counter}}})
  }export default createStore
  

• 模块组织： 您可以通过在 store/ 目录内创建子目录来组织您的 Vuex 存储模块。

plugins/

plugins/ 目录用于存储您的 Vue.js 插件。插件可用于向您的应用程序添加全局功能。

• 插件注册： 要注册插件，您需要将其添加到 plugins 数组中，该数组位于您的 nuxt.config.js 文件内。

  // plugins/my-plugin.js
  import Vue from 'vue'Vue.mixin({mounted() {console.log('Component mounted!');}
  });
  

  // nuxt.config.js
  module.exports = {plugins: ['~/plugins/my-plugin.js']
  }
  

middleware/

middleware/ 目录用于存储您的路由中间件函数。中间件函数可用于保护路由、执行身份验证或修改请求或响应。

• 中间件使用： 您可以将中间件应用于特定的路由或路由组。

  // middleware/auth.js
  export default function ({ redirect, store }) {if (!store.state.user) {return redirect('/login')}
  }
  

  // pages/profile.vue
  <template><h1>Profile Page</h1>
  </template><script>
  export default {middleware: ['auth']
  }
  </script>
  

modules/

modules/ 目录用于存储自定义的 Nuxt.js 模块。模块可用于扩展 Nuxt.js 的功能。

• 模块开发： 你可以创建自己的 Nuxt.js 模块来封装可重用的功能。

server/

server/ 目录用于为你的 Nuxt.js 应用创建自定义服务器。这适用于添加 API 端点或自定义服务器端逻辑。

• API 端点： 你可以使用 Express.js 等 Node.js 框架来创建 API 端点。