VuePress 1.x 版的架構核心：擴充套件

VuePress 目前的大版本號是 1.x ，而與 0.x 版相比，最重大的改變就是架構上使用 Pluggable ，採用以擴充套件為根基的設計。

其實 VuePress 本身也有許多的功能也都是包裝成擴充套件來完成的，其實就連前面提到過的專案設定檔 .vuepress/config.js 和主題本身也都被視為擴充套件的喔！

預設載入的擴充套件

就像前面說的，VuePress 本身有許多的功能也都是使用套件來完成的，這邊就列出我們在使用 VuePress 預設主題的時候，預設會載入的套件吧。

VuePress 內建的套件

• ＠vuepress/plugin-last-updated
• @vuepress/plugin-register-components

預設主題內建的套件

• @vuepress/plugin-active-header-links
• @vuepress/plugin-nprogress
• @vuepress/plugin-search
• vuepress-plugin-container
• vuepress-plugin-smooth-scroll

這邊沒有要你去查每個一個套件的功能，只是想幫助你理解，擴充套件的使用是 VuePress 1.x 版的核心概念，不只是在最核心的架構本身使用套件，甚至官方的預設主題中也使用了非官方的套件： vuepress-plugin-container 以及 vuepress-plugin-smooth-scroll 唷！

使用擴充套件

那麼如果我們想在專案中實作某項功能，其實就可以先找看看該功能是否已經有套件可以使用了，畢竟在大多數的情況下，實在沒有必要自己造輪子。

這時候除了官方提供的套件以外，其實也可以到 Awesome VuePress 這邊來看看，而且在這邊不只有列出許多非官方的套件可以提供參考，也可以看到很多其他的資源喔。

而套件的安裝其實也跟主題很像，先找到你想要安裝的套件之後，透過 yarn add vuepress-plugin-xx 就可以安裝進專案中了，只是也別忘了跟主題一樣要到 .vuepress/config.js 進行相關設置喔！

套件的設定

// .vuepress/config.js
module.exports = {
  plugins: [ 'vuepress-plugin-xx', 'vuepress-plugin-xxx' ]
}

發現了嗎？就是這麼簡單，只要在設定檔中加入 plugins 的設置，透過陣列來填入你需要的套件名稱就可以將套件啟用了。

但如果你所使用的某些套件，需要進行額外的客製化設定，該怎麼處理呢？

其實只要把「陣列 Array」改寫成「物件 Object」的形式就可以囉：

module.exports = {
  plugins: {
    'vuepress-plugin-xx': false, // 禁用該套件
		'vuepress-plugin-xxx': {...}, // 套件的設定檔寫在物件中，內容請參考套件文件
		'vuepress-plugin-xxxxx': true, // 啟動該套件
  }
}