基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗
什么是VuePress
VuePress由兩部分組成：一個基于Vue的輕量級靜態(tài)網(wǎng)站生成器，以及為編寫技術(shù)文檔而優(yōu)化的默認(rèn)主題。 它是為了滿足Vue自己的子項目文檔的需求而創(chuàng)建的。
VuePress為每一個由它生成的頁面提供預(yù)加載的html，不僅加載速度極佳，同時對seo非常友好。一旦頁面被加載之后，Vue就全面接管所有的靜態(tài)內(nèi)容，使其變成一個完全的SPA應(yīng)用，其他的頁面也會在用戶使用導(dǎo)航進(jìn)入的時候來按需加載。
參考官方文檔可知該項目有一下特點：
- 內(nèi)置markdown（基礎(chǔ)功能）
- 支持PWA
- 集成了Google Analytics
- 擁有一套默認(rèn)主題（風(fēng)格與(官方文檔)[https://vuepress.vuejs.org]一致）
- 自動生成的GitHub鏈接和頁面編輯鏈接
快速上手
安裝
初始化項目
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)會在 .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']
]
}
}
同時支持分組添加側(cè)邊欄 eg:
module.exports = {
themeConfig: {
sidebar: [
{
title: 'Group 1',
collapsable: false,
children: [
'/'
]
},
{
title: 'Group 2',
children: [ /* ... */ ]
}
]
}
}
總結(jié)
以上所述是小編給大家介紹的基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
本篇文章主要介紹了vue路由懶加載的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue create、vue webpack init創(chuàng)建vue項目產(chǎn)生的項目文件的區(qū)別
這篇文章主要介紹了vue create、vue webpack init創(chuàng)建vue項目產(chǎn)生的項目文件的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue自定義鍵盤信息、監(jiān)聽數(shù)據(jù)變化的方法示例【基于vm.$watch】
這篇文章主要介紹了vue自定義鍵盤信息、監(jiān)聽數(shù)據(jù)變化的方法,結(jié)合實例形式分析了vue.js基于vm.$watch進(jìn)行事件監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了uni-app 的基礎(chǔ)組件，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue 子組件watch監(jiān)聽不到prop的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue插件之滑動驗證碼用法,結(jié)合實例形式詳細(xì)分析了Vue滑動驗證碼插件相關(guān)使用方法與操作注意事項,需要的朋友可以參考下2020-04-04
在VUE項目中經(jīng)常會用到mapState和mapActions，mapState主要用于同步全局的變量或者對象，這篇文章主要介紹了VUE中的mapState和mapActions的使用,需要的朋友可以參考下2022-06-06
MVVM是Model-View-ViewModel的縮寫，MVVM是一種設(shè)計思想，這篇文章主要介紹了Vue生命周期和MVVM框架,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue自定義一個v-model的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
如何使用electron將vue項目打包成.exe文件(保姆級教程)
本文給大家介紹如何使用electron將vue項目打包成.exe文件,大家要注意一下vue2項目,使用的vue-element-admin框架,用electron打包成.exe文件,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-03-03