從了解 VuePress 的專案結構開始吧

首先呢，就先來說明一下「約定」的目錄結構吧！

我們先來回顧一下昨天建立的檔案結構：

.
├── README.md
│ 
├── news
│   ├── README.md
│   └── test.md
│ 
├── yarn.lock
│ 
└── package.json

這時候結構還非常的單純，如果只是要架一個簡單的文件網站，其實這樣就已經足夠囉！

但想必我們的需求不止如此對吧，那麼如果想要調整頁面的樣式或是加入客製化的功能，該怎麼做呢？

在專案中建立 .vuepress 進階設定資料夾

只要在專案中建立如下的資料夾結構，就可以透過各項設定讓 VuePress 網站符合你的需求囉！

.
├── .vuepress (可選的)
│   ├── components (可選的)
│   ├── theme (可選的)
│   │   └── Layout.vue
│   ├── public (可選的)
│   ├── styles (可選的)
│   │   ├── index.styl
│   │   └── palette.styl
│   ├── templates (可選的, 謹慎配置)
│   │   ├── dev.html
│   │   └── ssr.html
│   ├── config.js (可選的)
│   └── enhanceApp.js (可選的)
│ 
├── README.md
│ 
├── news
│   ├── README.md
│   └── test.md
│ 
├── config.js
│ 
├── yarn.lock
│ 
└── package.json

要注意一下命名喔，名稱要完全正確都是小寫才能「符合約定」

你有注意到嗎？其實包含 .vuepress 本身在內，內層的所有資料夾也都是「選用」的喔，沒有哪個檔案或目錄是必要的。

基本上就是一個「複寫」的概念，如果有需要特別設定的部分，再新增檔案來複寫就可以了，沒有的話就會按照預設值來跑，所以也不會造成錯誤。

.vuepress 結構說明

簡單說就是所有想要設定想要客製化的內容全部都在 .vuepress 這個資料夾處理。

這邊呢，就針對資料夾內約定可以設置的檔案與目錄來說明吧：

• components：該目錄中的 Vue 組件將會被自動註冊為全域組件，可以在不用 import 的情況下隨意調用，在 .md 中也能使用。
• theme：想自行開發主題的話，這裡就是主題的專案資料夾。
• styles：用來存放樣式相關的文件，其實最主要是下面列出的兩個 .styl 檔，是使用 Stylus 撰寫的，這也是一種 CSS 的預處理器。
  • index.styl：將會被自動引入的全域樣式，會添加在 CSS 樣式文件的結尾，所以會比預設的 CSS 樣式有更高的權重。
  • palette.styl：用來複寫預設的顏色變數，也可以用來設置新的 Stylus 顏色變數。
• public：存放靜態資源的資料夾，裡面的檔案不會經過 Webpack 處理。
• templates：存儲 HTML 模板的文件，沒有必要的話不用改動，想增加 meta 設定可以透過 config.js。
  • dev.html：可以複寫開發環境的 HTML 模板文件。
  • ssr.html：可以複寫最終編譯結果的 HTML 模板文件。
• config.js：專案的設定文件，網站的標題、簡介、主題設置等等都會透過這個檔案進行設定。
• enhanceApp.js：有需要安裝注入 Vue 的外掛或路由等邏輯時可以寫在這個檔案，官方網站上有範例。

客製化的關鍵：主題

看到這邊有沒有覺得頭昏眼花呢？希望我的說明能夠讓你對於 VuePress 的專案結構有個基本的了解。

明天，就來探討一下「主題」 theme 這個我認為整個 VuePress 最核心的項目啦！