基于vue-ssr的靜態網站生成器VuePress 初體驗

什么是VuePress

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

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

參考官方文檔可知該項目有一下特點：

快速上手

安裝

初始化項目

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: [ /* ... */ ]
 }
 ]
 }
}

總結

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com