這次給大家?guī)鞻uePress做出個人網(wǎng)頁，VuePress做個人網(wǎng)頁的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。
VuePressvuepress是尤大大4月12日發(fā)布的一個全新的基于vue的靜態(tài)網(wǎng)站生成器，實際上就是一個vue的spa應(yīng)用，內(nèi)置webpack，可以用來寫文檔。
一個基于 Vue SSR 的靜態(tài)站生成器，本來的目的是爽爽的寫文檔，但是我發(fā)現(xiàn)用來擼一個人博客也非常不錯。
這是VuePress的官方文檔上手搭建你可以跟著文檔上的例子自己玩一玩，不過由于VuePress的文檔也是用VuePress來實現(xiàn)的，所以我取巧直接拿VuePress倉庫中的docs目錄拿來玩耍。
1.首先安裝VuePress到全局npm install -g vuepress2.然后把VuePress倉庫克隆到你的電腦git clone [email protected]:docschina/vuepress.git在docs文件中執(zhí)行（請確保你的 Node.js 版本 >= 8）cd vuepress cd docs vuepress dev當(dāng)你看到這一行就說明已經(jīng)成功了：
VuePress dev server listening at http://localhost:8080/下面我們打開http://localhost:8080/發(fā)現(xiàn)真的打開了vuepress文檔：
下面的工作就是數(shù)據(jù)的替換了，但我們應(yīng)該先看一下docs的目錄結(jié)構(gòu)：
├─.vuepress │ ├─components │ └─public │ └─icons │ └─config.js // 配置文件 ├─config // Vuepress文檔的配置參考內(nèi)容 ├─default-theme-config // Vuepress文檔的默認(rèn)主題配置內(nèi)容 ├─guide // Vuepress文檔的指南內(nèi)容 └─zh // 中文文檔目錄 ├─config ├─default-theme-config └─guide └─README.md // 首頁配置文件文檔分成了兩部分，中文文檔在/zh/目錄下，英文文檔在根目錄下。
其實目錄里面的東西都挺好看懂的，首先guide 、default-theme-config、config 這三個目錄中的都是Vuepress文檔的主要內(nèi)容，從中文文檔里也可以看到只有這三個目錄被替換了。
首頁配置默認(rèn)主題提供了一個主頁布局，要使用它，需要在你的根目錄 README.md 的 YAML front matter 中指定 home：
true，并加上一些其他的元數(shù)據(jù)。
我們先看看根目錄下的README,md：
home: true // 是否使用Vuepress默認(rèn)主題 heroImage: /hero.png // 首頁的圖片 actionText: Get Started → // 按鈕的文字 actionLink: /guide/ // 按鈕跳轉(zhuǎn)的目錄 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 ? 2018-present Evan You // 頁尾實在看不懂，官網(wǎng)有比我更詳細(xì)的配置說明。
導(dǎo)航配置導(dǎo)航配置文件在.vuepress/config.js中在導(dǎo)航配置文件中nav是控制導(dǎo)航欄鏈接的，你可以把它改成自己的博客目錄。
nav: [ {
text: '
Guide'
, link: '
/guide/'
, }
, {
text: '
Config Reference'
, link: '
/config/'
}
, {
text: '
Default Theme Config'
, link: '
/default-theme-config/'
}
]剩下的默認(rèn)主題配置官方文檔都有很詳細(xì)的文檔說明這里就不在啰嗦了。
更改默認(rèn)主題色你可以在.vuepress/目錄下創(chuàng)建一個override.styl文件。
vuepress提供四個可更改的顏色：
$accentColor = #3eaf7c // 主題色 $textColor = #2c3e50 // 文字顏色 $borderColor = #eaecef // 邊框顏色 $codeBgColor = #282c34 // 代碼背景顏色我把它改成了這樣：
側(cè)邊欄的實現(xiàn)由于評論區(qū)里問的人較多，所以在這里更新一下，其實我就算在這里寫的再詳細(xì)也不如大家去看官方文檔。
側(cè)邊欄的配置也在.vuepress/config.js中：
sidebar: [ {
title: '
JavaScript'
, // 側(cè)邊欄名稱 collapsable: true, // 可折疊 children: [ '
/blog/JavaScript/學(xué)會了ES6，就不會寫出那樣的代碼'
, // 你的md文件地址 ] }
, {
title: '
CSS'
, collapsable: true, children: [ '
/blog/CSS/搞懂Z-index的所有細(xì)節(jié)'
, ] }
, {
title: '
HTTP'
, collapsable: true, children: [ '
/blog/HTTP/認(rèn)識HTTP-Cookie和Session篇'
, ] }
, ]對應(yīng)的文檔結(jié)構(gòu)：
├─blog // docs目錄下新建一個博客目錄 │ ├─CSS │ ├─HTTP │ └─JavaScript我的博客：
brownhu部署在配置好你博客之后，命令行執(zhí)行：
Vuepress build當(dāng)你看到這一行就說明成功了：
Success! Generated static files in vuepress.相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！推薦閱讀：
做一個移動端微信公眾號（附代碼）length與size()使用對比以上就是VuePress做出個人網(wǎng)頁的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
VuePress 網(wǎng)頁 做出本文原創(chuàng)發(fā)布php中文網(wǎng)，轉(zhuǎn)載請注明出處，感謝您的尊重！
上一篇：
length與size()使用對比
下一篇：
實戰(zhàn)項目編譯后不在根目錄怎么辦相關(guān)文章相關(guān)視頻修改微信號有什么影響嗎？微信中共享實時位置什么意思數(shù)據(jù)庫設(shè)計的基本原則是什么？微信小程序調(diào)用圖片安全APIVuePress做出個人網(wǎng)頁Servlet 網(wǎng)頁重定向php curl 自定義get方法抓取網(wǎng)頁WebView(網(wǎng)頁視圖)基本用法 WebView處理網(wǎng)頁返回的錯誤碼信息cURL爬取頁面之簡單的網(wǎng)頁爬蟲 [溫州做微信公眾號]