六月 27, 2018 | 前端與Vue
Nuxt基礎教學:一分鐘搞懂Nuxt的資料夾配置
分工合作的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:
<div>
<p>Hi World</p>
Home page
</div>
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)。