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