参考地址 深入浅出 VuePress（一）
前言
在 vuepress 刚出时，我就觉得这是个很值得追更的开源项目。果不其然，里面众多的前端编程技巧让我受益良多。
于是在周末这种日子里，人家追剧我追码。
今天，我就和大家分享下 vuepress 是如何做到在 Markdown 中使用 Vue 语法的。
原理
众所周知，Markdown 是一种标记语言，类似于 HTML，它也有对应的语法和词法。而 Vue 说白了也是一种语法，关键在于，Markdown 和 Vue 代码都可以被解释成 HTML。
聪明的读者应该想到了：添加一个中间过程，让 Vue 转成 Markdown 或者让 Markdown 转成 Vue，是不是就可以实现在 Markdown 中使用 Vue 语法了呢？
让我们再考虑一下两个方案的实现难点：
Vue -> Markdown：template 和 style 部分还好，可 js 部分怎么办？
Markdown -> Vue：可以将 markdown 代码解释成 html 或者 js 混入到 vue 代码中。
很显然，第二种方案实现起来更靠谱些，所以尤雨溪也是这样选的：
vuepress 在 Markdown 中使用 Vue 语法原理
在语法之间的转换工作上，webpack 的 loader 可是很擅长的。所以，vuepress 自定义了一个 markdownLoader 来将 Markdown 转成 Vue，再通过 vue-loader 得到最终的 HTML。
代码实现
markdownLoader
这是一个自定义的 loader，可参考如何编写一个 loader？
这个 loader 接收一个参数，里面包含一个 markdown-it 实例，作者用它来把 markdown 解释成 html。
得到 html 后将之包裹在 template 标签内，返回。
`<template>\n` +
`<div class="markdown">${html}</div>\n` +
`</template>\n`主要过程其实就这两步。当然，vuepress 还在 markdownLoader 里做了很多其他的事情，比如解析 yaml front matter、推断标题、获取 markdown 里提升的 style、script 等标签。
自己实现一个 demo
接下来，大家可以跟我一起实现一个基本的 demo。完整代码可见 github。
新建一个 Vue 项目
我们使用 vue-cli(v2.9.6) 新建一个项目：
vue-cli 新建项目
编写 markdownLoader
2.1 引入 markdown-it
npm install markdown-it --save
2.2 新建 markdownLoader 文件
const markdown = require('markdown-it')module.exports = function(src) { const html = markdown().render(src) return ( `<template>\n` + `<div class="markdown">${html}</div>\n` + `</template>\n` )}2.3 在 webpack 的 module rules 配置中添加 markdownLoader
{ test: /\.md$/, use: [ { loader: 'vue-loader' }, { loader: require.resolve('./markdownLoader') } ]}
在 Vue 文件里使用 markdown 文件
3.1 在 src/components 新建一个 markdown.md
## 我是一个 markdown
{{1+2}}3.2 在 src/router/index 中引入 markdown
const Markdown = () => import('@/components/markdown.md')3.3 将这个组件添加进路由里去
{
path: '/md',
name: 'Markdown',
component: Markdown}
结果
在 Markdown 中使用 React(JSX) 语法
既然可以在 markdown 里写 vue，那在 markdonw 里面写 react 理论上也是可以实现的：让 markdownLoader 最后返回一个 React 组件，之后使用 babel-loader 转成 js。
这一次我们是将 markdown 转 jsx 再包裹在一个 React 组件(函数或者类)里：
return (
`import React from 'react';
${registerComponent}
function R() {
return (
<div>
<div className="markdown">${html}</div>
</div>)
}
export default R;\n`
)有兴趣的读者可以自行实现完整的 react 版本的 markdownLoader 代码。
结语
本文实现的 demo 只对 markdownLoader 的关键步骤做了实现，实际上还有很多问题需要解决，如浏览器的 API 访问限制、代码块和高亮的处理等需要解决，这篇文章就不涉及了。