编写好的文档是准备项目以使您以外的其他人能够理解的关键(包括 6 个月内的您自己)。如果我们需要一种工具来以简单、简单和有效的方式创建文档,那么该工具就是VuePress

什么是 VuePress

VuePress 是 Evan You 的项目之一,你可以猜到,Vue.js 的创建者。一开始它是为了构建 Vue 项目的文档而创建的,尽管现在它已成为为每个人创建文档的流行工具。

既然我们已经介绍了它,让我们开始吧!

初始化我们的 VuePress 项目的最快方法是使用“create-vuepress-site generator”,这将有助于为我们搭建基本的 VuePress 站点结构。

# YARN
yarn create vuepress-site [optionalDirectoryName]
yarn add -D vuepress

进入全屏模式 退出全屏模式

# NPM
npx create-vuepress-site [optionalDirectoryName]
npm install -D vuepress

进入全屏模式 退出全屏模式

执行此操作后,我们将在项目目录中看到新的 VuePress 站点。我们应该看到这样的东西:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--iOvNfVQ0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode .com/res/hashnode/image/upload/v1610547215099/NNFM-3NKV.png)

正如我们所看到的,现在我们在 package.json 上有两个新脚本:

...
  "scripts": {
    "dev": "vuepress dev src",
    "build": "vuepress build src"
  }
...

进入全屏模式 退出全屏模式

让我们使用“dev”命令在本地服务器中提供文档站点。

npm run dev 

进入全屏模式 退出全屏模式

一旦我们这样做,我们应该看到这条消息:

success [14:20:22] Build 5b6b55 finished in 169 ms! ( http://localhost:8080/ )

进入全屏模式 退出全屏模式

现在,Vuepress 将在http://localhost:8080/启动一个开发服务器

让我们来看看

[](https://res.cloudinary.com/practicaldev/image/fetch/s--8JTadO5i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66% 2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1610548160723/bck-_GaAN.gif)

只需几个命令,我们就可以完成很多工作,这是一个外观酷炫、功能强大的 VuePress 文档站点。现在,我们几乎可以用它做任何我们想做的事情。

假设我想添加一个新的子目录。首先,我们进入 index.md 文件。

---
home: true
heroImage: https://v1.vuepress.vuejs.org/hero.png
tagline: 
actionText: Quick Start →
actionLink: /guide/
features:
- title: "Feature 1 Title"
  details: Feature 1 Description
- title: "Feature 2 Title"
  details: Feature 2 Description
- title: "Feature 3 Title"
  details: Feature 3 Description
footer: Made by  with ❤️
---

进入全屏模式 退出全屏模式

它与我们在上面看到的一致吗?很酷,那么让我们前往“指南”文件夹。一旦我们在这里,我们可以创建一个新的 .md 文件并添加

Hello World!

检查它是否有效。另外,不要忘记将我们的新文件添加到 config.js 中,以便路由按预期工作。我们应该有这样的东西:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ZBECnqeb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode .com/res/hashnode/image/upload/v1610548849448/sCSQto9f1.png)

现在,如果我们检查我们的开发服务器,我们应该能够看到我们的新子目录:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ryx17H1B--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode .com/res/hashnode/image/upload/v1610549006608/oa56U7hcm.png)

但是 Vue 呢?是的,它被称为 VuePress 是有原因的,我们可以在 markdown 文件中使用 Vue。这是因为 markdown 文件首先被编译为 HTML 并作为 Vue 组件传递给“vue-loader”,因此您可以使用 Vue 插值并访问站点数据:

# Hello World!

Hello everyone!

<span v-for="i in 3">{{ i }}</span>

进入全屏模式 退出全屏模式

[](https://res.cloudinary.com/practicaldev/image/fetch/s--5F4s9x6m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode .com/res/hashnode/image/upload/v1610549706671/o0sA4C1rS.png)

很容易吧?一旦我们熟悉了 VuePress 的目录结构和配置,我们就可以为我们的项目创建非常酷的文档。希望您喜欢它并可以利用这个很棒的工具!