VuePress
VuePress 的原理是自动将markdown文档编译为vue组件或者html代码块，通过约定markdown的特定写法，并且支持markdown里面直接调用vue组件
一、需要如下配置
引入安装vuepress
yarn add -D vuepress # npm install -D vuepress
项目文件目录如下：
.
├── docs
│ ├── .vuepress (可选的)
│ │ ├── components (可选的， 里面是vue文件，会注册为全局组件)
│ │ ├── theme (可选的，自定义主题，包括布局，多语言等)
│ │ │ └── Layout.vue
│ │ ├── public (可选的，静态资源放这)
│ │ ├── styles (可选的，存放样式相关的文件)
│ │ │ ├── index.styl (将会被自动应用的全局样式文件,优先级比默认样式更高)
│ │ │ └── palette.styl
│ │ ├── templates (可选的, 谨慎配置, 存储 HTML 模板文件)
│ │ │ ├── dev.html（用于开发环境）
│ │ │ └── ssr.html
│ │ ├── config.js (可选的， title，desc，nav，sidebar，多语言.....)
│ │ └── enhanceApp.js (可选的， 客户端应用的增强)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md(/guide/， 这个路径)
│ └── README.md(首页)
│
└── package.json
package.json 中添加如下命令：
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
}
二、原理
markdown-it 能将markdown转化为html，但如何转化为vue文件呢，需要在这个上面封装一层，自定义一个webpack-loader,如下
- html 转化为vue文件
`<template>\n` +
`<div class="markdown">${html}</div>\n` +
`</template>\n`
- 自定义loader：
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`
)
}
- webpack 中添加loader
{
test: /\.md$/,
use: [
{ loader: 'vue-loader' },
{
loader: require.resolve('./markdownLoader')
}
]
}
markdown-it 是什么
markdown-it 是一个辅助解析 markdown 的库，可以完成从 # test 到 <h1>test</h1> 的转换
在线示例
解析后的结果是结构化的json对象，类似ast树，然后根据这个结构化的对象生成对应的html代码
[
{
"type": "heading_open",
"tag": "h1",
"attrs": null,
"map": [0,1],
"children": null,
"markup": "#",
...
},
{
"type": "inline",
"map": [0,1],
"children": [
{
"type": "text",
"tag": "",
"block": false,
...
}
],
"content": "text",
...
},
{
"type": "heading_close",
"tag": "h1",
...
}
]
