這篇文章主要介紹基于vue-ssr靜態(tài)網(wǎng)站生成器VuePress的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司是一家以網(wǎng)站設(shè)計(jì)建設(shè)，微信小程序開發(fā)、網(wǎng)站開發(fā)設(shè)計(jì)，網(wǎng)絡(luò)軟件產(chǎn)品開發(fā)，企業(yè)互聯(lián)網(wǎng)推廣服務(wù)為主的民營科技公司。主要業(yè)務(wù)涵蓋:為客戶提供網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站開發(fā)、域名申請、網(wǎng)站優(yōu)化排名、外鏈等服務(wù)領(lǐng)域。憑借建站老客戶口碑做市場，建設(shè)網(wǎng)站時(shí)，根據(jù)市場搜索規(guī)律和搜索引擎的排名收錄規(guī)律編程，全力為建站客戶設(shè)計(jì)制作排名好的網(wǎng)站，深受老客戶認(rèn)可和贊譽(yù)。

什么是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]一致）

• 自動生成的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: [ /* ... */ ]
   }
  ]
 }
}

以上是“基于vue-ssr靜態(tài)網(wǎng)站生成器VuePress的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！