基于VuePress 輕量級靜態(tài)網(wǎng)站生成器的實(shí)現(xiàn)方法
什么是VuePress
VuePress由兩部分組成:一個基于Vue的輕量級靜態(tài)網(wǎng)站生成器,以及為編寫技術(shù)文檔而優(yōu)化的默認(rèn)主題。 它是為了滿足Vue自己的子項(xiàng)目文檔的需求而創(chuàng)建的。
VuePress為每一個由它生成的頁面提供預(yù)加載的html,不僅加載速度極佳,同時對seo非常友好。一旦頁面被加載之后,Vue就全面接管所有的靜態(tài)內(nèi)容,使其變成一個完全的SPA應(yīng)用,其他的頁面也會在用戶使用導(dǎo)航進(jìn)入的時候來按需加載。
VuePress是怎樣運(yùn)作的
一個VuePress應(yīng)用實(shí)際上就是基于Vue、VueRouter以及webpack,如果你以前就用過vue,那么當(dāng)你在用VuePress開發(fā)或者定制自己的主題的時候,你會發(fā)現(xiàn)使用體驗(yàn)幾乎是一毛一樣~你甚至可以用Vue DevTools來debug你的定制主題!
在build的過程中,VuePress會通過創(chuàng)建一個服務(wù)端渲染的版本,并訪問每一個路由來渲染相關(guān)的html。這種方法是來自Nuxt的nuxt generate命令,和其他項(xiàng)目如Gatsby的啟發(fā)。
每個markdown文件都被編譯為HTML,然后作為Vue組件的模板進(jìn)行處理。這樣你可以在markdown文件中直接使用Vue,這在需要嵌入動態(tài)內(nèi)容的時候非常有用。
VuePress特性
- 內(nèi)置的markdown擴(kuò)展專為技術(shù)文檔優(yōu)化
- 可以在markdown文件中直接使用vue
- vue驅(qū)動的可定制畫主題
- 支持PWA - Progressive Web App(漸進(jìn)式網(wǎng)頁應(yīng)用程序)
- 集成Google Analytics
- 一個默認(rèn)的VuePress包括:
- 響應(yīng)式布局
- 可選的主頁
- 一個簡單的頭部搜索組件
- 可定制的導(dǎo)航欄和側(cè)邊欄
- 自動生成的GitHub鏈接和頁面編輯鏈接
VuePress 享用 Vue + webpack 開發(fā)環(huán)境,在 markdown 中使用 Vue 組件,并通過 Vue 開發(fā)自定義主題。VuePress 為每一個由它生成的頁面提供預(yù)加載的 html,不僅加載速度極佳,同時對 seo 非常友好。一旦頁面被加載之后,Vue 就全面接管所有的靜態(tài)內(nèi)容,使其變成一個完全的 SPA 應(yīng)用,其他的頁面也會在用戶使用導(dǎo)航進(jìn)入的時候來按需加載。
# 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 輕量級靜態(tài)網(wǎng)站生成器的實(shí)現(xiàn)方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue實(shí)現(xiàn)當(dāng)前頁面刷新的4種方法舉例
我們在開發(fā)vue的頁面的時候,有時候會遇到需要刷新當(dāng)前頁面功能,但是vue框架自帶的router是不支持刷新當(dāng)前頁面功能,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)當(dāng)前頁面刷新的4種方法,需要的朋友可以參考下2023-04-04vuex state及mapState的基礎(chǔ)用法詳解
這篇文章主要介紹了vuex state及mapState的基礎(chǔ)用法詳解,本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04vue 自定指令生成uuid滾動監(jiān)聽達(dá)到tab表格吸頂效果的代碼
這篇文章主要介紹了vue 自定指令生成uuid滾動監(jiān)聽達(dá)到tab表格吸頂效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09一鍵將Word文檔轉(zhuǎn)成Vue組件mammoth的應(yīng)用詳解
這篇文章主要為大家介紹了一鍵將Word文檔轉(zhuǎn)成Vue組件mammoth的應(yīng)用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02