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

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

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

什么是VuePress

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

VuePress為每一個(gè)由它生成的頁面提供預(yù)加載的html，不僅加載速度極佳，同時(shí)對(duì)seo非常友好。一旦頁面被加載之后，Vue就全面接管所有的靜態(tài)內(nèi)容，使其變成一個(gè)完全的SPA應(yīng)用，其他的頁面也會(huì)在用戶使用導(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)會(huì)在 .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) ，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue集成一個(gè)支持圖片縮放拖拽的富文本編輯器
這篇文章主要介紹了vue集成一個(gè)支持圖片縮放拖拽的富文本編輯器，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01
vue3實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊菜單欄的幾種方式簡(jiǎn)單總結(jié)
在做開發(fā)中都會(huì)遇到的需求,每個(gè)用戶的權(quán)限是不一樣的,那他可以訪問的頁面(路由)可以操作的菜單選項(xiàng)是不一樣的,如果由后端控制,我們前端需要去實(shí)現(xiàn)動(dòng)態(tài)路由,動(dòng)態(tài)渲染側(cè)邊菜單欄,這篇文章主要給大家介紹了關(guān)于vue3實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊菜單欄的幾種方式,需要的朋友可以參考下
2024-02-02
使用element upload上傳組件如何去掉刪除按鈕
這篇文章主要介紹了使用element upload上傳組件如何去掉刪除按鈕
2023-07-07
Vue生命周期activated之返回上一頁不重新請(qǐng)求數(shù)據(jù)操作
這篇文章主要介紹了Vue生命周期activated之返回上一頁不重新請(qǐng)求數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
詳解vue項(xiàng)目接入微信JSSDK的坑
這篇文章主要介紹了詳解vue項(xiàng)目接入微信JSSDK的坑,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
Vue記事本實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)記事本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
vue項(xiàng)目中各文件的使用說明
這篇文章主要介紹了vue項(xiàng)目中各文件的使用說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問題及解決
這篇文章主要介紹了vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue項(xiàng)目拍照或上傳圖片并實(shí)現(xiàn)轉(zhuǎn)化為base64格式
這篇文章主要介紹了vue項(xiàng)目拍照或上傳圖片并實(shí)現(xiàn)轉(zhuǎn)化為base64格式方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
Vue各種loader的基本配置與使用示例教程
這篇文章主要介紹了Vue?各種loader的基本配置與使用，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01