Vue進階（九十六）：VuePress

佛語：“贈人玫瑰，手留余香。” 若您感覺博文內容與您有益，請并！

1.介紹

VuePress ,一個全新的基于 vue 的靜態網站生成器，實際上就是一個 vue 的 spa 應用，內置 webpack，可以用來寫文檔。

VuePress 由兩部分組成：一個以 Vue 驅動的主題系統的簡約靜態網站生成工具，和一個為編寫技術文檔而優化的默認主題。它是為了支持 Vue 子項目的文檔需求而創建的。

由 VuePress 生成的每個頁面，都具有相應的預渲染靜態 HTML，它們能提供出色的加載性能，并且對 SEO 友好。頁面加載之后，Vue 就會將這些靜態內容，接管為完整的單頁面應用程序(SPA)。當用戶在瀏覽站點時，可以按需加載其他頁面。

2.VuePress 優點

界面簡潔優雅

容易上手

更好的兼容、擴展 Markdown 語法

響應式布局，PC端、手機端

Google Analytics 集成

支持 PWA

3.運行原理

VuePress 網站實際上是由 Vue, Vue Router 和 webpack 驅動的單頁面應用程序。如果你以前使用過 Vue，那么在編寫或開發自定義主題時（甚至可以使用 Vue DevTools 來調試你的自定義主題！），你會融入到熟悉的開發體驗中！

在構建過程中，我們會創建應用程序的服務器渲染版本，并且實際上是通過訪問每個路由，來渲染相應的 HTML。這種方式受到 Nuxt 的 nuxt generate 命令以及 Gatsby 等其他項目的啟發。

4.項目搭建

4.1 項目結構

首先說明一下官方推薦的目錄結構

4.2 創建項目文件夾

可以右鍵手動新建，也可以使用 mkdir 命令新建：

mkdir vuepressBlogDemo

1

全局安裝 VuePress

npm install -g vuepress

1

進入 vuepressBlogDemo 文件夾，初始化項目

使用 npm init 或 npm init -y（默認yes）

npm init -y

1

4.3 創建文件夾和文件

在 vuepressBlogDemo 文件夾中創建 docs 文件夾，在 docs 中創建 .vuepress 文件夾，在.vuepress中創建 public 文件夾和 config.js 文件，最終項目結構如下所示：

vuepressBlogDemo

├─── docs

│ ├── README.md

│ └── .vuepress

│ ├── public

│ └── config.js

└── package.json

在 config.js 文件中配置網站標題、描述、主題等信息

module.exports = { themeConfig: { nav: [{ text: '唐', link: '/tang/' }, { text: '宋', link: '/song/' }, { text: '更多', link: '/more/' }], sidebar: { '/tang/': [ ['', '簡介'], { title: '代表人物', collapsable: false, children: [ 'libai/' ] } ], '/song/': [ ['', '簡介'], { title: '代表人物', collapsable: false, children: [ 'liqingzhao/' ] } ] } } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

其中，/tang/、/song/、’'和libai/等表示當前導航欄或側邊欄點擊所跳轉的路由地址（即相應的.md文件），按照路由創建對應的文件。

''會顯示為當前目錄下的README.md文件。

[’’, ‘簡介’]當前側邊欄的title為簡介。

/tang/表示為tang文件夾下的README.md，/tang表示為tang.md文件。

可以使用sidebar: auto自動生成側邊欄，這里采用自定義側邊欄。

在 package.json 文件里添加兩個啟動命令

"scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs" }

1

2

3

4

4.4國際化

在剛剛config.js中添加locales字段，以配置國際化。

locales: { '/': { // 中文 lang: 'zh-CN', title: '詩詞鑒賞', description: '靜態站點 詩詞鑒賞' }, '/en/': { // 英文 lang: 'en-US', // 將會被設置為 的 lang 屬性 title: 'Appreciation of poetry', description: 'Static Site Appreciation of poetry' } }

1

2

3

4

5

6

7

8

9

10

11

12

配置默認主題的導航欄和側邊欄支持國際化，在上述themeConfig中增加locales字段：

themeConfig: { locales: { '/': { // 默認語言，這里為中文 nav: [{ text: '唐', link: '/tang/' }], sidebar: { // ... } }, '/en/': { // 英文 nav: [{ text: 'Tang', link: '/en/tang/' }], sidebar: { // ... } } } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

nav和sidebar和前文字段含義相同。

相應的也要增加國際化相應的文件夾及文件，整體結構跟原結構一致，如圖：

4.5 項目啟動

一切就緒，啟動項目

npm run dev

1

5.部署上線

項目開發完畢后，便可像部署其他前端Vue項目一樣進行項目部署上線，依賴系統只需要通過鏈接形式，訪問該系統上的相關支持文檔。從而實現小助手功能。

6.示例演示

部署在本地的項目演示效果如下：

國際化部分，還需要再做研究設計。

7.一些小亮點

完成了基礎搭建后，就可以在docs目錄下新建 .md 文件寫文章了（.md 是 Markdown 語法文件，你需要知道 Markdown 的一些基本寫法）

vuepress支持自定義布局以及自定義主題，并且可以使用很多插件以及自定義插件。

javaScript Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。