nuxt 目录结构及配置文件详解

nuxt 目录结构详解

首先我们来看下使用create-nuxt-app脚手架工具所创建的nuxt项目目录的结构，

windows cmd 命令行输入，tree /f /a，打印如下项目目录结构：

C:.| .editorconfig| .gitignore| nuxt.config.js| package.json| README.md|+---assets| README.md|+---components| Logo.vue| README.md|+---layouts| default.vue| README.md|+---middleware| README.md|+---pages| index.vue| README.md|+---plugins| README.md|+---static| favicon.ico| README.md|\---storeREADME.md

我们现在来分析一下，可以发现，目录结构中有：

文件夹8个：assets、components、layouts、middleware、pages、plugins、static、store这个文件5个：.editorconfig、.gitignore、nuxt.config.js、package.json、README.md

好，我们现在梳理出了项目目录下所有的文件夹和文件，我们现在呢，就来分析下它们的具体的功能：

首先，我们来分析每个文件夹的功能，我们可以看到在每个文件夹下面有一个README.md这样一个markdown文件，我们打开这个文件，可以看见里面有一些关于这个目录使用的一些说明，大致呢，包括下面几种，

（1）是否必须，不必要的话可以删除

（2）该目录有哪些作用

（3）还有文档的官方文档地址

目录功能的具体介绍

assets，存放一些静态资源，包括一些Sass、Less或者一些Javascript文件 ，在项目组件中引用的时候需要在开头使用~assets/符号，如果你的静态资源文件需要webpack做构建编译处理，可以放到assets目录，否则可以放到static目录中去，这也是 assets 目录 和 static 目录的一个区别

components, 这是一个存放vue.js组件文件的目录，而且呢，Nuxt.js在构建的时候，也不会处理这些组件文件，对这些文件内容进行增强，就是增加如下的这些内容：

export default {asyncData (context) {// called every time before loading the componentreturn {name: 'World' }},fetch () {// The fetch method is used to fill the store before rendering the page},head () {// Set Meta Tags for this Page},// and more functionality to discover...}

layouts，这个目录呢，包含着开发项目的布局，在这里面呢可以定义一些项目的公用结构，比如导航栏等

在这个目录呢，我们来新建一个blog.vue，内容如下：

<template><div><header> <h3>这是我的 blog 导航栏</h3> </header><nuxt /></div></template>

然后我们在page目录下，新建一个posts.vue文件，编辑如下：

<template><div class="container">我是一篇文章</div></template><script>export default {layout: 'blog'}</script>

我们也可以在page目录下面index..vue，新增layout: 'blog'，我们也会发现在首页/的顶部我们也出现了我们的haedr标题

middleware，这个middleware目录主要是用于存放一些方法函数，在页面加载渲染前运行,每一个中间件应放置在middleware/目录。文件名的名称将成为中间件名称(middleware/auth.js将成为auth中间件)。

一个中间件接收 context 作为第一个参数：middleware/stats.js

import axios from 'axios'export default function ({route }) {return axios.post('http://my-stats-', {url: route.fullPath})}

使用方法，分别在我们的nuxt.config.js、layouts或者pages中使用中间件:

// 现在，stats 中间件将在每个路由改变时被调用module.exports = {router: {middleware: 'stats'}}

我们也可以将middleware添加到指定的布局或者页面，pages/index.vue 或者 layouts/default.vue:

// 在当前页面或者布局加载之前执行export default {middleware: 'stats'}

pages，pages 目录是一个存放页面（.vue）的文件夹，这些页面的层级约束的页面路由url的跳转及展示，Nuxt 会帮我们将 pages 下面的文件的层级自动解析成路由

plugins，存放一些第三方库（element-ui等）的引用，然后在nuxt.config.js中的plugins字段中配置使用

static，存放静态资源的目录，包括一些图片，视频，音乐等媒体资源

store，存放vuex状态树文件，包括state.js、store.js等等

根目录文件的介绍package.json：npm 包管理器的文件，用于管理项目的依赖，包括暴露npm script命令的管理nuxt.config.js: nuxt 项目的配置文件，在这个配置文件可以配置nuxt项目启动的一些设置， 组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。.gitignore：git 仓库 忽略的文件.editorconfig, 编辑器的相关字体，颜色等配置README.md，项目的markdown介绍文件

接下来，我们来补充下，整个nuxt.js为页面提供的一些特殊配置

nuxt.config.js 配置文件详解

现在我们来介绍nuxt.config.js配置文件详细介绍

字段mode：

mode: 'universal',nuxt 项目的开发模式，默认是universal（SSR服务端渲染），但是呢，它还有一个值，是spa，就是我们常说的单页面应用，使用nuxt是可以构建单页面应用的，类似于使用vue-cli脚手架工具的创建spa项目

字段head：

这个head呢，就是我们的项目页面的header部分，这些配置会在head标签里面生成对应的meta，link等标签，这里默认的title是我们项目package.json的默认name，描述呢，也是我们项目默认的 description ; 这里的hid属性，是我们的id标识符，用于区分相同name的meta标签， 这里的Link 是我们项目的ico，默认的/地址，是我们的static目录下地址

head: {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' }]}

字段loading:

loading: { color: '#fff' }目录项目页面切换，默认的加载配置在页面切换的时候，Nuxt.js 使用内置的加载组件显示加载进度条。我们可以定制它的样式，禁用或者创建自己的加载组件。

export default {mounted () {this.$nextTick(() => {this.$nuxt.$loading.start()setTimeout(() => this.$nuxt.$loading.finish(), 500)})}}

禁用加载进度条

module.exports = {loading: false}

字段css:

存放样式文件，可以在项目的全局加载出来，可以放置一些全局的而一些浏览器默认样式

字段plugins: <Array[String|Object]>

使用方式

module.exports = {plugins: ['~plugins/vue-notifications']}

然后, 我们需要创建 plugins/vue-notifications.js 文件：

import Vue from 'vue'import VueNotifications from 'vue-notifications'Vue.use(VueNotifications)

字段modules:

modules是Nuxt.js扩展，可以扩展它的核心功能并添加无限的集成。参考案例：

export default {modules: [// Using package name'@nuxtjs/axios',// Relative to your project srcDir'~/modules/awesome.js',// Providing options['@nuxtjs/google-analytics', {ua: 'X1234567' }],// Inline definitionfunction () {}]}

字段build: <Boolean 或 Object>

Nuxt.js 允许我们在自动生成的 vendor.bundle.js 文件中添加一些模块，以减少应用 bundle 的体积。如果你的应用依赖第三方模块，这个配置项是十分实用的。Nuxt.js 使用 webpack-bundle-analyzer 分析并可视化构建后的打包文件，你可以基于分析结果来决定如何优化它。案例代码：

module.exports = {build: {analyze: true// oranalyze: {analyzerMode: 'static'}}}

字段devModules,

类似于module字段，但只运行于开发环境，不会在线上环境构建