最近在工作上剛好完成了我的第一份前端程式工作，內容是後台報表頁面，主要統計前台活動的各項數劇並用圓餅圖及折線圖顯示，頁面本身沒什麼難度，但API對我這個新手來說就不一樣了，一開始只知道是跟後端要資料而已，其它全部不知道，還好靠著許多前輩的指點，終於成功完成了！可以靠著選擇不同時間區段切換圖表內容，還能以日、週、月為單位顯示資料，這真的要感謝許多熱心指導的同事！

Nuxt.js

不過開始學使用API之前，會需要再安裝一個應用框架來協助你，這次專案使用的是Nuxt.js，它是一個基於Vue.js的應用框架，能幫你建立一個具有彈性的專案，Nuxt.js會幫你將各功能分為不同的資料夾與檔案，讓你可以很清楚的知道哪些「頁面」、「套件」、「檔案」、「設定」在哪裡，協助你更方便輕鬆的開發。

安裝流程請直接參考以下：

Nuxt.js安裝
https://zh.nuxtjs.org/guide/installation

安裝完成後，讓我們先來簡單認識一下各個資料夾就好，之後靠著實做，你會更容易了解：

• assets：這裡面專門用來放沒有編譯過、共用的scss、js、img等。

• compnents：相信這個你一定很熟了！忘記的話再回頭看一下喔！

  Vue[08]-Components
  https://ithelp.ithome.com.tw/articles/10202766

• layouts：網站頁面的版型佈局都在這，設計好後就能直接在頁面使用，例如我在layouts裡新增了一個版型佈局default，接著就能在page裡加入，如下範例：

<script>
  export default {
    name: 'about',
    layout: 'default',
    head: {
      title: '關於我',
      titleTemplate: '%s - 鐵人30天'
    }
  }
</script>

• node_modules：下載的工具、套件都存放在這裡。
• pages：這就很好懂了！顧名思義就是你的頁面囉！裡面所有的.vue文件會自動生成對應的Router配置。
• plugins：我們在做網站時，不需要什麼都自已花時間做，網路上有很多好用的插件分享，例如我這次使用的圖表，就是使用VueHighcharts套件，而plugins還有一個特點，它是支援全域的喔！
• static：放靜態檔案的地方，這裡的檔案不會被打包(Webpack)處理。
• store：放置Vuex Store的檔案，裡面包含state(api抓回的資料會存放到這)。

對資料夾有點簡單的認識後，明天就來看看api流程吧！