# 创建自己的vuepress项目

# 开始搭建

官网地址:https://www.vuepress.cn/guide/getting-started.html

  1. 确保自己的Node.js版本>= 8.6,使用node -v查看,进入一个文件夹
yarn init

# 输入完命令之后会跳出要你输入一些信息,第一个输入个项目名,下面的一路回车就行。
1
2
3
  1. 添加vuepress
yarn add -D vuepress
1
  1. 创建文件夹docs,创建你的第一个Markdown文件
mkdir docs
1
echo '# 我的第一个文档!' > docs/README.md
1
  1. 最后在package.json中添加如下内容,完整内容如下:
{
  "name": "vuepress-test-kusch",
  "version": "1.0.0",
  "main": "index.js",
  "author": "kusch",
  "license": "MIT",
  "devDependencies": {
    "vuepress": "^1.7.1"
  },                            # 逗号别忘了
  "scripts": {                   # 新增
    "docs:dev": "vuepress dev docs",   # 新增
    "docs:build": "vuepress build docs" # 新增
  } # 新增
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  1. 运行,查看即可
yarn docs:dev
1

提示

如果出现乱码,就把 README.md 删除,手动新建一个。

  1. 一个基本的目录应该是这样的:

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json
1
2
3
4
5
6
7

config.js 中内容:

module.exports = {
    title: 'Hello VuePress',
    description: 'Just playing around'
}
1
2
3
4

# 使用主题(以官方的博客主题为例)

  1. 安装
yarn add @vuepress/theme-blog -D
1
  1. config.js里面添加内容
# .vuepress/config.js
module.exports = {
  theme: '@vuepress/blog',
  themeConfig: {
    // 请参考文档来查看所有可用的选项。
  }
}
1
2
3
4
5
6
7
  1. 为了直观的看出效果,在你第一个创建的README.md中添加如下内容:
---
title: 五湖四海     
date: 2020-01-11
author: kusch
tags: 
  - JavaScript
  - Vue
location: Taipei  
---

> This is official blog theme.
# 牛逼

## 牛逼二号

### 牛逼三号

#### 牛逼四号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  1. 运行查看
yarn docs:dev
1
Last Update: 11/29/2020, 1:33:21 AM