這次給大家帶來VuePress做出個人網頁，VuePress做個人網頁的注意事項有哪些，下面就是實戰案例，一起來看一下。愛掏網 - it200.com
VuePress
vuepress是尤大大4月12日發布的一個全新的基于vue的靜態網站生成器，實際上就是一個vue的spa應用，內置webpack，可以用來寫文檔。愛掏網 - it200.com
一個基于 Vue SSR 的靜態站生成器，本來的目的是爽爽的寫文檔，但是我發現用來擼一個人博客也非常不錯。愛掏網 - it200.com
這是VuePress的官方文檔
上手搭建
你可以跟著文檔上的例子自己玩一玩，不過由于VuePress的文檔也是用VuePress來實現的，所以我取巧直接拿VuePress倉庫中的docs目錄拿來玩耍。愛掏網 - it200.com
1.首先安裝VuePress到全局
npm install -g vuepress
2.然后把VuePress倉庫克隆到你的電腦
git clone git@github.com:docschina/vuepress.git
在docs文件中執行（請確保你的 Node.js 版本 >= 8）
cd?vuepress cd?docs vuepress?dev登錄后復制
當你看到這一行就說明已經成功了：
?VuePress?dev?server?listening?at?http://localhost:8080/登錄后復制
下面我們打開http://localhost:8080/
發現真的打開了vuepress文檔：
下面的工作就是數據的替換了，但我們應該先看一下docs的目錄結構：
├─.vuepress │?├─components │?└─public │?└─icons │?└─config.js?//?配置文件 ├─config?//?Vuepress文檔的配置參考內容 ├─default-theme-config?//?Vuepress文檔的默認主題配置內容 ├─guide?//?Vuepress文檔的指南內容 └─zh?//?中文文檔目錄 ?├─config ?├─default-theme-config ?└─guide └─README.md?//?首頁配置文件登錄后復制
文檔分成了兩部分，中文文檔在/zh/目錄下，英文文檔在根目錄下。愛掏網 - it200.com
其實目錄里面的東西都挺好看懂的，首先guide 、default-theme-config、config 這三個目錄中的都是Vuepress文檔的主要內容，從中文文檔里也可以看到只有這三個目錄被替換了。愛掏網 - it200.com
首頁配置
默認主題提供了一個主頁布局，要使用它，需要在你的根目錄?README.md?的?YAML front matter?中指定?home：true，并加上一些其他的元數據。愛掏網 - it200.com
我們先看看根目錄下的README,md：
home:?true?//?是否使用Vuepress默認主題 heroImage:?/hero.png?//?首頁的圖片 actionText:?Get?Started?→?//?按鈕的文字 actionLink:?/guide/?//?按鈕跳轉的目錄 features:?//?首頁三個特性 -?title:?Simplicity?First ?details:?Minimal?setup?with?markdown-centered?project?structure?helps?you?focus?on?writing. -?title:?Vue-Powered ?details:?Enjoy?the?dev?experience?of?Vue?+?webpack,?use?Vue?components?in?markdown,?and?develop?custom?themes?with?Vue. -?title:?Performant ?details:?VuePress?generates?pre-rendered?static?HTML?for?each?page,?and?runs?as?an?SPA?once?a?page?is?loaded. footer:?MIT?Licensed?|?Copyright???2024-present?Evan?You?//?頁尾登錄后復制
實在看不懂，官網有比我更詳細的配置說明。愛掏網 - it200.com
導航配置
導航配置文件在.vuepress/config.js中
在導航配置文件中nav是控制導航欄鏈接的，你可以把它改成自己的博客目錄。愛掏網 - it200.com
nav:?[
?{
?text:?'Guide',
?link:?'/guide/',
?},
?{
?text:?'Config?Reference',
?link:?'/config/'
?},
?{
?text:?'Default?Theme?Config',
?link:?'/default-theme-config/'
?}
]
登錄后復制
剩下的默認主題配置官方文檔都有很詳細的文檔說明這里就不在啰嗦了。愛掏網 - it200.com
更改默認主題色
你可以在.vuepress/目錄下創建一個override.styl文件。愛掏網 - it200.com
vuepress提供四個可更改的顏色：
$accentColor?=?#3eaf7c?//?主題色 $textColor?=?#2c3e50?//?文字顏色 $borderColor?=?#eaecef?//?邊框顏色 $codeBgColor?=?#282c34?//?代碼背景顏色登錄后復制
我把它改成了這樣：
側邊欄的實現
由于評論區里問的人較多，所以在這里更新一下，其實我就算在這里寫的再詳細也不如大家去看官方文檔。愛掏網 - it200.com
側邊欄的配置也在.vuepress/config.js中：
sidebar:?[
?{
?title:?'JavaScript',?//?側邊欄名稱
?collapsable:?true,?//?可折疊
?children:?[
?'/blog/JavaScript/學會了ES6，就不會寫出那樣的代碼',?//?你的md文件地址
?]
?},
?{
?title:?'CSS',?
?collapsable:?true,
?children:?[
?'/blog/CSS/搞懂Z-index的所有細節',
?]
?},
?{
?title:?'HTTP',
?collapsable:?true,
?children:?[
?'/blog/HTTP/認識HTTP-Cookie和Session篇',
?]
?},
]
登錄后復制
對應的文檔結構：
├─blog?//?docs目錄下新建一個博客目錄 │?├─CSS │?├─HTTP │?└─JavaScript登錄后復制
我的博客：brownhu
部署
在配置好你博客之后，命令行執行：
Vuepress build
當你看到這一行就說明成功了：
Success! Generated static files in vuepress.
相信看了本文案例你已經掌握了方法，更多精彩請關注愛掏網 - it200.com其它相關文章！
推薦閱讀：
做一個移動端微信公眾號（附代碼）
length與size()使用對比
以上就是VuePress做出個人網頁的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！