Nuxt.js 開發筆記 - 目錄結構

說明文件原文看這裡:https://nuxtjs.org/guide/directory-structure

主要幾個基本目錄與檔案

  • -assets
    存放未編譯過的原始資料,如scss,less, javascript
  • -compnents
    自訂的 Vue.js 組件,這個目錄下面的組件中的 data 不會被nuxt.js 增強(supercharge),所以不會有像page 一樣具備 asyncData 的特性
  • -layouts
    顧名思義,就是網站的layout,應用上,可用作整體風格(global stylying)的切換。
  • -middleware
    本目錄用於存放中間件的程式,在render頁面之前,會先經過middleware,可在此進行使用者驗證之類的作業
  • -pages
    存放頁面樣版的地方
  • -plugins
    存放javascript plugins的地方,會在Vue.js開始實例化root之前執行的部分,(當vue.js實例化之後,就不能再額外進行DOM的操作)
  • -static
    存放靜態文件的地方,如圖片、文字檔...之類的東西,本目錄下的檔案,會網站服務啟用後,被mapping到網站的根目錄,如 /static/robot.txt 會變成 /robot.txt
  • -store
    存放 Vuex Store的檔案,在本目錄下建立一個index.js 就可啟用 Vuex store 
  • -nuxt.config.js
    Nuxt.js 的自訂組態檔,不能更名

備註:   

~ 或 @ 是 srcDir 的 別名 , ~~或@@則是rootDir的別名。  也就是說在template中使用 ~/assets/image.png ,就可以用以指向 /assets/image.png。
預設情況下, srcDir 與 rootDir是相同的