vue+koa2 美团开发实战2-目录结构

工欲善其事必先利其器，前面我们知道了怎么利用Nuxt.js去创建项目，今天我们就来聊一聊利用Nuxt.js创建出来的项目的目录结构，了解了这些基本的东西，才能让我们在后面的开发中越来越得心应手。

这是我们vscode打开项目后所显示的项目的目录结构：

接下来我们详细的去了解这些目录的用途。

assets
资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

我们在assets目录下面添加一张图片logo.png作为我们后续使用的项目程序logo。

然后我们在logo.vue简单修改下代码：

<template>
  <div>
    <img src="@/assets/logo.png" />
  </div>
</template>
  
或者：

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

保存代码，然后看看页面效果：

这里我们需要主要的一点是，在nuxt 2.x的版本中，如果你在css代码中设置图片的src，那么上面的写法可能会有问题。

<template>
  <div class="background"></div>
</template>

<style>
.background {
  background: url('~/assets/logo.png');
}

.background2 {
  background: url('@/assets/logo.png');
}
</style>

此时程序会发生变异错误：

 ./@/assets/logo.png in ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./components/Logo.vue?vue&type=style&index=0&lang=css&

此时我们唯一的出路就是使用下面的格式进行书写：

在url CSS引用中使用~assets（没有斜杠）或@别名，即background:url("~assets/logo.png")

另外，大伙也不用去尝试@assets/logo.png 这个写法，这个也是错误的。

注意：在此编译过程中，所有的资源URL例如 、 background: url(…) 和 CSS中的 @import 均会被解析成模块通过 require 引用。

那么在什么时候该把我们的资源文件放在这个目录呢？

当静态资源文件需要 Webpack 做构建编译处理，可以放到 assets 目录

components
官方文档介绍：

组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js
组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。

也就是说这个目录就是用来存放我们自定义的vue组件的目录，Nuxt.js 不会扩展增强该目录下 Vue.js，也就意味着这个目录我们是可随意进行操作的。

layouts