iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
1
Modern Web

網頁設計靠 Vue.js 轉前端系列 第 29

Vue[29]-Nuxt.js

最近在工作上剛好完成了我的第一份前端程式工作,內容是後台報表頁面,主要統計前台活動的各項數劇並用圓餅圖及折線圖顯示,頁面本身沒什麼難度,但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流程吧!


上一篇
Vue[28]-Bootstrap
下一篇
Vue[30]-API 與 30天轉職心得
系列文
網頁設計靠 Vue.js 轉前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言