vuepress学习（一）- 搭建默认主题静态网站

首先附上vuepress官网： 介绍 | VuePress
正如官网上介绍的一样，vuepress由两部分组成： 极简静态网站生成器，默认主题（为写技术文档儿优化的）。这里我们先了解下如何搭建一个静态网站。

目标：搭建一个类似如下的文档：

没错，我除了看文档，还借鉴了这位大神的技术博客。附上链接： https://segmentfault.com/a/1190000016333850

搭建步骤：

1. 创建并进入一个新目录，然后初始化。

 

 

2. 将 vuepress 安装为本地依赖，官网不推荐全部安装

安装好了之后，项目打开是如下状态，只有一个pacakge.json文件

 3. 新建一个docs文件夹，并建一个README.md 文档，

4. 在package.json中添加启动与打包的命令，完整项目目录如下：

 

运行后，如图所示，啥都没有，效果如下图： 

到这里为止，就是创建并启动了一个简单的vuepress静态网站。建房子的地基打好了，接下来，我们慢慢增加一砖一瓦。

如何使用vuepress提供的默认主题呢？

1. 创建.vuepress文件夹

2. 在vuepress文件夹下创建config.js文件，内容如下：

3. 创建一个public文件夹，这个文件夹是用来放置静态资源的，打包出来之后会放在.vuepress/dist/的根目录。

我在这里面放了一张图片 

4. 将docs文件夹下的README.md文件内容改成如下内容，从而使用vuepress自带的默认主题：

---

home: true

heroImage: /logo.jpg

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

---

重新运行项目（为什么要重新运行呢，因为我还没有配置热更新，编辑完后直接保存刷新页面并没有更新内容，运行到一半卡住了）： npm run docs:dev

效果图如下：

 

 好记性不如烂笔头，编辑的这么详细是希望这个笔记在下次看到的时候可以直接将vuepress搭建起来。