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