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文件