快捷導(dǎo)航

基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗(yàn)

更新時(shí)間：2018年04月17日 12:04:57 作者：狗子略略略

VuePress為每一個(gè)由它生成的頁面提供預(yù)加載的html，不僅加載速度極佳，同時(shí)對seo非常友好。這篇文章主要介紹了基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗(yàn),需要的朋友可以參考下

什么是VuePress

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

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

參考官方文檔可知該項(xiàng)目有一下特點(diǎn)：

內(nèi)置markdown（基礎(chǔ)功能）
支持PWA
集成了Google Analytics
擁有一套默認(rèn)主題（風(fēng)格與(官方文檔)[https://vuepress.vuejs.org]一致）
自動(dòng)生成的GitHub鏈接和頁面編輯鏈接

快速上手

安裝

初始化項(xiàng)目

npm init -y

安裝 vuepress，也可以全局安裝

npm install -D vuepress

創(chuàng)建文章文件夾

mkdir docs

配置package.json

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

書寫

直接在docs文件夾下新建markdown文件即可編輯書寫文章

預(yù)覽

npm run docs:dev

打開 http://localhost:8080/

構(gòu)建

npm run docs:build

生成的文件默認(rèn)會在 .vuepress/dist 文件夾下

自定義配置

可以將配置文件寫到 .vuepress/config.js 中

添加頂部導(dǎo)航

module.exports = {
 themeConfig: {
  nav: [
   { text: 'Home', link: '/' },
   { text: 'Guide', link: '/guide/' },
   { text: 'External', link: 'https://google.com' },
  ]
 }
}

添加側(cè)邊欄

module.exports = {
 themeConfig: {
  sidebar: [
   '/',
   '/page-a',
   ['/page-b', 'Explicit link text']
  ]
 }
}

同時(shí)支持分組添加側(cè)邊欄 eg:

module.exports = {
 themeConfig: {
  sidebar: [
   {
    title: 'Group 1',
    collapsable: false,
    children: [
     '/'
    ]
   },
   {
    title: 'Group 2',
    children: [ /* ... */ ]
   }
  ]
 }
}

總結(jié)

以上所述是小編給大家介紹的基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗(yàn) ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

vue
ssr

相關(guān)文章

vue路由懶加載的實(shí)現(xiàn)方法
本篇文章主要介紹了vue路由懶加載的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
vue create、vue webpack init創(chuàng)建vue項(xiàng)目產(chǎn)生的項(xiàng)目文件的區(qū)別
這篇文章主要介紹了vue create、vue webpack init創(chuàng)建vue項(xiàng)目產(chǎn)生的項(xiàng)目文件的區(qū)別及說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue自定義鍵盤信息、監(jiān)聽數(shù)據(jù)變化的方法示例【基于vm.$watch】
這篇文章主要介紹了vue自定義鍵盤信息、監(jiān)聽數(shù)據(jù)變化的方法,結(jié)合實(shí)例形式分析了vue.js基于vm.$watch進(jìn)行事件監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下
2019-03-03
淺談VUE uni-app 基礎(chǔ)組件
這篇文章主要介紹了uni-app 的基礎(chǔ)組件，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2021-10-10
vue 子組件watch監(jiān)聽不到prop的解決
這篇文章主要介紹了vue 子組件watch監(jiān)聽不到prop的解決，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue插件之滑動(dòng)驗(yàn)證碼用法詳解
這篇文章主要介紹了Vue插件之滑動(dòng)驗(yàn)證碼用法,結(jié)合實(shí)例形式詳細(xì)分析了Vue滑動(dòng)驗(yàn)證碼插件相關(guān)使用方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
VUE中的mapState和mapActions的使用詳解
在VUE項(xiàng)目中經(jīng)常會用到mapState和mapActions，mapState主要用于同步全局的變量或者對象，這篇文章主要介紹了VUE中的mapState和mapActions的使用,需要的朋友可以參考下
2022-06-06
詳解Vue生命周期和MVVM框架
MVVM是Model-View-ViewModel的縮寫，MVVM是一種設(shè)計(jì)思想，這篇文章主要介紹了Vue生命周期和MVVM框架,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-07-07
vue自定義一個(gè)v-model的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue自定義一個(gè)v-model的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-06-06
如何使用electron將vue項(xiàng)目打包成.exe文件(保姆級教程)
本文給大家介紹如何使用electron將vue項(xiàng)目打包成.exe文件,大家要注意一下vue2項(xiàng)目,使用的vue-element-admin框架,用electron打包成.exe文件,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2024-03-03