六月 27, 2018 | 前端與Vue

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

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

分工合作的Nuxt資料夾們

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


_Assets

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

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

<br />

_Compnents

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

- index.vue
- about
    - about.vue

<br />

_layouts

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


  &lt;div&gt;
    &lt;p&gt;Hi World&lt;/p&gt;
    Home page
  &lt;/div&gt;



export default {
  layout: 'dark'
}

<br />

_Page

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

- index.vue
- about
    - about.vue

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

<br />

_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']
}

<br />

_static

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

<br />

_store

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

<br />

_dist

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

<br />

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)。

hashtags: