静态markdown渲染框架VuePress之路

VuePress简介：

• 话不多说直接上官方文档 VuePress 中文文档 | VuePress 中文网
• 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
• 享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。
• VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。 

注意：

请确保你的 Node.js 版本 >= 8.6。

---

目录基本结构：

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

注意：

请留意目录名的大写。

• docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
• docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
• docs/.vuepress/theme: 用于存放本地主题。
• docs/.vuepress/styles: 用于存放样式相关的文件。
• docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
• docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
• docs/.vuepress/public: 静态资源目录。
• docs/.vuepress/templates: 存储 HTML 模板文件。
• docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
• docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
• docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
• docs/.vuepress/enhanceApp.js: 客户端应用的增强。

注意：

当你想要去自定义 templates/ssr.html 或 templates/dev.html 时，最好基于 默认的模板文件 (opens new window)来修改，否则可能会导致构建出错。

---

 默认的页面路由：

        此处我们把 docs 目录作为 targetDir （参考 命令行接口），下面所有的“文件的相对路径”都是相对于 docs 目录的。在项目根目录下的 package.json 中添加 scripts ：

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

对于上述的目录结构，默认页面路由地址如下：

文件的相对路径	页面路由地址
/README.md	/
/guide/README.md	/guide/
/config.md	/config.html

---

就先说到目录结构这里，想了解更多记得查看官方文档！！！ 

 个人搭建的一个VuePress框架 GitHub 地址：

       https://github.com/AFeiNice/VuePress-markdown-.git

在VuePress框架中，Markdown渲染的原理涉及到以下几个核心组件和概念：

1. Markdown文件：VuePress的源文件通常采用Markdown格式编写，这些Markdown文件包含了文档内容和结构。

2. VuePress插件：VuePress提供了丰富的插件系统，其中包括Markdown插件。这些插件用于扩展VuePress的功能，包括Markdown的渲染和自定义标记的处理。

3. Markdown解析器：VuePress使用Markdown解析器来将Markdown文件转换为HTML格式。通常情况下，VuePress使用Markdown-it这个流行的Markdown解析器，它可以将Markdown文本解析成HTML。

4. Vue组件：在VuePress中，你可以使用Vue组件来自定义页面的布局和样式。这些Vue组件可以包含HTML、Markdown标记和其他Vue组件，从而实现更复杂的页面结构。

5. VuePress主题：VuePress主题控制着整个站点的外观和布局。主题可以包含自定义的样式、布局组件以及Markdown渲染的配置。

Markdown渲染的具体原理如下：

1. 当用户访问VuePress站点时，VuePress会加载配置和主题。

2. VuePress会将Markdown文件传递给Markdown解析器，以将Markdown文本转换为HTML。

3. 渲染后的HTML内容将被插入到Vue组件中，这些组件可以包含自定义的样式和布局。

4. 最终的页面会以HTML格式呈现给用户。

在VuePress中，你还可以使用一些特殊的Markdown语法来实现更丰富的功能，例如代码块的语法高亮、内置的Vue组件渲染等。总的来说，VuePress的Markdown渲染原理基于Markdown解析器和Vue组件的协作，使你能够创建具有丰富功能和自定义外观的文档站点。