通過VuePress管理專案文件(二)

qfstudy發表於2018-12-05
Vue

通過vue元件實現跟：Element相似的效果。需要在VuePress網站中將自己的專案中的Vue元件執行結果展示在頁面中。 至於如何將元件在VuePress網站中展示請參考：segmentfault.com/a/119000001…

當專案中的Vue元件的執行結果可以在頁面展示以後，接下來就是要將自己的程式碼展示在Vuepress網站中。

在VuePress網站中展示自己的程式碼

因為可以在markdown中使用Vue元件，所以可以自己專門寫一個Vue元件來寫一個效果跟：Element相似的頁面。

在進行下一步之前先執行兩名兩個命令： yarn add vue-highlight.js yarn add highlight.js

因要在元件中使用這兩個包，所以需要做一些配置，在docs\.vuepress下新增enhanceApp.js檔案，將下面程式碼加進去

import  VueHighlightJS  from  'vue-highlight.js';
import  'highlight.js/styles/dark.css';
export  default ({
	Vue, 
}) => {
	Vue.use(VueHighlightJS)
}
複製程式碼

接下來就是寫Vue元件，用來實現自己專案元件和程式碼的展示效果，也就是專案文件的佈局和樣式。 由於程式碼比較多，這裡就不放程式碼了，可以從這裡下載這次案例的所有程式碼GitHub

效果圖

4.png

5.png

到了這一步，大部分功能基本上都實現了。

自定義樣式

在docs\.vuepress下新增override.styl,通過編輯override.styl檔案可以更改VuePress預設樣式。 如果需要對頁面的樣式進行修改，只需要在override.styl在這個.theme-container.custom-page-class{}裡面對頁面中對應的類進行修改就可以修改頁面預設樣式。例子如下:

.theme-container.custom-page-class {
	/* 特定頁面的 CSS */
	/*.sidebar在頁面中是側邊欄的類名，通過這個可以修改側邊欄的樣式和佈局*/
	.sidebar{
		width: 16rem;
	}
	@media(max-width:  959px){
		.sidebar{
			width: 15rem;
		}
	}
}
複製程式碼

寫好這個以後，在需要修改預設樣式的頁面中將這個檔案引入使用，使用方法如下： 在對應的頁面的markdown檔案中新增pageClass: custom-page-class，custom-page-class這個得跟override.styl檔案中.theme-container.custom-page-class的一樣。 在icon.md檔案的開頭新增：

---
pageClass: custom-page-class
---
複製程式碼

這樣就可以修改icon這個頁面的預設樣式

需要注意的是在markdown使用元件，需要用<ClientOnly></ClientOnly>將元件包裹起來，否則會報錯。如：

<ClientOnly>
  <Icon-vi-icon/>
</ClientOnly>
複製程式碼

本次案例程式碼:GitHub

相關文章