Nuxt项目各级目录功能一览

nuxt-test
├─nuxt.config.js
├─package.json
├─README.md
├─store
|   └README.md
├─static
|   ├─favicon.ico
|   └README.md
├─server
|   └index.js
├─plugins
|    ├─element-ui.js
|    └README.md
├─pages
|   ├─index.vue
|   └README.md
├─middleware
|     └README.md
├─layouts
|    ├─default.vue
|    └README.md
├─components
|     ├─Logo.vue
|     └README.md
├─assets
|   └README.md

一、pages目录

pages 用于构建Nuxt的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

可以通过文件/文件夹名称规则，生成动态路由、嵌套路由等

二、server目录

server Nuxt服务端代码

三、layouts目录

layouts 存放Nuxt的布局组件，该目录不能被重命名。

如已有layouts/mine.vue布局文件，可以在pages/*.vue文件下这样使用对应布局

export default {
  layout: 'mine'
}

四、components目录

components组件文件夹

建议所有的组件都写到这个目录，虽然也可以写到pages里面目录下，但是不利于后面生成站点地图文件sitemap.xml。

否则还需要特殊处理，因为站点地图会根据路由自动生成，路由又是根据pages下所有文件/文件夹自动生成的。

所有组件最好不要写到pages目录下。

五、assets/static目录

assets和static都用于放置静态资源，但是它们又有什么区别呢？

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

static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。 举个例子: /static/robots.txt 映射至 /robots.txt

在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。

六、store目录

store 目录用于Nuxt的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。

七、middleware目录

middleware 存放应用的中间件

八、plugins目录

plugins 放置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件

九、nuxt.config.js配置

进行全局、打包等相关配置。

如 1、head，进行全局的页面头部配置，可以配置title、meta、keywords等等

2、plugins，进行插件配置

后面推出更详尽的配置说明