基于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è)面提供預(yù)加載的html，不僅加載速度極佳，同時(shí)對(duì)seo非常友好。一旦頁(yè)面被加載之后，Vue就全面接管所有的靜態(tài)內(nèi)容，使其變成一個(gè)完全的SPA應(yīng)用，其他的頁(yè)面也會(huì)在用戶使用導(dǎo)航進(jìn)入的時(shí)候來(lái)按需加載。
參考官方文檔可知該項(xiàng)目有一下特點(diǎn)：
- 內(nèi)置markdown（基礎(chǔ)功能）
- 支持PWA
- 集成了Google Analytics
- 擁有一套默認(rèn)主題（風(fēng)格與(官方文檔)[https://vuepress.vuejs.org]一致）
- 自動(dòng)生成的GitHub鏈接和頁(yè)面編輯鏈接
快速上手
安裝
初始化項(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
構(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)站的支持！
- VuePress 中如何增加用戶登錄功能
- Vuepress 搭建帶評(píng)論功能的靜態(tài)博客的實(shí)現(xiàn)
- 如何使用VuePress搭建一個(gè)類型element ui文檔
- VuePress 快速踩坑小結(jié)
- 使用vuepress搭建靜態(tài)博客的示例代碼
- VuePress 靜態(tài)網(wǎng)站生成方法步驟
- Hexo已經(jīng)看膩了，來(lái)手把手教你使用VuePress搭建個(gè)人博客
- 淺談vuepress 踩坑記
- 基于VuePress 輕量級(jí)靜態(tài)網(wǎng)站生成器的實(shí)現(xiàn)方法
- Vue極簡(jiǎn)生成器?Vuepress的實(shí)現(xiàn)
相關(guān)文章
這篇文章主要介紹了vue集成一個(gè)支持圖片縮放拖拽的富文本編輯器，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
vue3實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊菜單欄的幾種方式簡(jiǎn)單總結(jié)
在做開發(fā)中都會(huì)遇到的需求,每個(gè)用戶的權(quán)限是不一樣的,那他可以訪問的頁(yè)面(路由)可以操作的菜單選項(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上傳組件如何去掉刪除按鈕2023-07-07
Vue生命周期activated之返回上一頁(yè)不重新請(qǐng)求數(shù)據(jù)操作
這篇文章主要介紹了Vue生命周期activated之返回上一頁(yè)不重新請(qǐng)求數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了詳解vue項(xiàng)目接入微信JSSDK的坑,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)記事本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue項(xiàng)目中各文件的使用說(shuō)明,具有很好的參考價(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的基本配置與使用，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01