什么是VuePress

VuePress由兩部分組成：一個(gè)基于Vue的輕量級(jí)靜態(tài)網(wǎng)站生成器，以及為編寫技術(shù)文檔而優(yōu)化的默認(rèn)主題。 它是為了滿足Vue自己的子項(xiàng)目文檔的需求而創(chuàng)建的。

VuePress為每一個(gè)由它生成的頁(yè)面提供預(yù)加載的html，不僅加載速度極佳，同時(shí)對(duì)seo非常友好。一旦頁(yè)面被加載之后，Vue就全面接管所有的靜態(tài)內(nèi)容，使其變成一個(gè)完全的SPA應(yīng)用，其他的頁(yè)面也會(huì)在用戶使用導(dǎo)航進(jìn)入的時(shí)候來(lái)按需加載。

VuePress是怎樣運(yùn)作的

一個(gè)VuePress應(yīng)用實(shí)際上就是基于Vue、VueRouter以及webpack,如果你以前就用過(guò)vue,那么當(dāng)你在用VuePress開(kāi)發(fā)或者定制自己的主題的時(shí)候，你會(huì)發(fā)現(xiàn)使用體驗(yàn)幾乎是一毛一樣~你甚至可以用Vue DevTools來(lái)debug你的定制主題！

在build的過(guò)程中，VuePress會(huì)通過(guò)創(chuàng)建一個(gè)服務(wù)端渲染的版本，并訪問(wèn)每一個(gè)路由來(lái)渲染相關(guān)的html。這種方法是來(lái)自Nuxt的nuxt generate命令,和其他項(xiàng)目如Gatsby的啟發(fā)。

每個(gè)markdown文件都被編譯為HTML，然后作為Vue組件的模板進(jìn)行處理。這樣你可以在markdown文件中直接使用Vue，這在需要嵌入動(dòng)態(tài)內(nèi)容的時(shí)候非常有用。

VuePress特性

• 內(nèi)置的markdown擴(kuò)展專為技術(shù)文檔優(yōu)化
• 可以在markdown文件中直接使用vue
• vue驅(qū)動(dòng)的可定制畫主題
• 支持PWA - Progressive Web App（漸進(jìn)式網(wǎng)頁(yè)應(yīng)用程序）
• 集成Google Analytics
• 一個(gè)默認(rèn)的VuePress包括：

1. 響應(yīng)式布局
2. 可選的主頁(yè)
3. 一個(gè)簡(jiǎn)單的頭部搜索組件
4. 可定制的導(dǎo)航欄和側(cè)邊欄
5. 自動(dòng)生成的GitHub鏈接和頁(yè)面編輯鏈接

VuePress 享用 Vue + webpack 開(kāi)發(fā)環(huán)境，在 markdown 中使用 Vue 組件，并通過(guò) Vue 開(kāi)發(fā)自定義主題。VuePress 為每一個(gè)由它生成的頁(yè)面提供預(yù)加載的 html，不僅加載速度極佳，同時(shí)對(duì) seo 非常友好。一旦頁(yè)面被加載之后，Vue 就全面接管所有的靜態(tài)內(nèi)容，使其變成一個(gè)完全的 SPA 應(yīng)用，其他的頁(yè)面也會(huì)在用戶使用導(dǎo)航進(jìn)入的時(shí)候來(lái)按需加載。

# install
npm install -g vuepress
# create a markdown file
echo '# Hello VuePress' > README.md
# start writing
vuepress dev
# build to static files
vuepress build

總結(jié)

以上所述是小編給大家介紹的基于VuePress 輕量級(jí)靜態(tài)網(wǎng)站生成器的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！