¶ VuePress 使用方法与关键知识点

¶ 安装

将 VuePress 作为一个本地依赖安装

yarn add -D vuepress # 或者：npm install -D vuepress

¶ 目录结构

新建一个 docs 文件夹

mkdir docs

新建一个 markdown 文件

echo '# Hello VuePress!' > docs/README.md

¶ 路径

.
├─ README.md
├─ foo
│  ├─ README.md
│  ├─ one.md
│  └─ two.md
└─ bar
   ├─ README.md
   ├─ three.md
   └─ four.md

1
2
3
4
5
6
7
8
9
10

假设你现在在 foo/one.md 中：

[Home](/) <!-- 跳转到根部的 README.md -->
[foo](/foo/) <!-- 跳转到 foo 文件夹的 index.html -->
[foo heading](./#heading) <!-- 跳转到 foo/index.html 的特定标题位置 -->
[bar - three](../bar/three.md) <!-- 具体文件可以使用 .md 结尾（推荐） -->
[bar - four](../bar/four.html) <!-- 也可以用 .html -->

1
2
3
4
5

¶ 项目运行配置

package.json

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

1
2
3
4
5
6

¶ 开始写作

项目开发

npx vuepress dev docs

npm run docs:dev

项目打包

npm run docs:build

¶ deploy自动部署

根据已经配置好的 deploy.sh 脚本，在项目根目录打开 git base，如果是 windows 用户就可以直接运行：

npm run push "提交说明文案"

¶ vuepress在md中的一些语法

¶ 特殊格式

提示

This is a tip

警告

This is a warning

危险

This is a dangerous warning

¶ 添加静态图片

![imageName](imgUrl)

¶ 添加指定样式

1、不使用预编译，直接在 md 底部添加 style 标签

<style lang="stylus"></style>

2、使用预编译处理，首先需要安装所需的模块。举例：stylus

npm i stylus stylus-loader -D

¶ 在 md 文件中直接写 js

<script>
  export default {
    //...do something
  };
</script>

1
2
3
4
5

¶ 代码中的行高亮

语言后面使用{数字} 例如 js{4} 表示第四行高亮

var a = 1;
var b = 2;
var c = 3;

1
2
3

¶ 表格的写法 o(￣︶￣)o

1	2

¶ emoji 小图标

🥑 🍅 🍆 🥒 🥕 🌽 🌶 🥔 🍠 🌰 🥜 🍯 🥐 🍞 🥖 🧀 🥚 🍳 🥓 🥞 🍤 🍗 ...更多

gitbook →