用VuePress搞定你的博客（一）
前言
作為一個(gè)想成為前端工程師的大齡熊孩子，自學(xué)前端的日子已經(jīng)挺久了。
然后自學(xué)的時(shí)候特想擁有一個(gè)自己的個(gè)人網(wǎng)站、個(gè)人博客之類的。有一天我在用vue + elementUi + koa2 + mongoDB搭建我期待已久的個(gè)人博客的時(shí)候。突然我想了一件事情，我究竟為什么要為了寫個(gè)博客去用這么多技術(shù)棧呢？
于是乎懶癌發(fā)作，于是我找到了這個(gè)東西，就是VuePress。
1. VuePress
VuePress是一個(gè)極簡(jiǎn)靜態(tài)網(wǎng)站生成器，并且包含由Vue來(lái)驅(qū)動(dòng)的主題系統(tǒng)和插件API，誕生的初衷是為了Vue團(tuán)隊(duì)寫文檔時(shí)能更加愉♂悅（笑）。它的默認(rèn)主題就是Vue的文檔的樣式。
它是由Vue、Vue Router和webpack驅(qū)動(dòng)的單頁(yè)應(yīng)用，它會(huì)根據(jù)Docs目錄下的md文件來(lái)了使用服務(wù)器渲染（SSR）生成靜態(tài)頁(yè)面，因?yàn)榧s定大于設(shè)置所以大部分都不需要設(shè)置什么，就像Nuxt一樣。
2. 安裝
就像平常寫項(xiàng)目一樣，我們用npm init來(lái)生成一個(gè)目錄,在目錄中新建docs文件夾，之后再新建一個(gè)README.md文件，在其中隨便輸入一段內(nèi)容，比如“# hello vuepress”
接下來(lái)我們來(lái)安裝VuePress。 npm i vuepress@next -g// 安裝1.X版本 雖然還在alpha階段 但是新增的功能巨好用 npm i vuepress@next -D// 本地也來(lái)一個(gè) 復(fù)制代碼下面我們執(zhí)行命令行vuepress dev docs， 輸出如下為止
現(xiàn)在我們打開瀏覽器看下嗯，跑起來(lái)！我們繼續(xù)
3. 使用以及配置
在docs文件夾下新建.vuepress文件夾并新建config.js文件。然后我們來(lái)做點(diǎn)配置（繼續(xù)抄文檔）
給./docs/README.me添加內(nèi)容 (這個(gè)內(nèi)容一定要放在頂部且在markdown文字內(nèi)容之前)
home: true heroImage: /hero.png heroText: Hero 標(biāo)題 tagline: Hero 副標(biāo)題 actionText: 快速上手 → actionLink: /zh/guide/ features: - title: 簡(jiǎn)潔至上 details: 以 Markdown 為中心的項(xiàng)目結(jié)構(gòu)，以最少的配置幫助你專注于寫作。 - title: Vue驅(qū)動(dòng) details: 享受 Vue + webpack 的開發(fā)體驗(yàn)，在 Markdown 中使用 Vue 組件，同時(shí)可以使用 Vue 來(lái)開發(fā)自定義主題。 - title: 高性能 details: VuePress 為每個(gè)頁(yè)面預(yù)渲染生成靜態(tài)的 HTML，同時(shí)在頁(yè)面被加載的時(shí)候，將作為 SPA 運(yùn)行。 footer: MIT Licensed | Copyright ? 2018-present Evan You --- (markdown內(nèi)容) 復(fù)制代碼給./docs/.vuepress/config.js添加內(nèi)容
module.exports = {title: 'Darki',themeConfig: {nav: [{text: 'home', link: '/'},{text: 'guichu', items:[{text: '葛平', link: '/geping/'},{text: '元首', link: '/yuanshou/'}]},{text: 'darki', link: 'http://hujiashi.top'}]} } 復(fù)制代碼接下來(lái)我們?cè)?/docs/下新建./docs/guichu/geping/index.md和./docs/guichu/yuanshou/index.md，并在里面隨便寫的點(diǎn)什么之類的。 目錄結(jié)構(gòu)如下
接下來(lái)我們重啟dev，等等，重啟前為了方便我們按照官方推薦給 package.json文件添加一下內(nèi)容
{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"} } 復(fù)制代碼停止服務(wù)，重新在命令行輸入npm run docs:dev(懶得再package.js里添加命令的朋友也可以用王X牌~泥垢了!!)也可以繼續(xù)用vuepress dev docs
老鐵沒毛病~如圖所見VuePress會(huì)根據(jù)md在目錄內(nèi)的位置通過(guò)vue-router自動(dòng)生成路徑，但是由于其為靜態(tài)網(wǎng)站生成器，所以改動(dòng)markdown文檔需要重啟服務(wù)。
以上內(nèi)容均抄了官方文檔，如有雷同，本來(lái)就一樣的。
不過(guò)照搬文檔不是我的本意，畢竟這個(gè)是系列的（一），該幫看文檔的內(nèi)容也先基本交代一下。
這個(gè)是下期預(yù)告。
如何設(shè)計(jì)自己的VuePress博客轉(zhuǎn)載于:https://juejin.im/post/5c65656ff265da2dab17b5bb
總結(jié)
以上是生活随笔為你收集整理的用VuePress搞定你的博客（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
