NuxtJS 目录结构

NuxtJS 是一个基于 Vue.js 的通用应用框架，它有着良好的开发体验和高效的构建流程。本文将介绍 NuxtJS 的目录结构，以便程序员更好地了解和使用该框架。

目录结构

我们先来看一下 NuxtJS 的目录结构：

.
├── .nuxt/           # NuxtJS 生成的临时文件，包括编译后的代码、Webpack 配置等
├── assets/          # 存放静态资源（图片、字体等），会被打包处理
├── components/      # 组件目录
├── layouts/         # 布局文件目录
├── middleware/      # 中间件目录，用于处理路由逻辑等
├── pages/           # 页面目录，每个 .vue 文件代表一个页面
├── plugins/         # 插件目录，用于注入 Vue 实例或模块
├── static/          # 静态资源目录，不会被 Webpack 处理
├── store/           # Vuex 相关目录，用于管理应用状态
├── .editorconfig    # 编辑器配置文件
├── .eslintrc.js     # ESLint 配置文件
├── .gitignore       # Git 忽略文件配置
├── nuxt.config.js   # NuxtJS 配置文件
├── package.json     # 包管理器配置文件
└── README.md        # 项目说明文件

接下来我们逐一介绍这些目录和文件。

.nuxt/

.nuxt/ 目录是 NuxtJS 在编译和打包过程中生成的临时文件夹，其包含了所有的编译后的代码、Webpack 配置等。在运行 npm run dev 命令时，NuxtJS 会在内存中创建这个文件夹并启动开发服务器。

.nuxt/
├── App.js                  # NuxtJS 根组件渲染器
├── build.json              # Webpack 配置文件
├── client.js               # 客户端脚本文件
├── nuxt.js                 # NuxtJS 实例构造函数和配置
├── package.json            # NuxtJS 内部插件和开发依赖
├── server.js               # 服务器脚本文件
├── server
│   ├── middleware.js       # 服务器端中间件
│   └── renderer.js         # 服务器端渲染器
├── static                  # 静态资源目录，存放打包后的静态资源
└── webpack                 # Webpack 配置目录

assets/

assets/ 目录存放静态资源（图片、字体等），这些资源会被打包处理。在 NuxtJS 中，可以直接通过相对路径来引用 assets/ 中的资源。

<template>
  <div>
    <img src="~/assets/logo.png" alt="logo">
  </div>
</template>

components/

components/ 目录存放组件，每个组件由一个 .vue 文件组成。NuxtJS 会自动扫描并注册 components/ 中的组件，开发者可以在页面和布局中直接使用它们。

<!-- components/Title.vue -->
<template>
  <h1>{{ title }}</h1>
</template>

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

<!-- pages/index.vue -->
<template>
  <div>
    <title title="Hello, Nuxt!"/>
    <p>Welcome to my NuxtJS app</p>
  </div>
</template>

layouts/

layouts/ 目录存放布局文件，每个 .vue 文件代表一个布局。在页面中使用布局时，可以通过 layout 属性来指定使用的布局文件。

<!-- layouts/default.vue -->
<template>
  <div>
    <h1>My NuxtJS App</h1>
    <nuxt/>
  </div>
</template>

<!-- pages/index.vue -->
<template>
  <div>
    <p>Welcome to my NuxtJS app</p>
  </div>
</template>

<script>
export default {
  layout: 'default'
}
</script>

middleware/

middleware/ 目录存放中间件，用于处理路由逻辑等。在页面中使用中间件时，可以通过 middleware 属性来指定使用的中间件文件。

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

// pages/secret.vue
export default {
  middleware: 'auth'
}

pages/

pages/ 目录是 NuxtJS 中最核心的目录，它包含了项目的所有页面。每个 .vue 文件代表一个页面，NuxtJS 会自动识别这些页面并生成对应的路由。

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Hello, Nuxt!</h1>
    <a href="/about">About page</a>
    <a href="/contact">Contact page</a>
  </div>
</template>

<script>
export default {}
</script>

plugins/

plugins/ 目录存放插件文件，用于注入 Vue 实例或模块。在 NuxtJS 中，插件可以通过在 nuxt.config.js 文件中配置来启用。

// plugins/myPlugin.js
export default ({ app }, inject) => {
  app.myPlugin = {
    sayHello() {
      alert('Hello, Nuxt!')
    }
  }
}

// nuxt.config.js
export default {
  plugins: ['~/plugins/myPlugin.js']
}

static/

static/ 目录是 NuxtJS 的另一个静态资源目录，不会被 Webpack 处理。与 assets/ 目录不同的是，static/ 中的资源会被直接拷贝到打包后的根目录下，而不是被打包处理。

.
├── favicon.ico
└── robots.txt

store/

store/ 目录是 Vuex 相关目录，用于管理应用状态。在 NuxtJS 中，store/ 目录也可以自动注册和加载，不需要在代码中手动引入和配置。

.
├── index.js        # 导出 Vuex.Store 实例
├── actions.js      # Vuex actions
├── getters.js      # Vuex getters
├── mutations.js    # Vuex mutations
└── state.js        # Vuex state

.editorconfig

.editorconfig 是一个跨平台的编码风格配置文件，用于统一开发团队的代码风格规范。在 NuxtJS 中，推荐使用默认的 .editorconfig 配置。

# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

.eslintrc.js

.eslintrc.js 是 ESLint 的配置文件，用于规范代码风格和检测潜在的语法错误。在 NuxtJS 中，可以使用默认的 ESLint 配置或者自定义自己的配置。

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    '@nuxtjs',
    'plugin:prettier/recommended',
    'prettier',
    'prettier/vue',
  ],
  plugins: ['prettier'],
  // add your custom rules here
  rules: {},
}

.gitignore

.gitignore 是 Git 的忽略文件配置，用于排除一些不必要的文件和目录。在 NuxtJS 中，推荐使用默认的 .gitignore 配置。

node_modules/
.nuxt/
dist/
npm-debug.log
yarn-error.log

nuxt.config.js

nuxt.config.js 是 NuxtJS 的配置文件，包含了许多常用配置选项。在 NuxtJS 中，通过修改 nuxt.config.js 文件可以对项目进行全局配置和定制。

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    titleTemplate: '%s - ' + process.env.npm_package_name,
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [],
  /*
  ** Nuxt.js modules
  */
  modules: [],
  /*
  ** Build configuration
  */
  build: {},
}

package.json

package.json 是包管理器的配置文件，包含了项目依赖和脚本命令等信息。在 NuxtJS 中，可以通过修改 package.json 文件来管理项目的依赖和脚本。

{
  "name": "my-nuxt-app",
  "version": "1.0.0",
  "description": "My NuxtJS App",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "nuxt": "^2.14.0"
  },
  "devDependencies": {},
  "engines": {
    "node": ">= 12.0.0"
  }
}

以上就是 NuxtJS 的目录结构，希望可以帮助程序员更好地了解和使用该框架。