分工合作的Nuxt資料夾們

Nuxt.js將每個功能區分為不同的資料夾與檔案，你可以很清楚明瞭地知道哪些頁面、套件、風格樣式、靜態檔案該放置在哪裡、設定要在哪裡調整。那以下就簡單說明一下，各個資料夾與檔案的作用～

_Assets

在這邊你可以放置沒有編譯過如scss,less, js等原始資料。在發佈時，會被 Webpack 處理，將多個檔案壓縮在一起。並不侷限一定要放在此資料夾內，在各個page內也可將 js 分離出 .vue 來管理，如下：

- index.vue
- script.js
- style.scss
- about
    - about.vue
    - script.js
    - style.scss

_Compnents

根據網站需求，可以將重複使用的區塊劃分出來，各別製作成元件，譬如 header 、 footer ，或者是輪播slideshow、社群分享等重覆利用性高的區塊。

- index.vue
- about
    - about.vue

_layouts

作為網頁整體風格的切換，例如有三個風格，預設（default.vue）、黑底白字(black.vue)、白底黑字(white.vue)，若頁面要使用不同風格，就在各個page底下做設定。例如about.vue要使用黑底白字的layouts：

<template>
  <div>
    <p>Hi World</p>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>

<script>
export default {
  layout: 'dark'
}
</script>

_Page

Nuxt.js會根據你在page底下建立的.Vue檔來建立路徑，比如說：

- index.vue
- about
    - about.vue

要是設置連結時，只需要寫 /about 即可。

_plugins

當專案需要加入第三方元件時，皆是在此資料內。Nuxt支援的如vue-scrollto（錨點連結）、vue-slick（輪播）等工具。以vue-scrollto為例：先用 npm 安裝好vue-scrollto之後，要在 plugins 底下建置 vue-scrollto.js（取同名利於分辨），在檔案內填入以下內容：

import Vue from 'vue';
import VueScrollTo from 'vue-scrollto';

Vue.use(VueScrollTo)

若是有全域需要使用到的例如script.js，也是放置在此。連結方式就在nuxt.config.js中設定。

plugins: ['./plugins/script','./plugins/vue-scrollto'],
build: {
    vendor: ['vue-scrollto']
}

_static

看名稱就知道，這裡是放置靜態檔案的地方，且此處的檔案不會被Webpack處理，最後發佈時會直接複製到 dist 資料夾內。例如圖片與文字檔，不常見的音檔也可以放置在此處。

_store

這裡是存放 Vuex Store的檔案。建立index.js後即可啟用 Vuex store。到官方直接看範例會更清楚。

_dist

當你的網站已經完成，使用npm run generate後，就會生成此資料夾，內容就是網站的靜態文件。在這邊要特別注意輸出後檔案的路徑是否正確，若不正確你可以在 nuxt.config.js 中設定 router 與 publicPath 。

nuxt.config.js

這是Nuxt.js的自訂檔，注意不能更名！網站的head（包含meta, title, 也可設定外連的css與js）、plugins(_plugins中設定的js，要在此處設定)、build（可增加 webpack 設定、設定第三方元件模塊）等設定都在此處調整。

結語

總結來說，你會非常頻繁地使用 page 資料夾與 nuxt.config.js 這個檔案 ; page的檔案建議將 js, scss 等檔案分離出 .vue，利於維護較豐富的網站內容，且能針對相同元件而不同頁面的個別做設定。而且在輸出靜態文件時，要非常注意網站是否有正確執行第三方套件、且 src 的靜態文件是否都有顯示。

上述所說，你是不是比較清楚Nuxt.js的目錄了？若還有不清楚或想更加了解的地方，建議您可以參考[官方資料]。(https://nuxtjs.org/guide/directory-structure)。

【Nuxt教學】實作引用 Fontawesome 5 到Nuxt專案

延伸閱讀

步驟1、2、3，安裝Nuxt超簡單！

Nuxt基礎教學：一分鐘搞懂Nuxt的資料夾配置