vuepress小课堂001

npm init

生成package.json
里面手动创建如下结构

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── public (可选的)
│   ├── README.md
└── package.json

1 在README.md里面粘贴如下内容（这些是我从官网源码里面首页粘出来的）

---
home: true
heroImage: /hero.png
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
---

### 像数 1, 2, 3 一样容易

```bash //与csdn md编辑器冲突 去掉此行注释即可
# 安装
yarn global add vuepress # 或者：npm install -g vuepress

# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .
```//与csdn md编辑器冲突 去掉此行注释即可

::: warning 注意
请确保你的 Node.js 版本 >= 8.6。
:::

2 把下面这张图片放到public文件夹中

名字是hero.png

你会发现 你已经实现了官网的首页，布局跟官网一模一样

---

由此我们可以得知几点

• vuepress自己带了一个默认主题模板，front matter里本身就自定义了feature等属性，是他的默认主题自己定义并读取的

• 直接读取public里面的图片，路径是/hero.png

• 默认主题连css都已经定义好了

• vuepress自己把根目录的/README.md读取成/的路径，就是一个home首页

• md文件会生成为index.html文件