iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 24
1
Modern Web

透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 系列 第 24

VuePress : theme/enhanceApp.js 主題增強術

24. VuePress : theme/enhanceApp.js 主題增強術

上一篇說明了主題在需要安裝 plugins 外掛套件時需要配置的 theme/index.js 主題配置檔,但有時我們的需求並不是 plugins 可以解決的,需要更直接的在專案中引入模組時該怎麼辦呢?


theme/enhanceApp.js 的用處

theme 資料夾中,還有一個約定檔案叫做 enhanceApp.js 這個檔案可以 export default 一個 function 來引入一些模組進入系統、設置路由 hooks 等等行為,具備了很強的功能。

這個 hooks function 被 VuePress 呼叫時會帶入一個物件作為參數,這個物件中具有 VueoptionsroutersiteDate 四個重要的屬性,而我們在使用上習慣直接使用 JavaScript 的解構技巧來取出這些屬性進行使用:

export default ({
  Vue, // VuePress 正在使用的 Vue 構造函數
  options, // 附加到根實例的一些選項
  router, // 當前應用的路由實例
  siteData // 站點元數據
}) => {
  // ...做一些其他的應用級別的優化
}

在 VuePress 中安裝 Element UI

這邊就示範一下透過 theme/enhanceApp.js 來將 Vue 常用的 Element UI 這個 UI 套件安裝進專案中吧。

首先當然要先進行安裝: yarn add element-ui

然後就可以在檔案中將所需的模組引入,接著用解構出來的 Vue 實例來進行 Element UI 的安裝步驟就完成啦!

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

export default ({
    Vue, // the version of Vue being used in the VuePress app
    options, // the options for the root Vue instance
    router, // the router instance for the app
    siteData // site metadata
}) => {
    Vue.use(ElementUI);
}

上一篇
VuePress : `theme/index.js` 主題配置文件
下一篇
VuePress 的全域計算屬性
系列文
透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 30

尚未有邦友留言

立即登入留言