如何使用網站產生器VuePress

這次帶給大家怎麼使用網站產生器VuePress，使用網站產生器VuePress的注意事項有哪些，以下就是實戰案例，一起來看一下。

什麼是VuePress

VuePress由兩部分組成：一個基於Vue的輕量級靜態網站生成器，以及為編寫技術文檔而優化的預設主題。它是為了滿足Vue自己的子專案文件的需求而創建的。

VuePress為每個由它產生的頁面提供預先載入的html，不僅載入速度極佳，同時對seo非常友善。一旦頁面被載入之後，Vue就全面接管所有的靜態內容，使其變成一個完全的SPA應用，其他的頁面也會在使用者使用導航進入的時候來按需載入。

參考官方文件可知該專案有一下特點：

• 內建markdown（基礎功能）

• 支援PWA

• 整合了Google Analytics

• 擁有一套預設主題（風格與(官方文件)[https://vuepress.vuejs.org]一致)

• 自動產生的GitHub連結與頁面編輯連結

#快速上手

安裝

初始化專案

npm init -y

安裝vuepress，也可以全域安裝

npm install -D vuepress

建立文章資料夾

mkdir docs

設定package.json

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

書寫

直接在docs資料夾下新建markdown檔案即可編輯書寫文章

#預覽

npm run docs:dev

#開啟http://localhost:8080/

建置

#npm run docs:build

#產生的檔案預設會在.vuepress/dist 資料夾下

自訂設定

#可以將設定檔寫入.vuepress/config.js 中

添加頂部導覽

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

新增側邊欄

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

同時支援分組新增側邊欄eg:

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue中有哪些循環遍歷指令

#jQuery如何做出手動拖曳控制進度條功能

以上是如何使用網站產生器VuePress的詳細內容。更多資訊請關注PHP中文網其他相關文章！