DAY2 起手式--Nuxt.js目录结构

目录结构落落长是怎样!? 没关系，一起简单了解

上篇我们建立了 Nuxt.js 环境，应该可以看到资料夹内变得琳琅满目，多了一堆资料夹跟文件，看的灰煞煞。
别紧张，其实只是把一个专案的内容档案分门别类而已，让我们一个一个来了解一下吧。

• assets：放静态内容，像是 scss、img 之类的，放在这边的东西就会透过 webpack 帮我们编译罗，图片也会经过处理，顺便分享一下通常我的结构会是这样的

├─ assets
│  ├─ img
│  └─ scss

• components：放 Vue 的元件，像是 Navbar、Dropdowns、Alert 等等
• layouts：页面布局，以电商网站而言就会分前台、後台布局，如下图。
  

前台的 layout 程序码示范，在 layouts 资料夹新增 FrontEnd.vue

<template>
  <navbarComponent/>
  <nuxt /> 
  <footerComponent/>
</template>

<nuxt/>就当作<router-view/>使用

在 page 的页面需套用 layout 布局时，增加 layout 设定即可，如下

<template>
  <!-- Your template -->
</template>
<script>
  export default {
    layout: 'FrontEnd'
    // page component definitions
  }
</script>

layouts的档案除了可以当layout之外，其实就跟page的档案一样

• middleware：进入页面前的验证，像是验证是否已登入。
• pages：每一个独立的页面，像是登入页、商品页、结帐页面。
  重点来了，Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
• plugins：插件。
• static：放置不需要被 webpack 打包的内容。
• store： Vuex 使用。

看完有没有觉得跟 Vue-Cli 目录结构差不多呢？
只是多了一些功能，像是威力加强版的概念。

预计明天会针对 pages 部分做比较详细的说明，也会说明 router 的配置。

因我实力薄弱，资历尚浅，为了尽量避免给予错误的资讯，说明的都是我比较有把握的内容，所以内容看起来可能很粗浅。只是我想还是尽力而为，对於我自己研究使用上踩到的小小的坑，能分享我的见解给遇上跟我一样问题的人，若能多少为你们带来一些协助的话，那就真是太好了。
如前辈大德有发现遗漏或解释错误，恳请鞭我（小小力），感谢！