Markdown 拓展-使用 vue.press 生成网站

VuePress V2 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown在新窗口打开来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。

VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求，但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。

一个 VuePress 站点本质上是一个由 Vue在新窗口打开和 Vue Router在新窗口打开驱动的单页面应用 (SPA)。

路由会根据你的 Markdown 文件的相对路径来自动生成。每个 Markdown 文件都通过 markdown-it在新窗口打开编译为 HTML ，然后将其作为 Vue 组件的模板。因此，你可以在 Markdown 文件中直接使用 Vue 语法，便于你嵌入一些动态内容。

在开发过程中，我们启动一个常规的开发服务器 (dev-server) ，并将 VuePress 站点作为一个常规的 SPA。如果你以前使用过 Vue 的话，你在使用时会感受到非常熟悉的开发体验。

在构建过程中，我们会为 VuePress 站点创建一个服务端渲染 (SSR) 的版本，然后通过虚拟访问每一条路径来渲染对应的 HTML 。

创建并进入一个新目录

代码语言：javascript复制

mkdir vuepress-starter
cd vuepress-starter

初始化项目

代码语言：javascript复制

git init
yarn init

将 VuePress 安装为本地依赖

代码语言：javascript复制

yarn add -D vuepress@next

在 package.json 中添加一些 scripts在新窗口打开

代码语言：javascript复制

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

将默认的临时目录和缓存目录添加到 .gitignore 文件中

代码语言：javascript复制

echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore

创建你的第一篇文档

代码语言：javascript复制

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

在本地启动服务器来开发你的文档网站

代码语言：javascript复制

yarn docs:dev

VuePress 会在 http://localhost:8080在新窗口打开启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。

假设这是你的 Markdown 文件所处的目录结构：

代码语言：javascript复制

└─ docs
   ├─ guide
   │  ├─ getting-started.md
   │  └─ README.md
   ├─ contributing.md
   └─ README.md

将 docs 目录作为你的 sourceDir ，例如你在运行 vuepress dev docs 命令。此时，你的 Markdown 文件对应的路由路径为：

在你使用 Markdown 的链接语法在新窗口打开时， VuePress 会为你进行一些转换。